Lets go over how to deploy a static website built in React to the cloud using AWS.

Technologies uses:

  1. AWS Route 53 - To purchase and configure the domain
  2. AWS S3 - to host the static website
  3. AWS Cloudfront - to cache and serve the static website and also get around the naming limitations of S3
  4. AWS Command Line Tools - to do quick deployments to S3 & cache invalidations on Cloudfront
  5. React, Redux, Webpack & NPM - to build the static website

Step 1.

We use React to build the static website. Webpack compiles everything and puts it in to the \dist folder. In my case this includes html, css, js and font files.

Step 2.

Create a bucket on AWS S3. Name it whatever is convenient for you, it doesn’t have to match the name of the domain as we are going to be using cloudfront in the middle of the s3 and domain. Enable Static Website Hosting on the bucket. This enables auto loading of the index file like index.html when the container folder is put in the path.

Copy over the static website i.e. your \dist folder to your s3 Bucket. You can do this using the Web GUI. Later we will setup and copy things using command line tools

Now visit your:

  • s3 bucket’s URL: https://s3.amazonaws.com/quick-calculators/index.html

or

  • s3 buckets static website URL: http://quick-calculators.s3-website-us-east-1.amazonaws.com

They will both load your website’s index.html which you had just copied over to your s3 bucket. Note when using the static website URL, I did not have to specify the index.html file in the path.

Step 3.

Create a distribution on Cloudfront. Make its origin be your s3 static website and specify your domain name with and without www as Altername Domain Names (CNAMEs). If you dont have the domain names yet, its best to go to AWS Route 53 and first buy the domain names and then comeback and associate it with your cloudfront distribution. Leave all other settings as-is. By Default it will cache origin files for 24 hours and respond to HTTPS requests with its own SSL cert valid for *.cloudfront.com.

Once the cloudfront has finished building the distribution, visit the cloudfront URL and it should load your static website.

Step 4.

In Route 53 configure the domain name you want to use for your static website.

  • First, create a Record Set for www as a cname and point it the cloudfront url you had created in Step 3.

  • Second, create another Record Set for the naked domain, meaning with nothing infront of it as a A record, use the Alias option and select the cloudfront URL you had created in Step 3 as value.

Now visit your domain name with and without www. It will load your static website.

Step 5.

Install AWS Command Line Tools. On a mac with python present, this is as simple as running pip install --upgrade --user awscli on the command line. Detailed Instructions can be found here: http://docs.aws.amazon.com/cli/latest/userguide/installing.html

To deploy your changes to your static website, make your changes, compile them in the to \dist folder and then run aws s3 sync .\dist s3://quick-calculators --profile sandeep45 This will sync contents of the \dist folder with the contents of the s3 bucket quick-calculators.

To clear cache of aws cloudfront run aws cloudfront create-invalidation --distribution-id E2I62KLS7VM16M --paths '/*' --profile sandeep45. Note to run this command you will need your distribution id. This is useful because by default cloudfront is caching files for 24 hours.

That’s it! Happy AWS static Website Hosting!