Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
フロントエンド開発者も知っておきたいAWS Lambda とサーバーレス / Serverless for frontend developers
Keisuke69
November 09, 2020
Programming
6
6.2k
フロントエンド開発者も知っておきたい 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
AWSでISRの実現!その謎を解明すべくAmazonの奥地へと足を踏み入れる!! / Digging how to running ISR on AWS
keisuke69
3
3.2k
様式美と絵に書いた餅、そしてそこにあるリアル
keisuke69
0
4.2k
俺のJestが動かない 2021 Spring / My Jest does not work well 2021 Spring
keisuke69
0
5.7k
Pythonistaに贈るAWS Lambda入門 / AWS Lambda Essentials for Pythonista
keisuke69
2
3.5k
The Twelve-Factor App on AWS
keisuke69
14
4.1k
冬キャンプを超絶おすすめする10の理由/Ten reasons for winter camping
keisuke69
0
1.7k
Introduction to Serverless Application Lens
keisuke69
2
2.1k
とりあえずサーバーレス/Do Serverless First
keisuke69
3
8.9k
Everything will be Serverless
keisuke69
0
320
Other Decks in Programming
See All in Programming
即、New Relic / New Relic NOW!
uzulla
0
330
GitHub Actions を導入した経緯
tamago3keran
1
430
engineer
spacemarket
0
1k
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
conigashima
0
180
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
hpgrahsl
0
110
無限スクロールビューライブラリ 二つの設計思想比較
harumak
0
240
Meet Swift Regex
usamik26
0
350
Gitlab CIでMRを自動生成する
forcia_dev_pr
0
110
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
190
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ?
cokaholic
0
120
IE Graduation Certificate
jxck
6
4.8k
Node-RED 3.0 新機能紹介
utaani
0
140
Featured
See All Featured
Docker and Python
trallard
27
1.6k
What's in a price? How to price your products and services
michaelherold
229
9.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
A Modern Web Designer's Workflow
chriscoyier
689
180k
How to train your dragon (web standard)
notwaldorf
58
3.9k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Clear Off the Table
cherdarchuk
79
280k
Why Our Code Smells
bkeepers
PRO
324
55k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Typedesign – Prime Four
hannesfritz
34
1.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
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/