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

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

Avatar for takumi takumi
October 23, 2025
Programming
0
82

 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
76

Other Decks in Programming

See All in Programming
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
Avatar for Chris Richardson cer
PRO
0
270
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
Avatar for Tomohisa Takaoka tomohisa
5
18k
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
connect-python: convenient protobuf RPC for Python
Avatar for Anuraag Agrawal anuraaga
0
360
関数の挙動書き換える
Avatar for takato fukui takatofukui
4
770
俺流レスポンシブコーディング 2025
Avatar for TAK tak_dcxi
13
7.9k
Navigation 3: 적응형 UI를 위한 앱 탐색
Avatar for Sungyong An fornewid
1
150
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
5
1.4k
Integrating WordPress and Symfony
Avatar for Alexandre Salomé alexandresalome
0
120
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
Avatar for SatoAoaka satoaoaka
0
220
DSPy Meetup Tokyo #1 - はじめてのDSPy
Avatar for Masahiro Nishimi masahiro_nishimi
1
150
目的で駆動する、AI時代のアーキテクチャ設計 / purpose-driven-architecture
Avatar for MinoDriven minodriven
11
3.9k

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.3k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.3k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k

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