2025年8月31日

Next.jsをAWSで稼働させる最適な構成の提案

現在のプロジェクト状況を確認した結果、以下の構成を提案いたします:

現在の設定分析

  • Next.js 15.3.1使用
  • **output: 'export'**でSSG(静的サイト生成)モード
  • React Server Components使用
  • TypeScriptベース
  • Dockerfileも準備済み

推奨構成パターン

1. 【最推奨】AWS Amplify Hosting + S3/CloudFront

適用ケース: 現在のSSG設定を活かしたい場合

メリット:

  • Next.js 15まで完全サポート
  • GitベースのCI/CD自動化
  • グローバルCDN(CloudFront)内蔵
  • カスタムドメイン簡単設定
  • HTTPS自動対応
  • プレビュー環境自動生成

設定方法:

# amplify.yml(プロジェクトルートに作成)
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist # next.config.mjsのdistDirと一致
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

2. S3 + CloudFront(手動構成)

適用ケース: より細かい制御が必要な場合

構成:

  • S3バケット(静的ホスティング有効)
  • CloudFront Distribution
  • Route 53(カスタムドメイン)
  • Certificate Manager(SSL証明書)

3. ECS Fargate + ALB(SSRモード)

適用ケース: サーバーサイド機能が必要な場合

設定変更が必要:

// next.config.mjs
const nextConfig = {
  output: 'standalone', // exportから変更
  // distDir: 'dist', // コメントアウト
  // trailingSlash: true, // コメントアウト
  // images: { unoptimized: true }, // コメントアウト
}

構成:

  • ECS Cluster(Fargate)
  • Application Load Balancer
  • ECR(Dockerイメージ保存)
  • RDS(データベースが必要な場合)

4. Lambda + API Gateway(サーバーレス)

適用ケース: イベント駆動型の機能が必要な場合

具体的な移行手順(Amplify推奨)

  1. 現在の設定確認
# 現在のビルドが正常に動作することを確認
npm run build
  1. Amplify設定ファイル作成
# amplify.yml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  1. Amplifyコンソールでの設定
  • GitHubリポジトリ接続
  • ビルド設定適用
  • カスタムドメイン設定(必要に応じて)

コスト比較

構成月間コスト目安スケーラビリティ管理負荷
Amplify Hosting$1-10自動
S3 + CloudFront$1-5自動
ECS Fargate$10-50手動
Lambda$0.1-10自動低-中

推奨アクション

現在のSSG設定を活かしてAWS Amplify Hostingから始めることをお勧めします。理由:

  1. 現在の設定と相性が良い - output: 'export'がそのまま使える
  2. 運用負荷が最小 - Gitプッシュだけでデプロイ完了
  3. Next.js 15完全サポート - 最新機能が使える
  4. コスト効率 - 小規模〜中規模なら月数ドル

もしサーバーサイド機能が必要になった場合は、後からECS FargateやLambdaに移行することも可能です。

どの構成について詳しく知りたいか、または実際の移行作業を始めたいかお聞かせください。