Your first project on AWS — S3/CloudFront

Pratik Pednekar
5 min readMar 31, 2022

--

Chapter 4 — Learn how to host on S3 and CloudFront

Photo by Jeremy McKnight on Unsplash

The series

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.

bucket name

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.

set static hosting

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.

add access key secret

Similarly, add one for the secret key as well.

add secret key

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.

set bucket name and region

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.

build pushed to S3.

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.

status enabled

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.

SPA rendered from CloudFront

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.

create load balancer origin

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

set path pattern

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.

update URL.

Once deployed, you can also run an invalidation on CloudFront. Invalidations clear any cached data on CloudFront.

create invalidation

Click create invalidation to run an invalidation. It will take a few minutes to clear cached files.

Let’s browse the CloudFront domain.

Test the get and post list api’s

Congratulations, you have successfully created your first AWS project.

If you liked my work, buy me a coffee.

--

--

Pratik Pednekar
Pratik Pednekar

Written by Pratik Pednekar

Sr Software Development Engineer at McAfee

No responses yet