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

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.