翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
React ベースのシングルページアプリケーションを Amazon S3 および にデプロイする CloudFront
作成者: Jean-Baptiste Guillois (AWS)
コードリポジトリ: React ベースの CORS シングルページアプリケーション | 環境:本稼働 | テクノロジー: ウェブおよびモバイルアプリ CloudNative、サーバーレス |
ワークロード：その他すべてのワークロード | AWS サービス: Amazon CloudFront、Amazon S3、Amazon API Gateway |
[概要]
単一ページアプリケーション (SPA) は、 JavaScript APIs。このアプローチでは、Web ページ全体をサーバーからリロードするのではなく、新しいデータのみを更新するため、Web サイトのユーザーエクスペリエンスとパフォーマンスが向上します。
このパターンは、React on Amazon Simple Storage Service (Amazon S3) と Amazon で記述された SPA をコーディングしてホストする step-by-step アプローチを提供します CloudFront。このパターンの SPA は Amazon API Gateway によって公開されている REST API を使用しており、オリジン間リソース共有 (CORS)のベストプラクティスも示します。
前提条件と制限
前提条件
アクティブな AWS アカウント。
AWS Cloud9 などの統合開発環境 (IDE)。
Node.js と
npm、インストールおよび設定済み。詳細については、Node.js ドキュメントのダウンロードセクションを参照してください。 Yarn がインストールされ、設定されている。詳細については、Yarn ドキュメント
を参照してください。 Git、インストールおよび設定済み。詳細については、GitHub ドキュメント
を参照してください。
アーキテクチャ
このアーキテクチャは、AWS CloudFormation （コードとしてのインフラストラクチャ) を使用して自動的にデプロイされます。静的アセットを保存する Amazon S3, リージョナル API (REST) エンドポイントを公開する Amazon API Gateway など、リージョナルサービスを使用します。アプリケーションログは、Amazon を使用して収集されます CloudWatch。すべての AWS API コールは AWS で監査されます CloudTrail。すべてのセキュリティ設定 (例、ID と権限）は Amazon Identity and Access Management (IAM) で管理されます。静的コンテンツは Amazon CloudFront コンテンツ配信ネットワーク (CDN) を介して配信され、DNS クエリは Amazon Route 53 によって処理されます。
テクノロジースタック
Amazon API Gateway
Amazon CloudFront
Amazon Route 53
Amazon S3
IAM
Amazon CloudWatch
AWS CloudTrail
AWS CloudFormation
ツール
AWS サービス
Amazon API Gateway は、あらゆる規模で REST、HTTP、 WebSocket APIs を作成、公開、保守、モニタリング、保護するのに役立ちます。
AWS Cloud9 は、ソフトウェアのコード作成、ビルド、実行、テスト、デバッグをサポートする IDE です。また、ソフトウェアを AWS クラウドにリリースする上でも役立ちます。
AWS CloudFormation は、AWS リソースをセットアップし、迅速かつ一貫したプロビジョニングを行い、AWS アカウントとリージョン全体のライフサイクルを通じてリソースを管理するのに役立ちます。
Amazon CloudFront は、世界中のデータセンターネットワークを通じてウェブコンテンツを配信することで、ウェブコンテンツの配信を高速化します。これにより、レイテンシーが短縮され、パフォーマンスが向上します。
AWS CloudTrail は、AWS アカウントのガバナンス、コンプライアンス、運用リスクを監査するのに役立ちます。
Amazon CloudWatch は、AWS リソースと AWS で実行しているアプリケーションのメトリクスをリアルタイムでモニタリングするのに役立ちます。
「AWS Identity and Access Management (IAM)」は、AWS リソースへのアクセスを安全に管理し、誰が認証され、使用する権限があるかを制御するのに役立ちます。
Amazon Route 53 は、高可用性でスケーラブルな DNS Web サービスです。
Amazon Simple Storage Service (Amazon S3) は、任意の量のデータを保存、保護、取得する上で役立つクラウドベースのオブジェクトストレージサービスです。
コード
このパターンのサンプルアプリケーションコードは、 GitHub React ベースの CORS シングルページアプリケーション
エピック
| タスク | 説明 | 必要なスキル |
|---|---|---|
リポジトリをクローン作成します。 | このパターンには AWS Cloud9 を IDE として使用することをお勧めしますが、別の IDE (たとえば、Visual Studio Code または IntelliJ IDEA) を使用することもできます。 次のコマンドを実行して、サンプルアプリケーションのリポジトリを IDE に複製します。
| アプリ開発者、AWS DevOps |
アプリケーションをローカルにデプロイします。 |
| アプリ開発者、AWS DevOps |
アプリケーションにローカルでアクセスします。 | ブラウザウィンドウを開き、 | アプリ開発者、AWS DevOps |
| タスク | 説明 | 必要なスキル |
|---|---|---|
AWS CloudFormation テンプレートをデプロイします。 |
| アプリ開発者、AWS DevOps |
アプリケーションソースファイルをカスタマイズします。 |
| アプリ開発者 |
アプリケーションパッケージをビルドします。 | プロジェクトディレクトリで | アプリ開発者 |
アプリケーションパッケージをデプロイします。 |
| アプリ開発者、AWS DevOps |
| タスク | 説明 | 必要なスキル |
|---|---|---|
アプリケーションにアクセスしてテストします。 | ブラウザウィンドウを開き、URL (以前にデプロイした CloudFormation スタックからの | アプリ開発者、AWS DevOps |
| タスク | 説明 | 必要なスキル |
|---|---|---|
S3 バケットのコンテンツを削除します。 |
| AWS DevOps、アプリ開発者 |
AWS CloudFormation スタックを削除します。 |
| AWS DevOps、アプリ開発者 |
追加情報
Web アプリケーションをデプロイしてホストするには、継続的なデプロイでフルスタック、サーバーレス Web アプリをホストする Git ベースのワークフローを提供する、AWS Amplify ホスティングを使用することもできます。Amplify ホスティングは AWS Amplify の一部で、フロントエンドの Web およびモバイル開発者が AWS に迅速かつ簡単にフルスタックアプリケーションをビルドできるようにする、専用のツールと機能のセットです。
