Guide to deploying a react app to AWS 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

The following properties are required to make an 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 Get Object permission
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 Console and open S3 service
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 my-site.com

If we plan to use the site domain [www.sub-domain.my-site.com](http://www.sub-domain.my-site.com) then the bucket name should be the same [www.sub-domain.my-site.com](http://www.sub-domain.my-site.com)

While creating a bucket, ensure you uncheck the Block all public access
Also, acknowledge the public access

Step 02: Enable Static Website Hosting

To enable `static website hosting

Select the bucket and go to the properties tab
Now you will find an option to edit Static website hosting and click the Edit button
Enable the hosting
For a react app the index document should be index.html
We can create an error file and put it in the Error document section. Alternatively, we can use a dummy file name, even though it does not exist.
Now save the changes

Step 03: Update Bucket Policy

To update bucket-policy select the bucket and go to the Permissions tab.

Select bucket-policy and click edit
Bucket policy be

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket-name/*"
        }
    ]
}

Here, Resource is the bucket arn

This policy implies that the bucket's object will be accessed publicly.

Save the bucket-policy

Step 04: Upload Static Files

Before uploading files to the bucket, build the react app and ensure build the directory is available in the react-app

Now select the bucket and upload all the files and directories inside the build directory

Now the site is ready and you can find the URL in the following section

Select the bucket and go to the properties section
In properties, under the static site hosting you 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 A record (IPv4)
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 queries, and I’ll reply ASAP.

Deploy a react static site to Amazon S3

Comments

AWS

AWS Certified Solution Architect Associate: My Journey, My Perspective

More from this blog

The Comprehensive Guide to REST API Architecture and Conventions

JavaScript Loading Strategies in Web Page: async and defer

DOM Positioning

CSS Selector Specificity

Understanding CSS Display Property

Required Bucket Configuration

Step 01: Create a Bucket

Step 02: Enable Static Website Hosting

Step 03: Update Bucket Policy

Step 04: Upload Static Files

Step 05: Setup Domain Using Route 53

We Are Done

Command Palette

Comments

AWS

AWS Certified Solution Architect Associate: My Journey, My Perspective

More from this blog

Required Bucket Configuration

Step 01: Create a Bucket

Step 02: Enable Static Website Hosting

Step 03: Update Bucket Policy

Step 04: Upload Static Files

Step 05: Setup Domain Using Route 53

We Are Done