Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンド開発者も知っておきたいAWS Lambda とサーバーレス / Serverl...
Search
Keisuke69
November 09, 2020
Programming
6
8k
フロントエンド開発者も知っておきたい AWS Lambda とサーバーレス / Serverless for frontend developers
Front-End Study #1「Cloud Native時代のフロントエンド」での登壇資料です。
Keisuke69
November 09, 2020
Tweet
Share
More Decks by Keisuke69
See All by Keisuke69
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
1.3k
波濤 / Surges
keisuke69
1
190
クロスプラットフォーム開発の真実
keisuke69
2
700
脱Firebase. 我々はどう生きるか/Migrate from Firebase
keisuke69
7
9.1k
AWSでISRの実現!その謎を解明すべくAmazonの奥地へと足を踏み入れる!! / Digging how to running ISR on AWS
keisuke69
4
9.4k
様式美と絵に書いた餅、そしてそこにあるリアル
keisuke69
0
5.6k
俺のJestが動かない 2021 Spring / My Jest does not work well 2021 Spring
keisuke69
0
7.7k
Pythonistaに贈るAWS Lambda入門 / AWS Lambda Essentials for Pythonista
keisuke69
2
4.9k
The Twelve-Factor App on AWS
keisuke69
17
5.3k
Other Decks in Programming
See All in Programming
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Goで作る、開発・CI環境
sin392
0
240
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
250
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.9k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
130
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
KATA
mclloyd
30
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
RailsConf 2023
tenderlove
30
1.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Why Our Code Smells
bkeepers
PRO
336
57k
What's in a price? How to price your products and services
michaelherold
246
12k
Making Projects Easy
brettharned
116
6.3k
BBQ
matthewcrist
89
9.7k
Speed Design
sergeychernyshev
32
1k
Faster Mobile Websites
deanohume
307
31k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
フロントエンド開発者も知っておきたい AWS Lambda とサーバーレス @Keisuke69 Front-End Study #1
Amazon Web Services Japan K.K. Keisuke Nishitani @Keisuke69 Programming is
a creative work. Love Music ♫ Love Camping ⛺ Blog: https://www.keisuke69.net/ Everything will be serverless. ⚡
Why are you here? First of all, what is serverless?
Serverless • サーバーサイドの⽂脈で語られることが多い • 基本的にはバックエンド • フロントエンド開発者は普段は直接的には関わらないことが多 い?
None
Serverless • サーバーが実際に存在しないわけではなく、意識する必要がない • APIを開発する上でそれらを動かすためのサーバーとかの準備 • セキュリティとかネットワークもサービス側がケア • 何が嬉しいか
No need to setup servers anymore
Frontend developers perspective…
Single Page Application + API Server Side Rendering + API
Static Site Generation + API
Single Page Application + API Server Side Rendering + API
Static Site Generation + API
APIs are always there.
REST or GraphQL
REST APIs with Serverless • Amazon API Gateway • HTTP(S)のエンドポイント
• ロードバランサーやWebサーバ不要、もちろんネットワーク周りも • カスタムドメインOK • AWS Lambda • 関数 • ランタイムのセットアップ不要 • Node.js使える • 多くのAWSサービスと連携できる • Datastoreは⽬的に応じて使い分け
GraphQL with Serverless • AWS AppSync • GraphQLのエンドポイントを公開 • もちろんサーバーのセットアップとか不要
• 柔軟にデータソース選べる • AWS Amplify • フロントエンド開発者向けツールセット • AWSの各サービスをフロントエンド開発者がそこそこ簡単に使いやすくす るもの • AppSync使う場合におすすめ
Single Page Application + API Server Side Rendering + API
Static Site Generation + API
SPA with Serverless • Amazon S3とAmazon CloudFrontを使ってホスティング • S3はストレージサービスだが、単体で静的サイトの配信ができる •
もちろん、カスタムドメイン使えるし、スケールもする • さらにCDNであるCloudFrontを使うことでキャッシュもできる • Amplify CLIだけでも簡単にセットアップして配信できる
Single Page Application + API Server Side Rendering + API
Static Site Generation + API
SSR with Serverless • SSRの場合、サーバーサイドでレンダリングするのでそのための サーバが必要になる • 最近だとよくあるのはNode.jsを⼊れたサーバをコンテナで⽤意するパ ターン •
Dockerfile… • コンテナを実⾏するための基盤も必要 • サーバーサイドレンダリングのインフラ的な課題 • CPU負荷が⾼くなりがち • CPU負荷⾼くなった結果、さばけるリクエスト量が少なくなりがち • キャパシティ不⾜になってレスポンスが返せなくなってしまうと、ブラウ ザ上では真っ⽩な画⾯に…
SSR with Serverless • フロントエンドの⽂脈にも関わらず、SSRではサーバーサイドをケ アする必要が出てくる • 場合によってはフロントエンド開発者がやる必要もある • つまり、サーバーを⽤意していく必要がある
• AWSであればEC2とかコンテナとか使ってSSRするためのサーバーサイド の環境を⽤意する
So, serverless
AWS Lambda is excellent with SSR (I think) • AWS
Lambdaの場合は関数の裏側はコンテナが⽴ち上がる • 1リクエストは同時に1コンテナでしか処理されない • 同時にリクエスト発⽣した場合は⽔平⽅向にスケールしていく • つまりリクエスト数分だけコンテナが起動される • リクエストが集中してCPU負荷が⾼まっても、クライアントにレ スポンスが返せなくなることがない
How 1. Next.js / Nuxt.js使う 2. Next.js / Nuxt.jsで作ったアプリをExpressで動かす 3.
Expressで作ったアプリをLambdaで動かす • aws-serverless-expressを使う • Expressで書かれたアプリをLambdaで実⾏可能にするためのラッパーのよ うなもの 詳細はブログ⾒てください(Nuxt.jsの例) https://www.keisuke69.net/entry/2020/09/18/175941
Wait… • すべてが同じ関数としてデプロイされるのは少し微妙 • 確かにスケールもするし、リクエストごとに独⽴して処理はされるけど Fat • 静的ファイルもすべてLambda経由で実⾏されてしまう • コンピューティングリソースの無駄
• デプロイサイズ肥⼤によるコールドスタートへの影響 • コストの無駄
Thus, • 静的アセットはS3 + CloudFrontで配信する • これをやるにはビルドとかデプロイのタイミングで考慮する必要がある • ビルドしたものを何も考えずにごそっとあげるってのはダメ •
CloudFrontのEdgeで動かすLambda@Edgeというものを使って動 かすこともできる • とはいえ、⾃前で実装するのは結構⼤変 • リクエストの振り分けやルーティングを頑張って実装する必要がある • 静的なものはS3に、そうじゃないものはLambdaでみたいな • 少し⾯倒くさい
Good news for Next.js users!
Serverless Next.js Component • Serverless frameworkのプラグインとしてServerless Next.js Componentが提供されている https://github.com/serverless-nextjs/serverless-next.js •
SSRをLambda@Edgeでやる • Lambda@Edgeで静的ページへのリクエストをハンドルしてS3へとフォ ワード • ルーティングもされる • Dynamoc Routing相当のことも • ⽣成されたファイル/静的なAssetをS3でホスティング • CloudFront経由で配信される
詳細はこちらで
Single Page Application + API Server Side Rendering + API
Static Site Generation + API
SSG with Serverless • 基本的にSSGの配信はSPAと同じ考え⽅でいい • つまりS3とCloudFrontによる配信が基本 • ビルドしたものをS3上にドンと置いて、CDN使いつつ配信 •
SSGでも特にJamstackはビルドやCI/CDプロセスが重要 • コンテンツ/コードの更新タイミングでビルドして出⼒し、静的サイトとし てデプロイする • Amplify Console • Githubなどにプッシュしたらそれを検知して、事前に定義された内容でビ ルドしてデプロイ • Webサイトの構築などは不要 • ビルドの設定ファイルで細かい指定や処理の実施もできる
Key Takeaways • サーバーレスにより、フロントエンド開発者が⼿を出せる領域が 増えた • サーバーサイド/バックエンドも⾃分たちでつくりたい場合 • アーリーステージなため、少ないエンジニアで全部やる必要がある場合 •
API GatewayとLambdaはすでに事例も多く、参考ドキュメントも多い • 他システムとの連携やより複雑なシステムも同じような体験で開 発できる • Lambdaを使った定期処理 • アップロードされた画像や動画の変換処理とか • StepFunctions使えばより複雑なワークロードを実現できる
告知 11/27にServerless Next.js Componentについて話す配信やります。 https://serverless-newworld.connpass.com/event/194966/