$30 off During Our Annual Pro Sale. View Details »

フロントエンド開発者も知っておきたい AWS Lambda とサーバーレス / Serverless for frontend developers

Keisuke69
November 09, 2020

フロントエンド開発者も知っておきたい AWS Lambda とサーバーレス / Serverless for frontend developers

Front-End Study #1「Cloud Native時代のフロントエンド」での登壇資料です。

Keisuke69

November 09, 2020
Tweet

More Decks by Keisuke69

Other Decks in Programming

Transcript

  1. フロントエンド開発者も知っておきたい
    AWS Lambda とサーバーレス
    @Keisuke69
    Front-End Study #1

    View Slide

  2. 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.

    View Slide

  3. Why are you here?
    First of all, what is serverless?

    View Slide

  4. Serverless
    • サーバーサイドの⽂脈で語られることが多い
    • 基本的にはバックエンド
    • フロントエンド開発者は普段は直接的には関わらないことが多
    い?

    View Slide

  5. View Slide

  6. Serverless
    • サーバーが実際に存在しないわけではなく、意識する必要がない
    • APIを開発する上でそれらを動かすためのサーバーとかの準備
    • セキュリティとかネットワークもサービス側がケア
    • 何が嬉しいか

    View Slide

  7. No need to setup servers anymore

    View Slide

  8. Frontend developers perspective…

    View Slide

  9. Single Page Application + API
    Server Side Rendering + API
    Static Site Generation + API

    View Slide

  10. Single Page Application + API
    Server Side Rendering + API
    Static Site Generation + API

    View Slide

  11. APIs are always there.

    View Slide

  12. REST or GraphQL

    View Slide

  13. REST APIs with Serverless
    • Amazon API Gateway
    • HTTP(S)のエンドポイント
    • ロードバランサーやWebサーバ不要、もちろんネットワーク周りも
    • カスタムドメインOK
    • AWS Lambda
    • 関数
    • ランタイムのセットアップ不要
    • Node.js使える
    • 多くのAWSサービスと連携できる
    • Datastoreは⽬的に応じて使い分け

    View Slide

  14. GraphQL with Serverless
    • AWS AppSync
    • GraphQLのエンドポイントを公開
    • もちろんサーバーのセットアップとか不要
    • 柔軟にデータソース選べる
    • AWS Amplify
    • フロントエンド開発者向けツールセット
    • AWSの各サービスをフロントエンド開発者がそこそこ簡単に使いやすくす
    るもの
    • AppSync使う場合におすすめ

    View Slide

  15. Single Page Application + API
    Server Side Rendering + API
    Static Site Generation + API

    View Slide

  16. SPA with Serverless
    • Amazon S3とAmazon CloudFrontを使ってホスティング
    • S3はストレージサービスだが、単体で静的サイトの配信ができる
    • もちろん、カスタムドメイン使えるし、スケールもする
    • さらにCDNであるCloudFrontを使うことでキャッシュもできる
    • Amplify CLIだけでも簡単にセットアップして配信できる

    View Slide

  17. Single Page Application + API
    Server Side Rendering + API
    Static Site Generation + API

    View Slide

  18. SSR with Serverless
    • SSRの場合、サーバーサイドでレンダリングするのでそのための
    サーバが必要になる
    • 最近だとよくあるのはNode.jsを⼊れたサーバをコンテナで⽤意するパ
    ターン
    • Dockerfile…
    • コンテナを実⾏するための基盤も必要
    • サーバーサイドレンダリングのインフラ的な課題
    • CPU負荷が⾼くなりがち
    • CPU負荷⾼くなった結果、さばけるリクエスト量が少なくなりがち
    • キャパシティ不⾜になってレスポンスが返せなくなってしまうと、ブラウ
    ザ上では真っ⽩な画⾯に…

    View Slide

  19. SSR with Serverless
    • フロントエンドの⽂脈にも関わらず、SSRではサーバーサイドをケ
    アする必要が出てくる
    • 場合によってはフロントエンド開発者がやる必要もある
    • つまり、サーバーを⽤意していく必要がある
    • AWSであればEC2とかコンテナとか使ってSSRするためのサーバーサイド
    の環境を⽤意する

    View Slide

  20. So, serverless

    View Slide

  21. AWS Lambda is excellent with SSR (I think)
    • AWS Lambdaの場合は関数の裏側はコンテナが⽴ち上がる
    • 1リクエストは同時に1コンテナでしか処理されない
    • 同時にリクエスト発⽣した場合は⽔平⽅向にスケールしていく
    • つまりリクエスト数分だけコンテナが起動される
    • リクエストが集中してCPU負荷が⾼まっても、クライアントにレ
    スポンスが返せなくなることがない

    View Slide

  22. 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

    View Slide

  23. Wait…
    • すべてが同じ関数としてデプロイされるのは少し微妙
    • 確かにスケールもするし、リクエストごとに独⽴して処理はされるけど
    Fat
    • 静的ファイルもすべてLambda経由で実⾏されてしまう
    • コンピューティングリソースの無駄
    • デプロイサイズ肥⼤によるコールドスタートへの影響
    • コストの無駄

    View Slide

  24. Thus,
    • 静的アセットはS3 + CloudFrontで配信する
    • これをやるにはビルドとかデプロイのタイミングで考慮する必要がある
    • ビルドしたものを何も考えずにごそっとあげるってのはダメ
    • CloudFrontのEdgeで動かすLambda@Edgeというものを使って動
    かすこともできる
    • とはいえ、⾃前で実装するのは結構⼤変
    • リクエストの振り分けやルーティングを頑張って実装する必要がある
    • 静的なものはS3に、そうじゃないものはLambdaでみたいな
    • 少し⾯倒くさい

    View Slide

  25. Good news for Next.js users!

    View Slide

  26. 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経由で配信される

    View Slide

  27. 詳細はこちらで

    View Slide

  28. Single Page Application + API
    Server Side Rendering + API
    Static Site Generation + API

    View Slide

  29. SSG with Serverless
    • 基本的にSSGの配信はSPAと同じ考え⽅でいい
    • つまりS3とCloudFrontによる配信が基本
    • ビルドしたものをS3上にドンと置いて、CDN使いつつ配信
    • SSGでも特にJamstackはビルドやCI/CDプロセスが重要
    • コンテンツ/コードの更新タイミングでビルドして出⼒し、静的サイトとし
    てデプロイする
    • Amplify Console
    • Githubなどにプッシュしたらそれを検知して、事前に定義された内容でビ
    ルドしてデプロイ
    • Webサイトの構築などは不要
    • ビルドの設定ファイルで細かい指定や処理の実施もできる

    View Slide

  30. Key Takeaways
    • サーバーレスにより、フロントエンド開発者が⼿を出せる領域が
    増えた
    • サーバーサイド/バックエンドも⾃分たちでつくりたい場合
    • アーリーステージなため、少ないエンジニアで全部やる必要がある場合
    • API GatewayとLambdaはすでに事例も多く、参考ドキュメントも多い
    • 他システムとの連携やより複雑なシステムも同じような体験で開
    発できる
    • Lambdaを使った定期処理
    • アップロードされた画像や動画の変換処理とか
    • StepFunctions使えばより複雑なワークロードを実現できる

    View Slide

  31. 告知
    11/27にServerless Next.js Componentについて話す配信やります。
    https://serverless-newworld.connpass.com/event/194966/

    View Slide