CloudFrontとS3で静的ホスティング構成をつくってみた

2025年6月9日

はじめに

Next.jsで構築したアプリケーションをAWSで静的ホスティングしてみました。

1. Next.js アプリのビルド（静的出力）

静的ホスティングのみをお求めの場合は読み飛ばしてください。

const nextConfig: NextConfig = {
  /* config options here */
  output: "export",
  devIndicators: false,
  reactStrictMode: false,
  trailingSlash: true,
};

ビルドします。

npm run build


出力先：out/ ディレクトリ

静的ファイルが生成され、S3 にアップロード可能な状態になります。


2. S3 バケットの準備

  1. S3 バケットを作成します。以下は参考例です。
    • バケット名例：my-nextjs-static-site
    • パブリックアクセス：すべてブロック解除
    • 静的ウェブホスティング：有効化（CloudFront利用の時は不要、開発時にリアルタイムで確認するのには便利）
      • インデックスドキュメント：index.html
      • エラードキュメント：404.html（任意）
  1. S3 バケットポリシーを追加（公開アクセス許可）
{
 "Version": "2012-10-17",
   "Statement": [
     {
       "Sid": "PublicRead",
       "Effect": "Allow",
       "Principal": "*",
       "Action": "s3:GetObject",
       "Resource": "arn:aws:s3:::my-nextjs-static-site/*"
     }
   ]
}

3. out/ 内のファイルを S3 にアップロード

1で生成したファイルをS3バケットにアップロードします。

4. CloudFront ディストリビューションの設定

  1. CloudFront の作成
    • オリジンタイプ：S3 バケット my-nextjs-static-site
    • ビヘイビア設定：
      • Viewer Protocol Policy: Redirect HTTP to HTTPS
      • キャッシュポリシー：CachingOptimized
    • エラーページ：
      • 404 → /404.html などへルーティング設定（必要に応じて）
  2. デフォルトルート設定
    • Index document: index.html
  3. CloudFront ディストリビューションのドメイン名確認
    • 例: https://d123abc456xyz.cloudfront.net/

5. 確認と運用

CloudFront URL にアクセスして動作確認

補足（オプション）

CLIでCloudFront キャッシュクリアを無効化しておきます。

aws cloudfront create - invalidation--distribution - id XXXXXXXXXX--paths "/*"