Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Next.js(SSR)をLambdaでホストしてみる_jaws_education

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for takumi takumi
October 23, 2025
Programming
170
0

 Next.js(SSR)をLambdaでホストしてみる_jaws_education

Avatar for takumi

takumi

October 23, 2025

More Decks by takumi

See All by takumi
JAWS UG 福井誕生秘話
Avatar for takumi taku271
0
100
AIエージェントで業務改善してみた
Avatar for takumi taku271
0
610
弊社のAWS事情、大公開！
Avatar for takumi taku271
1
580
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
260
自社UIコンポーネントにMCPサーバーを作った話
Avatar for takumi taku271
1
140

Other Decks in Programming

See All in Programming
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
5
3.8k
tsc.rip を支える技術 / Kyoto.なんか #8
Avatar for Susisu susisu
0
4.4k
LLMは4年分のCompose移行を再現できるのか？実プロダクト279件のXMLで探る自動化の境界線
Avatar for makun makun
0
500
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ！ ~
Avatar for po3rin po3rin
1
190
AIとGame Jamで、ゲームを完成させた話
Avatar for hiro takahirosaeki
0
120
【DroidKaigi 2026】「アクセシビリティを利用するとき、 アクセシビリティもまたこちらを利用している」 〜マルウェアによる攻撃と防衛について〜
Avatar for HalunoYo. halunoyo
0
430
AWS DevOps Agentで インシデント対応をAIに任せたい
Avatar for HonMarkHunt honmarkhunt
7
2.7k
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
0
420
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
140
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
130
Laravelのアプリケーションをどこにデプロイするか #ツナギメオフライン.9
Avatar for akase244 akase244
0
120
Hello, Hiroshima Geospatial Data! — Exploring DoboX with Python
Avatar for ぴっかりん ra0kley
0
180

Featured

See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
45k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
380
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
500
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
320
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.4k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k

Transcript

  1. Next.js(SSR)をLambdaで ホストしてみる Education-JAWS #5 山下 拓海 Education-JAWS #5 1

  2. 自己紹介 福井大学４年生！ ユニフォームネクストでインターン中 Lambda，VPC Latticeが好き Vim一年生 2 Education-JAWS #5 ２２歳

    山下　 拓海（やました　 たくみ）

  3. アジェンダ 詳しい実装 メリット・デメリット 問題点 まとめ 3 Education-JAWS #5 Next.js in

    Lambda Next.jsインフラ概要

  4. Next.jsインフラ概要 一般的なNext.jsインフラアーキテクチャ 4 Education-JAWS #5 CloudFrontでCDN配信 S3に静的ファイル EC2やECSが固定料金 インフラ構築が大変 EC2やECSで

    Next.jsサーバーをホスト

  5. 5 Education-JAWS #5 今回採用するインフラアーキテクチャ CloudFrontでCDN配信 S3に静的ファイル Lambdaで Next.jsサーバーをホスト 実行された分だけ課金 サーバーレスで構築が楽

    Next.jsインフラ概要

  6. Next.js In Lambda 6 Education-JAWS #5 Lambdaって 関数実行するやつじゃないの？？

  7. Next.js In Lambda 7 Education-JAWS #5 LambdaでNext.jsをホスト Q：「Lambdaって関数実行するやつじゃないの？？」

  8. Next.js In Lambda 8 Education-JAWS #5 LambdaでNext.jsをホスト A：「 という 　

    　 サーバーのホストが可能になるライブラリが 　 　 あります！」 Lambda Web Adapter A：「イメージとしてデプロイして、Dockerfileに 　 　 １行追加するだけ！！」 Q：「でも設定難しいんじゃないの？？」

  9. アーキテクチャ 9 Education-JAWS #5 全体のアーキテクチャ

  10. 詳しい実装 10 Education-JAWS #5 Next.jsの設定 ビルドした成果物をstandaloneという形式で生成 next.config.tsのoutputを編集

  11. 詳しい実装 Education-JAWS #5 Dockerイメージの作成 ECS等でデプロイするときと同じ！ 11

  12. 詳しい実装 Education-JAWS #5 Lambdaへのデプロイ ECRなどにイメージをアップロード Lambdaへデプロイ！！ ここにアップロードしたECR URIを指定 12

  13. メリット・デメリット Education-JAWS #5 Lambdaのメリット ランニングコストが少なくなった！ インフラ構築がめっちゃ楽！ App Runnerを使用していた時と比べて99%減 （というか100%） Lambdaのコストが0円！（無料枠）

    スケーリングとかパッチとか考えなくて良い DBなどのVPCリソースへのアクセスがあると 面倒... 13

  14. メリット・デメリット Education-JAWS #5 Lambdaのデメリット 同時実行回数が1000（デフォルト） コールドスタート 15分以上の処理ができない 初めてアクセスがある場合、表示まで遅い API Routes使うと超えるかも？

    全く同時タイミングで1000件のリクエストがあ るとエラーになってしまう 14

  15. ビルド結果 問題点 Education-JAWS #5 S3を静的ファイルとして使うとハマる デプロイする流れによってはS3とLambdaのコード が変わり静的ファイルが404 別でビルドしているため、ビルド成果物が同じとは限らない... ビルド結果 ビルド

    Dockerビルド 15

  16. 問題点 Education-JAWS #5 S3を静的ファイルとして使うとハマる じゃあどうするのか 同じビルド成果物をデプロイすれば良い ビルド結果 ビルド Dockerビルド 16

  17. 問題点 Education-JAWS #5 これをCI/CDで実現 CodeBuild CodeDeploy Next.jsビルド S3へ静的ファイルをPut ECRへイメージをPush Lambdaのデプロイ

    17

  18. まとめ Education-JAWS #5 最終的なアーキテクチャ 18

  19. まとめ Education-JAWS #5 メリットデメリットある Next.jsをLambdaで構築できる！ CI/CDも組み込めると最高 小規模、スタートアップは最高だと思う 大規模だと無理かも 19

  20. まとめ Education-JAWS #5 良いLambdaライフを！ 20