How to host a react app on AWS using an S3 bucket and CloudFront

💡 This guide is meant to offer the bare minimum implementation on hosting a react application using an S3 bucket and CloudFront. This guide will assume basic knowledge of the said AWS services.

Introduction

CloudFront

Amazon CloudFront is a content delivery network operated by Amazon Web Services. Content delivery networks provide a globally-distributed network of proxy servers that cache content, such as web videos or other bulky media, more locally to consumers, thus improving access speed for downloading the content.

Low-Latency Content Delivery Network (CDN) — Amazon CloudFront — Amazon Web Services

S3

Amazon S3 or Amazon Simple Storage Service is a service offered by Amazon Web Services that provides object storage through a web service interface. Amazon S3 uses the same scalable storage infrastructure that Amazon.com uses to run its e-commerce network.

Cloud Object Storage — Amazon S3 — Amazon Web Services

Why use S3 and CloudFront?

Hosting a web application traditionally involves setting up the infrastructure for it to run, which can include but is not limited to the following:

• VPS
• Managing the security aspects & patching the instance as found fit
• Installing the applications required for your app to run and configuring them (nginx/apache)
• Ensuring the uptime scalability and disaster recovery
• Networking
• Network access
• Router
• Subnets

To overcome all those, for static websites such as the react applications it is recommended to use the said architecture for three simple reasons:

1. Static file deployment involves much fewer moving pieces than app deployment on a server. Less setup and maintenance are required.
2. The cost of setting up a static application is significantly lower because there is less setup and maintenance required.
3. It’s easier to scale your application as CloudFront takes care of that aspect entirely using edge compute capabilities, with high transfer rates.

Setup

Prerequisites

• An AWS account

S3

1. Create a new S3 bucket
2. When creating the bucket ensure that you uncheck the Block Public Access settings for this bucket

This will enable us to make the files of our bucket public over the internet. You will also have to check the I acknowledge… as part of this step.

3. Now that you have created your bucket open it up in the AWS console and navigate to the Properties tab

4. Scroll to the bottom of the page and you should see the option Static website hosting

5. Click edit and enable it

6. Fill the Index document and Error document as found fit. In this example, I will use index.html for both values and then click save changes.

7. Upload your react build to the bucket. For this, you can use npm run build to generate the static files and upload them to the bucket.

8. Now that we have the static files in our bucket you probably get the above error, which is to be expected. We will fix this by navigating to our bucket → Permissions → Edit bucket policy.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": [
                "arn:aws:s3:::YOUR-BUCKET-NAME/*"
            ]
        }
    ]
}

This will enable anonymous users to have read-only access to the contents of our bucket.

9. Navigate to your bucket → Properties → get the bucket URL and access it. You should now be able to access your react application

CloudFront

Doing this will enable edge locations, ensuring the scalability of our web app.

1. Create a new CloudFront distribution

2. Select the prior created S3 bucket for the origin domain and name

3. On the Viewer section select Redirect HTTP to HTTPS

4. You can leave the rest of the settings as default and click Create. This will take a few minutes till your distribution will become available.

5. Navigate to the error pages tab and click Create custom error response

6. Create an error response with the following configuration

Conclusion

If you have made it this far congratulations, now you have a react application that can scale automatically to the moon and back!

Scalability CloudFront distributions scale automatically with the number of requests your files are getting and require no configuration changes to respond to increased load, making CloudFront a great choice for serving the static content of a website or a fast-growing application.