Slide 1
Slide 1 text
フロントエンド開発者も知っておきたい
AWS Lambda とサーバーレス
@Keisuke69
Front-End Study #1
Slide 2
Slide 2 text
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.
⚡
Slide 3
Slide 3 text
Why are you here?
First of all, what is serverless?
Slide 4
Slide 4 text
Serverless
• サーバーサイドの⽂脈で語られることが多い
• 基本的にはバックエンド
• フロントエンド開発者は普段は直接的には関わらないことが多
い？
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Serverless
• サーバーが実際に存在しないわけではなく、意識する必要がない
• APIを開発する上でそれらを動かすためのサーバーとかの準備
• セキュリティとかネットワークもサービス側がケア
• 何が嬉しいか
Slide 7
Slide 7 text
No need to setup servers anymore
Slide 8
Slide 8 text
Frontend developers perspective…
Slide 9
Slide 9 text
Single Page Application + API
Server Side Rendering + API
Static Site Generation + API
Slide 10
Slide 10 text
Single Page Application + API
Server Side Rendering + API
Static Site Generation + API
Slide 11
Slide 11 text
APIs are always there.
Slide 12
Slide 12 text
REST or GraphQL
Slide 13
Slide 13 text
REST APIs with Serverless
• Amazon API Gateway
• HTTP(S)のエンドポイント
• ロードバランサーやWebサーバ不要、もちろんネットワーク周りも
• カスタムドメインOK
• AWS Lambda
• 関数
• ランタイムのセットアップ不要
• Node.js使える
• 多くのAWSサービスと連携できる
• Datastoreは⽬的に応じて使い分け
Slide 14
Slide 14 text
GraphQL with Serverless
• AWS AppSync
• GraphQLのエンドポイントを公開
• もちろんサーバーのセットアップとか不要
• 柔軟にデータソース選べる
• AWS Amplify
• フロントエンド開発者向けツールセット
• AWSの各サービスをフロントエンド開発者がそこそこ簡単に使いやすくす
るもの
• AppSync使う場合におすすめ
Slide 15
Slide 15 text
Single Page Application + API
Server Side Rendering + API
Static Site Generation + API
Slide 16
Slide 16 text
SPA with Serverless
• Amazon S3とAmazon CloudFrontを使ってホスティング
• S3はストレージサービスだが、単体で静的サイトの配信ができる
• もちろん、カスタムドメイン使えるし、スケールもする
• さらにCDNであるCloudFrontを使うことでキャッシュもできる
• Amplify CLIだけでも簡単にセットアップして配信できる
Slide 17
Slide 17 text
Single Page Application + API
Server Side Rendering + API
Static Site Generation + API
Slide 18
Slide 18 text
SSR with Serverless
• SSRの場合、サーバーサイドでレンダリングするのでそのための
サーバが必要になる
• 最近だとよくあるのはNode.jsを⼊れたサーバをコンテナで⽤意するパ
ターン
• Dockerfile…
• コンテナを実⾏するための基盤も必要
• サーバーサイドレンダリングのインフラ的な課題
• CPU負荷が⾼くなりがち
• CPU負荷⾼くなった結果、さばけるリクエスト量が少なくなりがち
• キャパシティ不⾜になってレスポンスが返せなくなってしまうと、ブラウ
ザ上では真っ⽩な画⾯に…
Slide 19
Slide 19 text
SSR with Serverless
• フロントエンドの⽂脈にも関わらず、SSRではサーバーサイドをケ
アする必要が出てくる
• 場合によってはフロントエンド開発者がやる必要もある
• つまり、サーバーを⽤意していく必要がある
• AWSであればEC2とかコンテナとか使ってSSRするためのサーバーサイド
の環境を⽤意する
Slide 20
Slide 20 text
So, serverless
Slide 21
Slide 21 text
AWS Lambda is excellent with SSR (I think)
• AWS Lambdaの場合は関数の裏側はコンテナが⽴ち上がる
• 1リクエストは同時に1コンテナでしか処理されない
• 同時にリクエスト発⽣した場合は⽔平⽅向にスケールしていく
• つまりリクエスト数分だけコンテナが起動される
• リクエストが集中してCPU負荷が⾼まっても、クライアントにレ
スポンスが返せなくなることがない
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
Wait…
• すべてが同じ関数としてデプロイされるのは少し微妙
• 確かにスケールもするし、リクエストごとに独⽴して処理はされるけど
Fat
• 静的ファイルもすべてLambda経由で実⾏されてしまう
• コンピューティングリソースの無駄
• デプロイサイズ肥⼤によるコールドスタートへの影響
• コストの無駄
Slide 24
Slide 24 text
Thus,
• 静的アセットはS3 + CloudFrontで配信する
• これをやるにはビルドとかデプロイのタイミングで考慮する必要がある
• ビルドしたものを何も考えずにごそっとあげるってのはダメ
• CloudFrontのEdgeで動かすLambda@Edgeというものを使って動
かすこともできる
• とはいえ、⾃前で実装するのは結構⼤変
• リクエストの振り分けやルーティングを頑張って実装する必要がある
• 静的なものはS3に、そうじゃないものはLambdaでみたいな
• 少し⾯倒くさい
Slide 25
Slide 25 text
Good news for Next.js users!
Slide 26
Slide 26 text
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経由で配信される
Slide 27
Slide 27 text
詳細はこちらで
Slide 28
Slide 28 text
Single Page Application + API
Server Side Rendering + API
Static Site Generation + API
Slide 29
Slide 29 text
SSG with Serverless
• 基本的にSSGの配信はSPAと同じ考え⽅でいい
• つまりS3とCloudFrontによる配信が基本
• ビルドしたものをS3上にドンと置いて、CDN使いつつ配信
• SSGでも特にJamstackはビルドやCI/CDプロセスが重要
• コンテンツ/コードの更新タイミングでビルドして出⼒し、静的サイトとし
てデプロイする
• Amplify Console
• Githubなどにプッシュしたらそれを検知して、事前に定義された内容でビ
ルドしてデプロイ
• Webサイトの構築などは不要
• ビルドの設定ファイルで細かい指定や処理の実施もできる
Slide 30
Slide 30 text
Key Takeaways
• サーバーレスにより、フロントエンド開発者が⼿を出せる領域が
増えた
• サーバーサイド/バックエンドも⾃分たちでつくりたい場合
• アーリーステージなため、少ないエンジニアで全部やる必要がある場合
• API GatewayとLambdaはすでに事例も多く、参考ドキュメントも多い
• 他システムとの連携やより複雑なシステムも同じような体験で開
発できる
• Lambdaを使った定期処理
• アップロードされた画像や動画の変換処理とか
• StepFunctions使えばより複雑なワークロードを実現できる
Slide 31
Slide 31 text
告知
11/27にServerless Next.js Componentについて話す配信やります。
https://serverless-newworld.connpass.com/event/194966/