CloudFront + S3でReactのSPAを作成する方法

CloudFront + S3でReactのSPAを作成する方法

CloudFront + S3の構成でReactのSPAを作成してみます。

S3にコンテンツを配置します。

まずS3にコンテンツ配置用のバケットを作成します。

CloudFront + S3でReactのSPAを作成する

「バケットを作成する」をクリックします。

CloudFront + S3でReactのSPAを作成する

「次へ」をクリックします。

CloudFront + S3でReactのSPAを作成する

「次へ」をクリックします。

CloudFront + S3でReactのSPAを作成する

「次へ」をクリックします。

CloudFront + S3でReactのSPAを作成する

「パケットを作成」をクリックします。

CloudFront + S3でReactのSPAを作成する

「プロパティ」の「Static website hosting」を上記の設定にして保存します。

作成したバケットにindex.htmlをアップロードします。

CloudFront + S3でReactのSPAを作成する

これでReactのWebコンテンツの配置は完了です。

CloudFrontの設定

CloudFront + S3でReactのSPAを作成する

「Create Destribution」をクリックします。

CloudFront + S3でReactのSPAを作成する

Webのほうの「Get Started」をクリックします。

CloudFront + S3でReactのSPAを作成する

上記のとおり設定します。先ほど作成したS3を選択します。

Restrict Bucket AccessをONにすること

この設定をONにすることで、S3側のオブジェクトに別途権限を与えない限り、CloundFront経由のアクセスしかファイルにアクセスできなくなります。

CloudFront + S3でReactのSPAを作成する

ここでは「HTTP and HTTPS」としましたが、「HTTPS Only」でもよいと思います。

HTTPメソッドも適宜選択してください。

CloudFront + S3でReactのSPAを作成する

CloudFront + S3でReactのSPAを作成する

「Create Distribution」をクリックします。これでCloudFrontの設定は完了です。

15分くらいかかる

CloudFront + S3でReactのSPAを作成する

Statusが「In Progress」となっていますが、これがDeployedに変わるまで15分ほど時間がかかります。

Deployedになれば、「Domain Name」のURLをたたけばindex.htmlが実行されます。

This XML file does not appear to have any style information associated with it. The document tree is shown below.

このエラーが出たら、index.htmlを「公開する」を押す必要があります。

CloudFront + S3でReactのSPAを作成する

これで「Domain Name」/index.htmlでReactが表示されます。

コメント

株式会社CONFRAGE ITソリューション事業部をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

タイトルとURLをコピーしました