Your first project on AWS — S3/CloudFront

5 min readMar 31, 2022

Chapter 4 — Learn how to host on S3 and CloudFront

The series

Chapter 1 — The Basics
Chapter 2 — Elastic Container Service
Chapter 3 — Application Load Balancer
Chapter 4 — S3 and CloudFront

In the previous article we deployed our service on ECS using GitHub actions and also configured a load balancer, next, let’s use AWS S3 to host a react SPA that will call our nodejs service. We will also configure cloud front origins to call S3 (SPA) or ALB(nodejs) based on the URL path.

Why Cloud Front? You could just create and host SPA on S3 but you will not be able to use SSL with custom domain on S3, cloud front is required for that. Though we will not be configuring any SSL certificates in this chapter, you will learn how to configure two origins inside cloud front which is a common setup in enterprises.

Create S3

Search and select S3 in the AWS console, click create new bucket and set the following.

Leave the rest as is and click create bucket. Open the newly created bucket, click the Properties tab and select static hosting. Enable static website hosting with hosting type as “Host a static website” and in the index document set index.html.

Now, let’s deploy the react js code to S3. Before that, you will need to fork this repository which contains a bare-bones react js application to connect with the nodejs service endpoints. If you remember in the previous article we deployed nodejs docker image to ECR using GitHub actions, we will use similar steps here as well.

GitHub actions will require AWS access and secret keys to deploy react build to AWS S3. I have listed the steps to create these in the previous article.

Once you have the keys, open the forked repo, go to settings and then select secrets, click actions and create a new secret as shown below.

Similarly, add one for the secret key as well.

Now, open the repository root folder and go to .github/workflows/dev-s3.yml. This is the configuration file for the GitHub deploy action. Edit the below fields to set your bucket name and region then commit.

Once you commit, a new deployment workflow is triggered under GitHub actions. Once the deployment completes, you should be able to see the build objects in the S3 bucket.

Now, let’s setup CloudFront to call S3.

Cloudfront

Search and select CloudFront from the AWS console. Click create distribution and enter origin details.

Why is it called a distriution? Cloud front is capable of caching your static content which in this case is the single page application and serve or distribute it from various AWS edge locations. Edge locations are data centers setup across the world to deliver your content with the lowest latency.

For the origin domain, select the S3 bucket we just created, leave the path empty and select OAI. Origin access identity is selected as the bucket is private and will not allow access to the cloud front. OAI will add a special CloudFront user and associate with your distribution. We will have to modify the S3 bucket policy to allow access to this user but thankfully CloudFront can do this for us.

Select Yes, update the bucket policy option and cloud front will update the S3 bucket policy for you.

Click create new OAI, give a name, and click create.

Under default cache behavior, for allowed HTTP methods, select all methods.

Leave the rest as-is and create the distribution. The distribution should be ready in a few minutes.

Once the distribution is ready, we can browse the domain name of the distribution to see if the single page application from S3 is rendered.

The application has just two buttons to get and create lists. The buttons will not work just yet, we need to do a few more things before we get there.

Add load balancer origin

Once we add load balancer as the second origin from CloudFront, we can use the same URL to call the front end and backend. Open the distribution that we just created, go to the origin tab, and click create origin, from the dropdown select the load balancer we created in the last article and click create origin.

Now, go to the behavior section and click create behavior. Set the following

Here we are redirecting all requests on domain/api to the load balancer. This means domain/index.html goes to S3 and gets the single page application whereas any api calls are sent to the nodejs container running inside ECS.

The setup is ready, let’s do one final update. Open the forked UI repository and go to src/config/config.json. Open the file and update the api base URL with your CloudFront domain. If your CloudFront domain is http://test.com, the base URL will be http://test.com/api. Commit the changes, wait for it to deploy on S3, and then refresh the URL.