Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

Avatar for takumi takumi
October 23, 2025
Programming
0
95

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

Avatar for takumi

takumi

October 23, 2025
Tweet

More Decks by takumi

See All by takumi
自社UIコンポーネントにMCPサーバーを作った話
Avatar for takumi taku271
1
79

Other Decks in Programming

See All in Programming
TestingOsaka6_Ozono
Avatar for O3(ozono) o3
0
180
生成AIを利用するだけでなく、投資できる組織へ
Avatar for pospome pospome
2
410
新卒エンジニアのプルリクエスト with AI駆動
Avatar for Yuta Fukunaga fukunaga2025
0
230
Graviton と Nitro と私
Avatar for maroon1st maroon1st
0
140
これならできる！個人開発のすゝめ
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
130
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
300
AIエージェントの設計で注意するべきポイント6選
Avatar for Har1101 har1101
5
2.4k
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
380
DevFest Android in Korea 2025 - 개발자 커뮤니티를 통해 얻는 가치
Avatar for Suhyeon Kim wisemuji
0
170
Go コードベースの構成と AI コンテキスト定義
Avatar for ANDPAD inc andpad
0
140
クラウドに依存しないS3を使った開発術
Avatar for しめさば simesaba80
0
170
著者と進める！『AIと個人開発したくなったらまずCursorで要件定義だ！』
Avatar for yasuna yasunacoffee
0
160

Featured

See All Featured
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
73
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
570
Abbi's Birthday
Avatar for Violet Bock coloredviolet
0
3.8k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
170
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
74
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
110
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
0
190

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