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
Next.js(SSR)をLambdaでホストしてみる_jaws_education
Search
takumi
October 23, 2025
Programming
0
77
Next.js(SSR)をLambdaでホストしてみる_jaws_education
takumi
October 23, 2025
Tweet
Share
More Decks by takumi
See All by takumi
自社UIコンポーネントにMCPサーバーを作った話
taku271
1
74
Other Decks in Programming
See All in Programming
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
360
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
Go言語はstack overflowの夢を見るか?
logica0419
0
630
CSC509 Lecture 08
javiergs
PRO
0
260
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
NIKKEI Tech Talk#38
cipepser
0
290
オンデバイスAIとXcode
ryodeveloper
0
230
Introduce Hono CLI
yusukebe
6
3.1k
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
530
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.5k
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Music & Morning Musume
bryan
46
6.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How STYLIGHT went responsive
nonsquared
100
5.9k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
97
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
The Language of Interfaces
destraynor
162
25k
Side Projects
sachag
455
43k
Building an army of robots
kneath
305
46k
Transcript
Next.js(SSR)をLambdaで ホストしてみる Education-JAWS #5 山下 拓海 Education-JAWS #5 1
自己紹介 福井大学4年生! ユニフォームネクストでインターン中 Lambda,VPC Latticeが好き Vim一年生 2 Education-JAWS #5 22歳
山下 拓海(やました たくみ)
アジェンダ 詳しい実装 メリット・デメリット 問題点 まとめ 3 Education-JAWS #5 Next.js in
Lambda Next.jsインフラ概要
Next.jsインフラ概要 一般的なNext.jsインフラアーキテクチャ 4 Education-JAWS #5 CloudFrontでCDN配信 S3に静的ファイル EC2やECSが固定料金 インフラ構築が大変 EC2やECSで
Next.jsサーバーをホスト
5 Education-JAWS #5 今回採用するインフラアーキテクチャ CloudFrontでCDN配信 S3に静的ファイル Lambdaで Next.jsサーバーをホスト 実行された分だけ課金 サーバーレスで構築が楽
Next.jsインフラ概要
Next.js In Lambda 6 Education-JAWS #5 Lambdaって 関数実行するやつじゃないの??
Next.js In Lambda 7 Education-JAWS #5 LambdaでNext.jsをホスト Q:「Lambdaって関数実行するやつじゃないの??」
Next.js In Lambda 8 Education-JAWS #5 LambdaでNext.jsをホスト A:「 という
サーバーのホストが可能になるライブラリが あります!」 Lambda Web Adapter A:「イメージとしてデプロイして、Dockerfileに 1行追加するだけ!!」 Q:「でも設定難しいんじゃないの??」
アーキテクチャ 9 Education-JAWS #5 全体のアーキテクチャ
詳しい実装 10 Education-JAWS #5 Next.jsの設定 ビルドした成果物をstandaloneという形式で生成 next.config.tsのoutputを編集
詳しい実装 Education-JAWS #5 Dockerイメージの作成 ECS等でデプロイするときと同じ! 11
詳しい実装 Education-JAWS #5 Lambdaへのデプロイ ECRなどにイメージをアップロード Lambdaへデプロイ!! ここにアップロードしたECR URIを指定 12
メリット・デメリット Education-JAWS #5 Lambdaのメリット ランニングコストが少なくなった! インフラ構築がめっちゃ楽! App Runnerを使用していた時と比べて99%減 (というか100%) Lambdaのコストが0円!(無料枠)
スケーリングとかパッチとか考えなくて良い DBなどのVPCリソースへのアクセスがあると 面倒... 13
メリット・デメリット Education-JAWS #5 Lambdaのデメリット 同時実行回数が1000(デフォルト) コールドスタート 15分以上の処理ができない 初めてアクセスがある場合、表示まで遅い API Routes使うと超えるかも?
全く同時タイミングで1000件のリクエストがあ るとエラーになってしまう 14
ビルド結果 問題点 Education-JAWS #5 S3を静的ファイルとして使うとハマる デプロイする流れによってはS3とLambdaのコード が変わり静的ファイルが404 別でビルドしているため、ビルド成果物が同じとは限らない... ビルド結果 ビルド
Dockerビルド 15
問題点 Education-JAWS #5 S3を静的ファイルとして使うとハマる じゃあどうするのか 同じビルド成果物をデプロイすれば良い ビルド結果 ビルド Dockerビルド 16
問題点 Education-JAWS #5 これをCI/CDで実現 CodeBuild CodeDeploy Next.jsビルド S3へ静的ファイルをPut ECRへイメージをPush Lambdaのデプロイ
17
まとめ Education-JAWS #5 最終的なアーキテクチャ 18
まとめ Education-JAWS #5 メリットデメリットある Next.jsをLambdaで構築できる! CI/CDも組み込めると最高 小規模、スタートアップは最高だと思う 大規模だと無理かも 19
まとめ Education-JAWS #5 良いLambdaライフを! 20