【入門】AWS Amplify (× Next.js)~AWS上に静的Webサイトを移行する案件を発見!~

Transcript

1. 【入門】AWS Amplify (× Next.js) ~AWS上に静的Webサイトを移行する案件を発見!~ 2025/11/15 JAWS-UG 栃木 オフライン #5
2. 移行対象のWebサイト self-restraint
3. アーキテクチャ検討
4. ① GitHub × AWS Amplify Hosting
5. ① GitHub × AWS Amplify Hosting
6. GitHubリポジトリを設定
7. 設定が超簡単 ・リポジトリとブランチを選択 ・その他はすべて自動設定/デフォルトでOK
8. デプロイ後のアクセス確認
9. AWS Amplify Hosting の基本仕様 • デフォルトドメインは無効化できない 　　https://{branch-name}.{random-id}.amplifyapp.com 　　デフォルトドメインにアクセスされた時、カスタムドメインへ 301リダイレクト設定が可能 　　Amplify Hosting のデフォルトドメインを無効化する方法を教えてください | DevelopersIO • カスタムドメイン, WAFをサポート • ブランチごとにアプリケーションをデプロイ可能
10. ② S3 × AWS Amplify Hosting
11. ② S3 × AWS Amplify Hosting We recommend that you use AWS Amplify Hosting to host static website content stored on S3. Hosting a static website using Amazon S3 - Amazon Simple Storage Service
12. S3オブジェクト（.zip）を指定 ※アプリケーションを更新する場合、オブジェクトの再アップロードとAmplifyから再デプ ロイが必要（＝自動デプロイされない）
13. ③ CloudFront × S3 ←CI/CDの方を話します
14. デプロイステージ
15. CodeDeploy から S3 へデプロイが不可 →独自構築が必要
16. デプロイプロバイダーにS3を指定 ←CodePipelineで パイプラインを作成
17. Lambdaステージ
18. CloudFrontのキャッシュをクリアする
19. パイプライン完成
20. アーキテクチャ検討結果→①を採用 • GitHubとネイティブに統合されている • マネージドにCI/CD、コンテンツ配信の仕組み利用できる ◦ ブランチ→環境分離 ◦ 自動デプロイ ◦ 裏側ではCloudFrontが利用される ※移行対象Webサイトの要件をヒアリングできていないので暫定です。。。
21. ここで一旦冷静になる
22. 静的WebサイトにNext.jsはオーバーでは？？？
23. Next.js • Vercel社が開発しているReactベースのメタフレームワーク（レンダリングやWebア プリの開発を効率化→Reactの拡張版） • フロントエンドフレームワークはReact、メタフレームワークはNext.jsがそれぞれグ ローバルシェアNo.1 • ReactがCSR（Client-Side Rendering）に特化しているのに対し、Next.jsはSSR （Server-Side Rendering）、SSG（Static Site Generation）、ISR（Incremental Static Regeneration）を標準サポート ※レンダリング：HTMLファイルを生成する一連の過程（DOMツリー構築→CSS読み込 み→JavaScript実行→・・・）。
24. Astro • Next.jsに次ぐシェア率を誇るメタフレームワーク • コンテンツが豊富なWebサイト向けに設計されている（ECサイト、コーポレートサイ ト、ブログなど） • SSGに加え、ビルド後のHTMLファイルにJavaScriptが含まれないため高速に描画 できる • SSRもサポート • 公式ドキュメントの大半が日本語対応＆内容が充実している（Next.jsからの移行ガ イドも用意されている）
25. Claude Codeに作ってもらった self-restraint
26. まとめ • AWSで静的Webサイトをホスティングする方式を検討すると同時に、JSフレーム ワークを選定 • Next.jsを理解するには幅広い知識（レンダリング手法、React）が必要 • レンダリング手法の基礎を学べたことでフロントエンドの理解がまた少し進んだ • 皆さんのノウハウをX等で少しだけ共有いただけたら幸いです ◦ 推しJSフレームワーク ◦ JSフレームワークの選定基準 ◦ JSフレームワークの学習パス • Webサイトの要件/拡張性と各JSフレームワークの特性を踏まえて開発していきた い（冬休みの宿題）
27. 参考 • 「State of JavaScript 2024」公開。フロントエンドライブラリ利用率1位はReact、メ タフレームワークはNext.jsなど、1万4000人のエンジニアが回答 － Publickey • ReactとNext.jsの違いとは？選び方と使い分け完全ガイド | テクフリ • Web エンジニアなら知っておきたいブラウザレンダリングの流れ - Fenrir Engineers • Webエンジニアなら知っておきたいレンダリング方式4選 - Fenrir Engineers • Astroを選ぶ理由 | Docs
28. さいごに • Zenn capybaraさんの記事一覧 | Zenn • X capybara (@kubo_gene) / X
29. fin.