フロントエンドなら Next.js だろう、ということで学習開始！
アウトプットのため、ブログを作成しました。構成は次の通りです。
1. 技術スタック
- Next.js: バージョン15（App Router構成）
- TailwindCSS
- Amazon S3: 静的サイトホスティング
- Amazon CloudFront: S3オリジンに対するCDN。ACM証明書による独自ドメインTLS終端、Default Root Object設定。
- Amazon Route 53: 独自ドメインのDNS管理。
- AWS Certificate Manager (ACM): CloudFrontで使用するSSL/TLS証明書の管理。
- Github Actions: main ブランチへのプッシュをトリガーにビルド、S3へのデプロイ、CloudFrontのキャッシュ無効化を実行。
2. コード／ディレクトリ構成のポイント
| ルート直下 | 役割 |
|---|---|
src/ |
アプリ本体（App Router 構成）。components/, lib/, app/ などが入る。 |
content/posts/ |
Markdown／MDX 記事を格納。静的書き出しのソースになる。 |
public/ |
画像・favicon など静的アセット。 |
next.config.ts |
output: "export" で 静的書き出し を明示。images.unoptimized=true で Image Optimization API を無効化し、S3 配信に適合させている |
tailwind.config.js |
content に src/**/* を指定、@tailwindcss/line-clamp プラグイン追加 |
.github/workflows/deploy.yml |
main ブランチ push 時にビルド→S3 へ同期→CloudFrontの古いキャッシュ無効化を行う |
App Router 構成
app/直下にルートページ、レイアウトなど。src/components/に Header, Footer, Nav, GtmScript ほか再利用部品。"use client"指定でクライアント側レンダリングを制御。
3. CI/CD（GitHub Actions）
| ステップ | 説明 |
|---|---|
| Checkout / Setup Node | actions/checkout, actions/setup-node@v3 で Node 22 を取得 |
| 依存解決 | npm ci で lockfile 通りにインストール |
| 環境変数注入 | Secrets ⇒ .env.production に書き出し |
npm run build |
next build が out/ フォルダに静的 HTML/CSS/JS を生成 |
| S3 へ同期 | jakejarvis/s3-sync-action@v0.5.1 で ./out → S3 バケットへ同期 |
| CloudFront 無効化 | AWS CLI cloudfront create-invalidation --paths "/*" を実行し、全キャッシュを即時更新 |
静的書き出し (output: "export") のメリット
- Lambda/Node サーバ不要で S3 + CloudFront のみで配信可能 (nextjs.org)
- HTML を事前生成するため表示が高速・コスト最小
4. AWS ホスティング構成
| サービス | 設定ポイント |
|---|---|
| S3 (静的サイトバケット) | 設定済みのS3バケット。public-read オブジェクト & 静的 Web ホスティング有効 |
| CloudFront | ・オリジン：上述 S3 バケット ・ACM 証明書で独自ドメイン TLS 終端 ・Default Root Object = index.html・GitHub Actions から無効化 API 呼び出しで即時キャッシュ更新 |
| Route 53 | 独自ドメイン untilcoffeecools を CloudFront に向ける |
5. 全体構成図
まとめ
勢いは大事。