Lambda Web Adapter使ってNext.jsのアプリをホストしてみた！ / Tried hosting Next.js app with Lambda Web Adapter

React OSAKA 08で話す内容です。
https://react-osaka.connpass.com/event/359994/

Transcript

1. Lambda Web Adapter使って Next.jsのアプリをホストしてみた！ Tried hosting Next.js app with Lambda Web Adapter © Nabe-cyan(t-pot.me)
2. 概要 Summary • Lambda Web Adapter(LWA)を使ってNext.jsのアプリをホストできると聞い たので試してみた • 試したうえでどういったユースケースがあるか考えてみた • 私はAWSの専門家ではないし、Next.jsの専門家でもないので、アドバイス や指摘はwelcomeです！ • I knew that we can host Next.js apps with Lambda Web Adapter(LWA), so I tried • After trying it, I thought about what kind of use cases there might be • I am not an expert in AWS or Next.js, so any advice or suggestions are very welcome!
3. AWS Lambda を使ったことがある /大体知っている 方✋ Anyone who have used AWS Lambda / have general understanding about it? ✋
4. Lambda Web Adapterを使ったことのある方 ✋ Anyone who have used Lambda Web Adapter?✋
5. LWAとは (1/2)/ What is LWA(1/2) • HTTPベースのアプリケーションを、AWS Lambda 上で簡単に動作させるためのアダプ ター • Next.js以外にもExpressのようなサーバーもホストできる • SSR Streamingをサポートしている（詳細は省略） • 個人的には「Lambda Web Adapterについて自分なりに理解してみた」が分かりやす かった • An adapter for running HTTP-based applications on AWS Lambda easily • it is possible to host not only Next.js but also severs like Express • For me, 「Lambda Web Adapterについて自分なりに理解してみた」(Japanese Only) is easy to understand • It supports SSR-streaming (Omitted details)
6. LWAとは (2/2)/ What is LWA(2/2) • Lambdaに飛んでくる Event形式のデータを HTTPリクエスト形式に 変換 • It converts Event-formatted data sent to Lambda into HTTP request format image is from: https://github.com/awslabs/aws-lambda-web-adapter
7. 今回試した例 / Example I tried this time • 「Next.jsをLambda Web Adapterでサーバレスに動かしてみた[AWS SAM]」を もとにハンズオン形式で試してみた • Lambdaを使ったことがあるとすんなり試せると思う • Tried this in a hands-on format based on “Next.jsをLambda Web Adapterで サーバレスに動かしてみた[AWS SAM]” (JP only) • If you have used Lambda, it should be easy
8. 大まかな手順 / Rough procedure 1. Next.jsアプリを用意 / Prepare Next.js app 2. アプリを動かすためのDockerfileを用意 / Prepare Dockerfile 3. Deploy 今回、すごく簡単なものを用意してみたのでデプロイしてみます This time, I've prepared very simple one, so let's deploy it.
9. 一般的なLambdaの制限と注意点 / General limitations and caution of Lambda • デプロイパッケージのサイズに250MBのクオータ制限 • タイムアウトは最長15分（関数URL） • コールドスタートによってTime to First Byte (TTFB)が長くなりそう • 250 MB quota limit on deployment package size • Maximum timeout is 15 minutes (function URL) • Cold start may increase Time to First Byte (TTFB)
10. ユースケースと気になっていること / Use cases and concerns • Useful when you want to manage your entire app on AWS alone ◦ If you are familiar with AWS, development efficiency is likely to increase ◦ Existing container apps deployed on other services can be deployed almost as-is • When you want to reduce the cost of (SSR) apps with low traffic • Can Vite-based SSR apps be run using the same procedure? • If you know other use cases, plz let me know! FYI; SSR: Server Side Rendering