Deploy Your Frontend with AWS S3 and CloudFront

Developing an aesthetically pleasing frontend that attracts a significant number of users is the initial step in the development process. Equally important is ensuring that it is accessible, allowing users to enjoy the application fully.

There are many platforms available for deploying applications, such as AWS, Azure, and GCP. Each platform comes with its own set of advantages, disadvantages, and learning curve. For this blog post, I'll focus on AWS.

In particular, I'll be demonstrating how to deploy a React application using AWS S3 (Simple Storage Service) and AWS CloudFront.

If you would like to follow along with this blog, ensure that you build your React project and keep it handy. If you are not familiar with creating a build for React, simply use the commands below in your React project.

npm run build
# or
yarn build
# or
pnpm build

If you don't have a React project, don't worry—I've got you covered. You can pull the repository I'm demonstrating in this blog.

#clone the repo
git clone https://github.com/giripatel/deployment-frontend.git
#point your terminal
cd deployment-frontend

Before diving into the process, let's first understand what Object Storage and CDN are.

Object Storage

An Object Storage is a type of data storage architecture designed to manage and store data as objects, rather than as files in a hierarchical file system or as blocks in a block storage system. Object storage is often used in cloud computing environments and is particularly suited for storing large amounts of unstructured data, such as images, videos, documents, backups, and log files.

CDN (Content Delivery Network)

A content delivery network (CDN) is a geographically distributed group of servers that caches content close to end users. A CDN allows for the quick transfer of assets needed for loading Internet content, including HTML pages, JavaScript files, stylesheets, images, and videos.

💡

Each step includes a screenshot, which may make the blog appear longer and more image-heavy.

Deployment Process

Object Store Setup
CDN Configuration

Object Store Setup

Log in to your AWS account.
Search for 'S3' in the search box and select it from the results.
Click on ‘Create bucket’.
Select 'General Purpose' and provide a name for the bucket.
Scroll to the bottom and click ‘Create Bucket’.
Choose the zone closest to you to ensure low latency.
Select the newly created bucket to proceed with further configurations.
You will be redirected to the Upload page. Make sure to have your build folder ready.
Drag and drop the build you created earlier in the blog. Alternatively, you can push the build to S3 programmatically. AWS provides an S3 package that simplifies this process.
Scroll to the bottom of the page and click Upload.

CloudFront Setup

Type 'CloudFront' in the search box and select the highlighted option shown in the screenshot.
Click on ‘Create a CloudFront distribution’.
Select the recently created S3 bucket in the 'Origin Domain' field.
Choose 'Origin Access Control Settings,' then click on 'Create New OAC.'

What is OAC?

Origin Access Control (OAC) is a feature in CloudFront that allows you to restrict direct access to content stored in your origin, such as an Amazon S3 bucket or a web server. This ensures that users can only access the content through the CDN distribution, preventing direct access via the origin URL.
Select the S3 bucket you created earlier, if it is not already selected. Choose 'Sign Requests' and click 'Create'.
Scroll down a bit and choose ‘Enable security protections’.
Type 'index.html' in the 'Default Root Object' field. This file will be returned to users who visit the website at the '/' path.
Click on “Create distribution” to complete the creation of CloudFront.
Click on 'Copy Policy' in the third popup. This will copy a policy to be used for S3 bucket permissions. Make sure to keep it safe and easily accessible.
The CloudFront distribution has been successfully created. The 'Distribution Domain Name' is the URL used to access the website you have created.
If you attempt to access the website, the browser will respond as shown below.
To resolve this, open the S3 bucket configuration mentioned in the above “Object Store Setup” (Step 7) and select 'Permissions.'
Click on 'Edit.' This will open a text area where you can paste the policy copied in the previous step.
Paste the Policy in the text area and click ‘Save’.
Try to access the same URL that we tried before, You should now be able to access the webpage.

Congratulations 🎉 we are almost there.
Now, try accessing another page of your application.

If you are following the same React project used in this blog post, navigate to <Your URL>/info in your browser.

If you encounter the same error as shown below, we'll need to make some changes to the CloudFront configurations.
Open the CloudFront distribution and click on ‘Error pages’.
Select the HTTP error code as ‘403: Forbidden’ and choose the ‘Customize error response’ as ‘Yes’.

In the ‘Response page path’ type ‘/index.html’ and the response code as ‘200 OK’.

The reason for the error is that CloudFront is attempting to locate the '/info' file in S3, which does not exist.

To make sure all requests are routed to ‘index.html’ we have to configure it in ‘Error pages’.
If you try accessing the route or page (in my case, '/info') in the URL, you'll see the response below. This confirms that we are successfully redirecting all requests to '/index.html'.