How to create a React SPA with CloudFront + S3

How to create a React SPA with CloudFront + S3

Create a React SPA with CloudFront + S3 configuration.

Place content in S3.

First, create a bucket for content placement in S3.

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

Click on “Create Bucket.”

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

Click “Next.”

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

Click “Next.”

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

Click “Next.”

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

Click on “Create Bucket.”

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

Under “Properties,” set “Static website hosting” to the above settings and save.

Upload index.html to the created bucket.

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

This completes the placement of React web content.

CloudFront Settings

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

Click Create Destribution.

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

Click on “Get Started” on the web.

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

Configure as above. Select the S3 you just created.

Restrict Bucket Access must be turned on.

By turning this setting ON, the file can only be accessed via CloundFront unless separate authorization is given to the object on the S3 side.

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

Here, “HTTP and HTTPS” is used, but “HTTPS Only” is also acceptable.

Please select the HTTP method as appropriate.

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

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

Click on “Create Distribution. This completes the CloudFront setup.

It will take about 15 minutes.

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

The status is “In Progress,” but it takes about 15 minutes for this to change to Deployed.

Once Deployed, hit the URL of “Domain Name” and index.html will be executed.

This XML file does not appear to have any style information associated with it.

If you get this error, you need to press “Publish” on index.html.

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

The React will now appear in “Domain Name”/index.html.

コメント

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