S3 + CloudFrontでReact(Vite)の初期ページを表示

ReactアプリをViteで開発していると、リリース後に静的ホスティングで手軽に公開したくなることがあります。AWSのS3とCloudFrontを組み合わせれば、安価で高速な配信環境が構築できます。

本記事では、初心者の方にも分かりやすいように、以下の流れで手順を解説します。

1. S3バケットの作成
2. Viteでビルドしてdistフォルダを生成
3. distフォルダのアップロード
4. S3で静的Webホスティングを有効化
5. バケットポリシーの設定（公開権限付与）
6. CloudFrontディストリビューションの作成（OACを利用）
7. CloudFrontからのアクセス用にバケットポリシーを更新

---

前提条件

• AWSアカウントをお持ちであること
• AWS CLIがインストールされ、aws configureで認証情報が設定済みであること
• React + Viteのプロジェクトがローカルに存在すること

---

1. S3バケットの作成

まずはS3バケットを作成します。AWSマネジメントコンソールからも可能ですが、ここではCLIを例にします。

aws s3 mb s3://your-bucket-name --region ap-northeast-1

your-bucket-nameはグローバル一意の名前に置き換えてください。

2. Viteでビルドしてdistフォルダを生成

プロジェクトのルートで以下を実行し、配布用フォルダを生成します。

npm run build
# または
yarn build

完了すると、dist/フォルダにHTMLやJS、CSSが出力されます。

3. distフォルダのアップロード

生成されたdist/の中身を先ほど作成したS3バケットにアップロードします。

aws s3 sync dist/ s3://your-bucket-name --delete

--deleteオプションで、バケット内の不要ファイルを自動で消します。

4. S3で静的Webホスティングを有効化

1. AWSコンソールのS3画面で対象バケットを選択
2. 【プロパティ】タブを開く
3. 【静的ウェブサイトホスティング】をクリック
4. • ホスティングタイプ: 静的ウェブサイトホスティングを有効にする
   • インデックスドキュメント: index.html
   • エラードキュメント: index.html（SPA対応）

これでS3単体でも公開できますが、CloudFrontを介して高速配信&HTTPS化します。

5. 【学習用】バケットポリシーの設定（公開権限付与）

S3にアップロードしたファイルを誰でも取得できるよう、バケットポリシーを追加します。コンソールの【アクセス許可】タブで以下JSONを貼り付けて保存してください。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

• Principalが*なので全人類に読み取り権限を与えています。

6. CloudFrontディストリビューションの作成（OACを利用）

S3よりも高速で安全に配信するため、CloudFrontを設定します。ここではOAC（Origin Access Control）を使います。

1. AWSコンソールのCloudFront画面で「ディストリビューションを作成」

2. • 配信方法: Web

   • オリジングループ: 新規オリジン

   • オリジンドメイン名: 作成したS3バケット（例: your-bucket-name.s3.amazonaws.com）

   • オリジンアクセス制御: 新しいOACを作成

     • 名前: cf-oac-your-bucket
     • 権限: GetObjectのみ
3. ビヘイビアはデフォルトのまま
4. デフォルトキャッシュ動作でGET, HEADを許可
5. レスポンスヘッダー, SSL設定は必要に応じて変更
6. そのまま「作成」をクリック

作成後、配信ドメイン名（例: d1234example.cloudfront.net）が発行されます。

7.【本番推奨】 CloudFrontからのアクセス用にバケットポリシーを更新

OACを使った場合、今度はCloudFrontからS3へのアクセスを許可する必要があります。再度バケットポリシーを編集し、以下に変更してください。これでS3単体でホスティングしたURLからのアクセスができなくなります。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCloudFrontServicePrincipalRead",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": [
        "s3:GetObject"
      ],
      "Resource": "arn:aws:s3:::your-bucket-name/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::YOUR_ACCOUNT_ID:distribution/YOUR_DISTRIBUTION_ID"
        }
      }
    }
  ]
}

• YOUR_ACCOUNT_IDとYOUR_DISTRIBUTION_IDはそれぞれ実際の値に置き換えてください。

8. 動作確認

1. CloudFrontの配信ドメイン名にブラウザでアクセス
2. Reactアプリの初期画面が表示されれば完了です！

---

まとめ

• S3で静的ホスティングを有効化
• バケットポリシーで公開権限を付与
• CloudFrontで高速・HTTPS配信

これでViteで作ったReactアプリを簡単に公開できました。