AWSクラウドSNDクラウドフロントにReactアプリケーションを展開する方法 - 完全なウォークスルー

AWS S3 および CloudFront への React アプリのデプロイ: ステップバイステップガイド

このガイドでは、静的ホスティングのために React アプリケーションを Amazon S3 にデプロイし、コンテンツ配信のために CloudFront を使用する手順を説明します。

ステップ 1: はじめる

始める前に、次のものが揃っていることを確認してください。

1. Node.js と npm がローカルにインストールされています。
2. 管理者権限を持つ AWS アカウント。

ステップ 2: React アプリケーションを構築する

1. ターミナルを開きます。
2. Vite を使用して新しい React アプリを作成します: npm create vite@latest <your_project_name> (<your_project_name> を希望の名前に置き換えます)。
3. プロジェクト ディレクトリに移動します: cd <your_project_name>

ステップ 3: 検証とビルド

1. テストする開発サーバーを起動します: npm start。 http://localhost:3000 からアプリにアクセスします。
2. 開発サーバーを停止します (Ctrl C)。
3. 実稼働用にアプリをビルドします: npm run build。これにより、最適化されたファイルを含む build/ フォルダーが作成されます。

ステップ 4: S3 バケットのセットアップ

1. AWS マネジメントコンソールで、S3 サービスに移動します。
2. 一意の名前 (<your_unique_bucket_name> など) を指定して新しいバケットを作成します。
3. リージョンを選択し、バケットを作成します。

ステップ 5: S3 での静的 Web サイトのホスティングを有効にする

1. 新しく作成したバケットを選択します。
2. 「プロパティ」タブに移動します。
3. [静的 Web サイト ホスティング] で有効にします。
4. 「インデックス文書」と「エラー文書」をindex.htmlに設定します。
5. 変更を保存します。

ステップ 6: バケット権限の構成

1. 「権限」タブに移動します。
2. バケットポリシーを編集します。 ポリシーで Web サイトへのパブリック アクセスが許可されていることを確認してください (セキュリティへの影響を考慮し、運用環境に応じて調整してください)。
3. ポリシーを保存します。 ブラウザで S3 バケット URL にアクセスして、デプロイメントをテストします。

ステップ 7: S3 デプロイメントのテスト

S3 URL (例: http://<your_unique_bucket_name>.s3-website-.amazonaws.com/) 経由でデプロイされたアプリにアクセスします。

ステップ 8: CDN 用に CloudFront を設定する

1. AWS マネジメントコンソールで、CloudFront サービスに移動します。
2. 新しいディストリビューションを作成します。配送方法として「ウェブ」を選択してください。
3. S3 バケットのエンドポイントを指すオリジン設定を構成します。
4. ビューアのプロトコル ポリシーを「HTTP を HTTPS にリダイレクトする」に設定します。
5. ディストリビューションを作成します。

ステップ 9: CloudFront デプロイメントのテスト

CloudFront ディストリビューションがデプロイされたら、CloudFront URL を通じてアプリにアクセスします。

結論

React アプリケーションが AWS S3 と CloudFront に正常にデプロイされました。アプリケーションは CDN 経由で提供されるようになり、世界中のユーザーに対して高可用性と最適化されたパフォーマンスが保証されます。 プレースホルダーのバケット名とリージョンを実際の値に置き換えることを忘れないでください。 運用環境に導入するときは、常にセキュリティのベスト プラクティスを優先してください。

以上がAWSクラウドSNDクラウドフロントにReactアプリケーションを展開する方法 - 完全なウォークスルーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。