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
7.9k
フロントエンド開発者も知っておきたい 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.2k
波濤 / Surges
keisuke69
1
170
クロスプラットフォーム開発の真実
keisuke69
2
650
脱Firebase. 我々はどう生きるか/Migrate from Firebase
keisuke69
7
8.9k
AWSでISRの実現!その謎を解明すべくAmazonの奥地へと足を踏み入れる!! / Digging how to running ISR on AWS
keisuke69
4
9k
様式美と絵に書いた餅、そしてそこにあるリアル
keisuke69
0
5.4k
俺のJestが動かない 2021 Spring / My Jest does not work well 2021 Spring
keisuke69
0
7.4k
Pythonistaに贈るAWS Lambda入門 / AWS Lambda Essentials for Pythonista
keisuke69
2
4.7k
The Twelve-Factor App on AWS
keisuke69
17
5.2k
Other Decks in Programming
See All in Programming
バッチを作らなきゃとなったときに考えること
irof
1
420
GoとPHPのインターフェイスの違い
shimabox
2
200
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
510
DROBEの生成AI活用事例 with AWS
ippey
0
140
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
850
CI改善もDatadogとともに
taumu
0
170
Conform を推す - Advocating for Conform
mizoguchicoji
3
700
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
Unity Android XR入門
sakutama_11
0
170
color-scheme: light dark; を完全に理解する
uhyo
6
460
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
170
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
6
1.9k
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Become a Pro
speakerdeck
PRO
26
5.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
500
GitHub's CSS Performance
jonrohan
1030
460k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Building an army of robots
kneath
303
45k
GraphQLとの向き合い方2022年版
quramy
44
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Music & Morning Musume
bryan
46
6.4k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Speed Design
sergeychernyshev
27
800
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
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/