S3にReactアプリをデプロイする

概要

S3にReactアプリをデプロイする方法のまとめ

環境

• react:^19.2.0
• vite:^7.2.4

S3のバケット作成

S3のバケット作成時は全てデフォルト設定。念のためキャプチャ

S3バケットにビルドファイルを配置

CloudFrontでディストリビューションの作成

AWS CloudFrontサービスを使用する際に特定のコンテンツデリバリーの設定や構成を指す。
コンテンツの配信設定、キャッシュコントロール、セキュリティポリシーなどを定義できる。

Freeプランでも十分使える

任意のディストリビューション名を指定

オリジンタイプにS3を指定

オリジンを指定

Browse S3をクリックすれば作成したS3バケット一覧から選択できる

オリジン設定は用意された推奨のものを使う

webアプリを開く

CloudFrontディストリビューションを開き、ディストリビューションドメイン名をコピーする

(ディストリビューションドメイン名)/indexでページを開く

補足

S3のバケットポリシーに自動で、CloudFrontからのアクセスを許可する設定が記載されている

S3 > アクセス許可 > バケットポリシー

CloudFrontディストリビューションを削除

• 無効にしてから削除する必要がある。
• 無効には時間がかかる。無効が完了するのは「最終更新日」に日付が入ったら。（無効化中はデプロイと表示される）