Deploy a SPA in AWS with domain or sub-domain

Deploying Single Page Application (SPA) in Amazon Web Services (AWS) world is not that straight forward like the way SPA sounds. At Craftsmen we have been deploying SPAs in AWS cloud environment pretty frequently for our customers and thought that it’s worth sharing our practices with the world!

Suppose you have a domain called www.example.com and you want to serve a SPA (built in React, Angular, VueJS etc) web app from AWS cloud environment. Then at a first glance you will face lots of confusing stuffs like S3 bucket, Route53, Cloud Front etc which will need to be configured properly. Lets discuss about them briefly and later we will see necessary configuration steps to make them work together.

S3 Bucket: S3 is the simple cloud storage from AWS where you can store any type of file with access permissions. We will put our SPA app in a S3 bucket with public access permission, so that anyone can download files from this bucket.

CloudFront: You can think Amazon CloudFront as a CDN. In our case it will cache our static web app from a S3 bucket and will deliver it more efficiently when requested.

Route 53: You can consider Route 53 as the domain name resolver similar as NameCheap and other third parties.

Necessary configurations in S3:

• At first we have to configure a S3 bucket which will act like a web server.
• Login to your AWS web console and select S3 from services. Create two buckets based on your domain and sub-domain name lets call example.com and dev.example.com. After creating the buckets, upload your SPA app files to the bucket and make all files publicly accessible from Permissions tab or from the “Actions” menu.
• Now from the “Properties” tab of the bucket configuration page click “Static website hosting” tile and give values as shown in the below image. Note the “Endpoint” URL, through which you should be able to access your web site after saving changes.

Necessary configurations in CloudFront:

We hosted our app in S3 bucket and now we want to deliver it through CloudFront for better performance and caching.

• Select CloudFront from service in AWS web console.
• Click the “Create Distribution” button and in the Web section click “Get Started” button.
• Paste the “website domain” part of the static assets bucket in Origin domain name . In our case it should be “dev.example.com.s3-website-[zone].amazonaws.com”, it will set the Origin ID automatically.
• Select “Redirect HTTP to HTTPS” in “Viewer Protocol Policy” if you want to deliver your site over HTTPS.
• Select “Redirect HTTP to HTTPS” in “Viewer Protocol Policy” if you want to deliver your site over HTTPS.
• In “SSL certificate” section select “Custom SSL Certificate (example.com)” if you already bought a SSL for this domain.
• In “Default root object” type “index.html”.
• Leave the other settings as they are and click the create distribution button.
• It will create a new distribution and will show the list of distributions, with a ID and a CloudFront domain name. At this moment we should be able to browse our site with the new CloudFront domain name when the status is changed to “Deployed”.
• For client side routing you may require to configure redirect rules in case of HTTP 404 error.

Necessary configurations in Route 53:

If you did not purchase your domain from AWS then following configurations needs to be done in your third party domain controller like NameCheap.

• After the status of new distribution changes to “Deployed”, move on to Route 53 to configure the domain controller to route traffic to the CloudFront if users hit “dev.example.com” or “example.com”.
• Create a new hosted zone for your domain in Route 53.
• Click on “Hosted zones” and then click example.com in the domain list and add a “A” record as shown below.

• Normally Route 53 takes upto 60 seconds to start routing to the CloudFront distribution.

If everything goes right then the site should be available in dev.example.com.