🚀 React + Vite アプリを AWS S3 + CloudFront にデプロイする手順

React + Viteで開発したアプリをAWS S3にアップロードし、CloudFrontで配信する際の完全な手順をまとめました。

📋 前提条件

• AWS CLIがインストール済みで、認証設定が完了していること
• S3バケットが作成済みで、静的ウェブサイトホスティングが有効化されていること
• CloudFrontディストリビューションが設定済みであること
• プロジェクトルートでコマンドを実行すること

🔧 デプロイ手順

ステップ1: プロジェクトのビルド

まず、既存のビルドファイルを削除してからクリーンビルドを実行します。

# 既存のdistディレクトリを削除
rm -rf dist

# プロジェクトをビルド
npm run build

💡 ポイント ビルドが成功すると、dist/ディレクトリに以下のファイルが生成されます：

• index.html – エントリーポイント
• assets/index-[hash].js – バンドルされたJavaScript
• assets/index-[hash].css – スタイルシート（ある場合）

ステップ2: S3にアップロード

aws s3 syncコマンドでビルド成果物をS3バケットにアップロードします。

# S3バケットに同期（削除オプション付き）
aws s3 sync dist/ s3://your-bucket-name/ --delete

⚠️ 注意 --deleteオプションは、S3バケット内にあってローカルのdist/にないファイルを削除します。 古いハッシュ付きファイル（例: index-vYdxcdeJ.js）を自動削除するために必要です。

💡 実行例

aws s3 sync dist/ s3://pokemon-quiz-app-roki-2025/ --delete

出力例:

delete: s3://pokemon-quiz-app-roki-2025/assets/index-vYdxcdeJ.js
upload: dist/index.html to s3://pokemon-quiz-app-roki-2025/index.html
upload: dist/assets/index-B76Ek2Ib.js to s3://pokemon-quiz-app-roki-2025/assets/index-B76Ek2Ib.js

ステップ3: CloudFrontディストリビューションIDを確認

キャッシュクリアに必要なディストリビューションIDを確認します。

# CloudFrontディストリビューション一覧を取得
aws cloudfront list-distributions \
  --query "DistributionList.Items[].{ID:Id,DomainName:Origins.Items[0].DomainName,Status:Status}" \
  --output table

💡 出力例

--------------------------------------------------------------------
|                       ListDistributions                          |
+------------------+-----------------------------------+------------+
|       ID         |           DomainName             |  Status    |
+------------------+-----------------------------------+------------+
| E2YOGKTL016F74   | pokemon-quiz-app-roki-2025.s3... | Deployed   |
+------------------+-----------------------------------+------------+

この例では、ディストリビューションIDは E2YOGKTL016F74 です。

ステップ4: CloudFrontキャッシュをクリア

最後に、CloudFrontのキャッシュを無効化（invalidation）して、すぐに新しいファイルが配信されるようにします。

# すべてのパスのキャッシュをクリア
aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

💡 実行例

aws cloudfront create-invalidation \
  --distribution-id E2YOGKTL016F74 \
  --paths "/*"

出力例:

{
    "Location": "https://cloudfront.amazonaws.com/2020-05-31/distribution/E2YOGKTL016F74/invalidation/I9Q86QX0...",
    "Invalidation": {
        "Id": "I9Q86QX0WFTT8HSI5JSVI294YY",
        "Status": "InProgress",
        "CreateTime": "2025-01-19T12:34:56.789Z",
        "InvalidationBatch": {
            "Paths": {
                "Quantity": 1,
                "Items": ["/*"]
            },
            "CallerReference": "cli-1642593296-123456"
        }
    }
}

⚠️ 反映時間 キャッシュクリアは通常1〜3分で完了しますが、完全に反映されるまで最大15分かかる場合があります。 StatusがInProgressからCompletedになるまで待ちましょう。

✅ デプロイ確認

以下の方法でデプロイが正しく完了したか確認します。

1. ブラウザで確認

CloudFrontのURLにアクセスして、新しいバージョンが表示されることを確認します。

2. キャッシュをクリアして再読み込み

• Chrome/Edge: Ctrl + Shift + R (Windows) / Cmd + Shift + R (Mac)
• Firefox: Ctrl + F5 (Windows) / Cmd + Shift + R (Mac)

3. デベロッパーツールで確認

ブラウザのデベロッパーツール（F12）を開き、Networkタブでファイル名のハッシュが新しいものになっているか確認します。

例: index-B76Ek2Ib.js（新）vs index-vYdxcdeJ.js（旧）

🔄 まとめ: 完全なデプロイコマンド

以下のコマンドをコピー＆ペーストすれば、一度にデプロイが完了します。

# 1. クリーンビルド
rm -rf dist && npm run build

# 2. S3にアップロード（バケット名を置き換えてください）
aws s3 sync dist/ s3://your-bucket-name/ --delete

# 3. CloudFrontキャッシュクリア（ディストリビューションIDを置き換えてください）
aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

📝 トラブルシューティング

問題1: 古いバージョンが表示される

原因: CloudFrontのキャッシュがまだ残っている

解決策:

• キャッシュクリアのStatusがCompletedになるまで待つ
• ブラウザのキャッシュをクリアする（Ctrl + Shift + R）
• シークレットモード/プライベートブラウジングで確認する

問題2: AWS CLIコマンドが失敗する

原因: AWS認証設定の問題

解決策:

# AWS認証情報を確認
aws sts get-caller-identity

# プロファイルを指定する場合
aws s3 sync dist/ s3://your-bucket-name/ --delete --profile your-profile

問題3: ビルドが失敗する

原因: TypeScriptの型エラーや未使用変数

解決策:

# Lintチェックを実行
npm run lint

# エラーを修正してから再ビルド
npm run build

© 2025 AWS Deployment Guide