はじめに
React プロジェクト「skill-typing-front」をローカル環境でビルドし、AWS S3 にデプロイする手順をまとめました。
AWS S3 を利用することで、サーバーレスでコスト効率の良いホスティングが可能になります。
本記事では、ローカル環境でのセットアップから、ビルド、S3 へのアップロード、ホスティング設定までを詳しく解説します。
書こうと思ったきっかけ
React アプリを AWS S3 でホスティングする際、手順が曖昧なまま進めると、権限設定や CORS の問題でアクセスできなくなることがあります。
実際に S3 にデプロイしながら、どの手順が重要かを整理することで、今後のデプロイ作業をスムーズに進められるようにしたいと考えました。
また、AWS CLI を活用して効率的にデプロイする方法を学ぶための備忘録としても役立つと思い、記事にまとめました。
実際にやってみた
1. プロジェクトの準備
まず、ローカル環境でリポジトリをクローンまたは skill-typing-front ディレクトリに移動します。
cd skill-typing-front
依存関係をインストールします。
npm install
または、yarn を使っている場合は以下のコマンドを実行します。
yarn install
2. ローカルでビルド
Reactアプリをビルドします。
npm run build
または、yarn を使っている場合:
yarn build
ビルドが完了すると、build/ ディレクトリが作成されます。
3. S3にアップロード
S3バケットにアップロードする前に、AWS CLIがインストールされていることを確認し、適切なAWSアカウントにログインしていることを確認してください。
aws s3 ls
S3バケットに build/ ディレクトリの内容をアップロードします。
aws s3 sync build/ s3://your-s3-bucket-name --delete
このコマンドにより、ローカルの build/ ディレクトリの内容が S3 バケットに同期され、不要なファイルは削除されます。
実際のマネコン画面
4. S3でのホスティング設定
S3バケットで静的ウェブサイトホスティングを有効にする場合、以下の手順を実行します。
- AWSコンソールでS3バケットを開く。
- 「プロパティ」タブで「静的ウェブサイトホスティング」を有効化。
-
index.htmlをエントリーポイントとして指定。 - 必要に応じてパブリックアクセス許可を設定。
または、AWS CLIを使用して静的ウェブサイトホスティングを有効にすることもできます。
aws s3 website s3://your-s3-bucket-name --index-document index.html
5. アクセス権限の設定
S3のオブジェクトがパブリックにアクセス可能であることを確認するため、適切なバケットポリシーを設定します。
バケットポリシーの例:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-s3-bucket-name/*"
}
]
}
バケットポリシーを適用するには、AWSコンソールまたはAWS CLIを使用します。
aws s3api put-bucket-policy --bucket your-s3-bucket-name --policy file://bucket-policy.json
6. 動作確認
S3の静的ウェブサイトURLにアクセスし、Reactアプリが正しくホスティングされているか確認します。
echo "http://your-s3-bucket-name.s3-website-region.amazonaws.com"
もしアクセスに問題がある場合は、CORS設定やCloudFrontを活用することで改善できる場合があります。
まとめ
React アプリ「skill-typing-front」を AWS S3 にデプロイする手順を紹介しました。主な流れは以下の通りです。
- プロジェクトの準備（リポジトリのクローン、依存関係のインストール）
-
ビルド（
npm run buildまたはyarn build） -
S3 へアップロード（
aws s3 sync build/ s3://your-s3-bucket-name --delete） - S3 でのホスティング設定（静的ウェブサイトホスティングの有効化）
- アクセス権限の設定（バケットポリシーの設定）
- 動作確認（S3 の URL でアクセス確認）
S3 単体では HTTPS 通信ができないため、CloudFront を活用すればより高速かつセキュアなホスティングが可能になります。
今後の拡張として、CI/CD の導入も検討し、より自動化されたデプロイ環境を構築していきたいです。