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
160
クロスプラットフォーム開発の真実
keisuke69
2
620
脱Firebase. 我々はどう生きるか/Migrate from Firebase
keisuke69
7
8.9k
AWSでISRの実現!その謎を解明すべくAmazonの奥地へと足を踏み入れる!! / Digging how to running ISR on AWS
keisuke69
4
8.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
16
5.1k
Other Decks in Programming
See All in Programming
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
910
103 Early Hints
sugi_0000
1
330
PSR-15 はあなたのための ものではない? - phpcon2024
myamagishi
0
370
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
730
Go の GC の不得意な部分を克服したい
taiyow
3
1k
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
110
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
1.1k
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
370
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
130
テストコード書いてみませんか?
onopon
2
300
Beyond ORM
77web
11
1.5k
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
6
680
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Statistics for Hackers
jakevdp
797
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
490
Typedesign – Prime Four
hannesfritz
40
2.5k
Building Your Own Lightsaber
phodgson
104
6.2k
Adopting Sorbet at Scale
ufuk
74
9.1k
Site-Speed That Sticks
csswizardry
2
230
Code Reviewing Like a Champion
maltzj
521
39k
Making the Leap to Tech Lead
cromwellryan
133
9k
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/