Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for takumi takumi
October 23, 2025
Programming
0
130

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

Avatar for takumi

takumi

October 23, 2025
Tweet

More Decks by takumi

See All by takumi
弊社のAWS事情、大公開！
Avatar for takumi taku271
1
410
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
210
自社UIコンポーネントにMCPサーバーを作った話
Avatar for takumi taku271
1
100

Other Decks in Programming

See All in Programming
Takumiから考えるSecurity_Maturity_Model.pdf
Avatar for gessy0129 gessy0129
1
140
AIに任せる範囲を安全に広げるためにやっていること
Avatar for Masashi Fukuzawa fukucheee
0
130
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
Avatar for Mitsui maroon8021
3
970
生成 AI 時代のスナップショットテストってやつを見せてあげますよ（α版）
Avatar for ojun ojun9
0
190
ふつうの Rubyist、ちいさなデバイス、大きな一年
Avatar for bash0C7 bash0c7
0
960
RubyとGoでゼロから作る証券システム： 高信頼性が求められるシステムのコードの外側にある設計と運用のリアル
Avatar for free_world21 free_world21
0
290
encoding/json/v2のUnmarshalはこう変わった：内部実装で見る設計改善
Avatar for Hiroki Kurasawa kurakura0916
0
420
Understanding Apache Lucene - More than just full-text search
Avatar for Alexander Reelsen spinscale
0
120
AIとペアプロして処理時間を97%削減した話 #pyconshizu
Avatar for Kashun Yoshida kashewnuts
1
240
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1.1k
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
4
1.3k
CSC307 Lecture 14
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
470

Featured

See All Featured
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
350
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
140
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
830
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
830
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
75
5.1k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.6k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.1k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
83
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
640
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
150
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
150

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