Deploy a react static site to amazon S3
Easier than you think.
Amazon S3 can be used to host a static website. Let’s walk through these simple processes.
Required Bucket Configuration
Following properties is required to make a
s3-bucket to host a static site
- Enable Static Site Hosting
- Need public access to the bucket along with the objects
- A bucket policy to enable
- Bucket name should be the same as a domain name
We will walk through the following steps to match with all the required configurations.
Step 01: Create a Bucket
- Go to
AWS Consoleand open
- Create a bucket and Uncheck Public Access
- Bucket name should be the same as your website domain
If we consider the website should be
www.my-site.com then, the bucket name should be
- While creating a bucket, ensure you uncheck the Block all public access
- Also, acknowledge the pubic access
Step 02: Enable Static Website Hosting
static website hosting
- Select the bucket and go to
- Now you will find an option to edit
Static website hostingand click
- Enable the hosting
- For a react app the
index documentshould be
- We can create an error file and put it in the
Error documentsection. Alternatively, we can use a dummy file name, even though it does not exist.
- Now save the changes
Step 03: Update Bucket Policy
bucket-policy select the bucket and go to
- Bucket policy be
Resource is the bucket
This policy implies that the buckets object will be accessed publicly.
- Save the
Step 04: Upload Static Files
Before upload files to the bucket, build the react app and ensure
build the directory is available in the
- Now select the bucket and upload all the files and directory inside the
Now the site is ready and you can find the URL in the following section
- Select bucket and go to the
- In properties, under the
static site hostingyou will find the url for the site.
Step 05: Setup Domain Using Route 53
To use the domain from
Route 53 .
Go to the hosted zone and create a new recordset with the following properties
- Route name should be the same as the bucket name
- Alias should be toggled in
- As a value, from the dropdown select the
s3 website endpoint
- Also, select the region and bucket name from the value dropdown
- Route type should be
- Routing policy for the static site can be
Simple Routing Policy
We Are Done
For further investigation, you can follow the Official doc by AWS.
Let me know of any query, I’ll reply ASAP.