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.8k
フロントエンド開発者も知っておきたい 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.1k
波濤 / Surges
keisuke69
1
150
クロスプラットフォーム開発の真実
keisuke69
2
610
脱Firebase. 我々はどう生きるか/Migrate from Firebase
keisuke69
7
8.7k
AWSでISRの実現!その謎を解明すべくAmazonの奥地へと足を踏み入れる!! / Digging how to running ISR on AWS
keisuke69
4
8.7k
様式美と絵に書いた餅、そしてそこにあるリアル
keisuke69
0
5.3k
俺のJestが動かない 2021 Spring / My Jest does not work well 2021 Spring
keisuke69
0
7.3k
Pythonistaに贈るAWS Lambda入門 / AWS Lambda Essentials for Pythonista
keisuke69
2
4.6k
The Twelve-Factor App on AWS
keisuke69
16
5k
Other Decks in Programming
See All in Programming
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
5
2k
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
160
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
4
500
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
190
CSC509 Lecture 09
javiergs
PRO
0
130
Amazon Qを使ってIaCを触ろう!
maruto
0
360
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
4.1k
macOS でできる リアルタイム動画像処理
biacco42
9
2.2k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.4k
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1.1k
Quine, Polyglot, 良いコード
qnighy
4
610
Featured
See All Featured
Music & Morning Musume
bryan
46
6.2k
Facilitating Awesome Meetings
lara
49
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
Bash Introduction
62gerente
608
210k
Being A Developer After 40
akosma
86
590k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Rails Girls Zürich Keynote
gr2m
93
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Why Our Code Smells
bkeepers
PRO
334
57k
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/