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.
Click on “Create Bucket.”
Click “Next.”
Click “Next.”
Click “Next.”
Click on “Create Bucket.”
Under “Properties,” set “Static website hosting” to the above settings and save.
Upload index.html to the created bucket.
This completes the placement of React web content.
CloudFront Settings
Click Create Destribution.
Click on “Get Started” on the web.
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.
Here, “HTTP and HTTPS” is used, but “HTTPS Only” is also acceptable.
Please select the HTTP method as appropriate.
Click on “Create Distribution. This completes the CloudFront setup.
It will take about 15 minutes.
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.
The React will now appear in “Domain Name”/index.html.
コメント