翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# React ベースのシングルページアプリケーションを Amazon S3 と CloudFront にデプロイする
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront"></a>

*Amazon Web Services、Jean-Baptiste Guillois*

## 概要
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-summary"></a>

シングルページアプリケーション (SPA) は、JavaScript API を使用して表示される Web ページのコンテンツを動的に更新する Web サイトまたは Web アプリケーションです。このアプローチでは、Web ページ全体をサーバーからリロードするのではなく、新しいデータのみを更新するため、Web サイトのユーザーエクスペリエンスとパフォーマンスが向上します。

このパターンは、Amazon Simple Storage Service (Amazon S3) と Amazon CloudFront で React に記述された SPA のコーディングとホスティングに段階的にアプローチします。このパターンの SPA は、Amazon API Gateway で設定され、Amazon CloudFront ディストリビューションを介して公開される REST API を使用して、[クロスオリジンリソース共有 (CORS)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html) 管理を簡素化します。

## 前提条件と制限事項
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-prereqs"></a>

**前提条件**
+ アクティブ AWS アカウント。
+ Node.js と `npm`、インストールおよび設定済み。詳細については、Node.js ドキュメントの[ダウンロード](https://nodejs.org/en/download/)セクションを参照してください。
+ Yarn がインストールされ、設定されている。詳細については、[Yarn ドキュメント](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)を参照してください。
+ Git、インストールおよび設定済み。詳細については、[GitHub ドキュメント](https://github.com/git-guides/install-git)を参照してください。

## アーキテクチャ
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-architecture"></a>

![\[React ベースの SPA を Amazon S3 とCloudFront にデプロイするアーキテクチャ\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/images/pattern-img/970a9d13-e8a2-44ac-aca5-a066e4be60e8/images/96061e05-8ac8-446e-b1da-baa6fc1cc7b6.png)


このアーキテクチャは、 AWS CloudFormation (infrastructure as code) を使用して自動的にデプロイされます。また、静的アセットを保存する Amazon S3、リージョナル API (REST) エンドポイントを公開する Amazon API Gateway を使用する Amazon CloudFront などの、リージョナルサービスを使用します。アプリケーションログは Amazon CloudWatch を使用して収集されます。すべての AWS API コールが監査されます AWS CloudTrail。すべてのセキュリティ設定 (ID やアクセス許可など) は AWS Identity and Access Management (IAM) で管理されます。静的コンテンツは Amazon CloudFront コンテンツ配信ネットワーク (CDN) で配信され、DNS クエリは Amazon Route 53 によって処理されます。

## ツール
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-tools"></a>

**AWS サービス**
+ 「[Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html)」は、任意のスケールで REST、HTTP、WebSocket API を作成、公開、維持、監視、保護する上で役立ちます。
+ [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html) は、 AWS リソースをセットアップし、迅速かつ一貫してプロビジョニングし、 AWS アカウント および リージョン全体のライフサイクルを通じてリソースを管理するのに役立ちます。
+ [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) は、世界中のデータセンターネットワークを通じて配信することで、ウェブコンテンツの配信を高速化します。これにより、レイテンシーが減少し、パフォーマンスが向上します。
+ [AWS CloudTrail](https://docs.aws.amazon.com/awscloudtrail/latest/userguide/cloudtrail-user-guide.html) は、 のガバナンス、コンプライアンス、運用リスクを監査するのに役立ちます AWS アカウント。
+ [Amazon CloudWatch](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) は、 AWS リソースと で実行しているアプリケーションのメトリクスを AWS リアルタイムでモニタリングするのに役立ちます。
+ [AWS Identity and Access Management (IAM)](https://docs.aws.amazon.com/IAM/latest/UserGuide/introduction.html) は、誰を認証し、誰に使用する権限を付与するかを制御することで、 AWS リソースへのアクセスを安全に管理するのに役立ちます。
+ [Amazon Route 53](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/) は、高可用性でスケーラブルな DNS ウェブサービスです。
+ [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/) は、任意の量のデータを保存、保護、取得する上で役立つクラウドベースのオブジェクトストレージサービスです。

**コード**

このパターンのサンプルアプリケーションコードは、GitHub の[React ベースの CORS シングルページアプリケーション](https://github.com/aws-samples/react-cors-spa)のリポジトリにあります。

## ベストプラクティス
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-best-practices"></a>

Amazon S3 オブジェクトストレージを使用すると、アプリケーションの静的アセットを、安全性、回復力、性能、コスト効率に優れた方法で保存できます。このタスクには、専用のコンテナや Amazon Elastic Compute Cloud (Amazon EC2) インスタンスを使用する必要はありません。

Amazon CloudFront コンテンツ配信ネットワークを使用すると、ユーザーがアプリケーションにアクセスするときに発生する可能性のあるレイテンシーを低減できます。ウェブアプリケーションファイアウォール ([AWS WAF](https://docs.aws.amazon.com/waf/latest/developerguide/cloudfront-features.html)) を付加して、悪意のある攻撃からアセットを保護することもできます。

## エピック
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-epics"></a>

### アプリケーションをローカルにビルドおよびデプロイする
<a name="locally-build-and-deploy-your-application"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| リポジトリのクローン作成 | 次のコマンドを実行して、サンプルアプリケーションのリポジトリを複製します。<pre>git clone https://github.com/aws-samples/react-cors-spa react-cors-spa && cd react-cors-spa</pre> | アプリ開発者、AWS DevOps | 
| アプリケーションをローカルにデプロイします。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | アプリ開発者、AWS DevOps | 
|  アプリケーションにローカルでアクセスします。 | ブラウザウィンドウを開き、`http://localhost:3000` URL を入力してアプリケーションにアクセスします。 | アプリ開発者、AWS DevOps | 

### アプリケーションをデプロイする
<a name="deploy-the-application"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
|  AWS CloudFormation テンプレートをデプロイします。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | アプリ開発者、AWS DevOps | 
| アプリケーションソースファイルをカスタマイズします。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | アプリ開発者 | 
| アプリケーションパッケージをビルドします。 | プロジェクトディレクトリで `yarn build` コマンドを実行して、アプリケーションパッケージをビルドします。 | アプリ開発者 | 
| アプリケーションパッケージをデプロイします。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | アプリ開発者、AWS DevOps | 

### アプリケーションをテストする
<a name="test-the-application"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| アプリケーションにアクセスしてテストします。 | ブラウザウィンドウを開いてから、CloudFront ディストリビューションドメイン (以前にデプロイした CloudFormation スタックからの `SPADomain` 出力) を貼り付けてアプリケーションにアクセスします。 | アプリ開発者、AWS DevOps | 

### リソースをクリーンアップする
<a name="clean-up-the-resources"></a>


| タスク | 説明 | 必要なスキル | 
| --- | --- | --- | 
| S3 バケットのコンテンツを削除します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | AWS DevOps、アプリ開発者 | 
|  CloudFormation スタックを削除します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | AWS DevOps、アプリ開発者 | 

## 関連リソース
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-resources"></a>

ウェブアプリケーションをデプロイおよびホストするには、[AWS Amplify ホスティング](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html)を使用して、継続的なデプロイでフルスタックかつサーバーレスのウェブアプリをホストする Git ベースのワークフローを提供することもできます。Amplify ホスティングは の一部であり[AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)、フロントエンドのウェブおよびモバイル開発者がフルスタックアプリケーションを迅速かつ簡単に構築できるようにする専用のツールと機能を提供します AWS。

## 追加情報
<a name="deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront-additional"></a>

ユーザーによってリクエストされ、403 エラーを生成する可能性のある無効な URL を処理するために、CloudFront ディストリビューションに設定されたカスタムエラーページが 403 エラーをキャッチし、アプリケーションエントリポイント (`index.html`) にリダイレクトします。

CORS の管理を簡素化するために、REST API は CloudFront ディストリビューションを通じて公開されます。