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

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

Avatar for takumi takumi
October 23, 2025
Programming
180
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
110
AIエージェントで業務改善してみた
Avatar for takumi taku271
0
620
弊社のAWS事情、大公開！
Avatar for takumi taku271
1
630
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
260
自社UIコンポーネントにMCPサーバーを作った話
Avatar for takumi taku271
1
140

Other Decks in Programming

See All in Programming
プロダクトコードからライブラリの境界を見つける
Avatar for elmetal elmetal
PRO
0
100
Turning Architecture into Unit Tests in the AI Era (NSSpain XIV)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
130
JAWS-UG 東京支部が始める、JAWS-UG支部コラボ / JAWS-UG lunchtime LT Collaboration
Avatar for y-ohgi y0hgi
0
180
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
Avatar for Yu Sugawara yusuga
1
580
Ghostty + Neovimで作る 透明でカッコ良い開発環境
Avatar for Kanade Nonomura j341nono
0
150
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
Avatar for curekoshimizu curekoshimizu
1
2.2k
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
9
5.4k
AWSに止められる覚悟してますか？
Avatar for モリゾー morizo_1984
2
510
UPDATE をやめる — EF Core でマスタをバージョン管理する
Avatar for HideyukiKitao panda728
PRO
0
1.1k
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
Avatar for Kobujee_53 oku053
0
120
モジュールの視点からSwiftを読み解く #iosdc
Avatar for Shigure Shimotori s_shimotori
0
340
Java 27新機能 / Java 27 new features
Avatar for Naoki Kishida kishida
2
200

Featured

See All Featured
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
480
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
610
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
430
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.3k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
520
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Visualization
Avatar for Eitan Lees eitanlees
153
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
560

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