Creating a CloudFormation script to host a static site

Creating a CloudFormation script to host a static site on S3 + CloudFront + SSL

Thato Nwamadi
March 1, 2023
Blog cover image

Creating a CloudFormation script to host a static site on S3 + CloudFront + SSL

Step 1 — get the template

Grab the completed CloudFormation script found here.

While this template is complete and you can likely use it right away we are going to talk about some of the options you might want to change based on your stack.

Step 2 — customise the template

The script is set up for a domain that you have on AWS Route 53 — if your domain is hosted elsewhere you might want to use email validation instead of DNS validation in the Cert section of the script. You can use DNS validation for domains hosted elsewhere but you will need to copy the output from CloudFormation “Content of DNS Record is…” and create a DNS record on your domain host.

The script is set up for a Single Page Application (SPA) like one created with Create React App. The CustomErrorResponses attribute of the CloudFrontDistribution section reflects this — if a 404 or 403 error is encountered we will still want to direct traffic to the root index.html. If you are hosting a different site you might want to handle this in a different manner.

Step 3 — open the AWS console

Open CloudFormation in the AWS console note that the region you will need to use is North Virginia (us-east-1). This is because CloudFront can only use SSL certificates created in that region. Don’t worry if you think this will affect the performance of your site if you are closer to another region . CloudFront will distribute your site to servers across the globe.

Step 4 — upload the template

Upload your new CloudFormation template and click next

Step 5 — give it a name

Give the stack a name — I recommend using a name specific to this particular instance like the client name or site hostname

Step 6 — fill in params

Fill in the parameters — the domain name should not include “http://” or “https://” and the all price class will most likely suit your needs.

Step  7— idley click next

The default advanced options and permissions should work fine for most needs. Click next.

Step  8— review inputs

Review the details that you have entered and if you are happy hit “Create stack”.

Step  9— create resources

Sit back and watch the magic happen — it will take a few minutes but soon your site will be ready to add some content.

Note that if you chose DNS validation you will need to add that record for the creation of other resources to work. If your domain is hosted on Route 53 you can easily create them by visiting the AWS Certificate Manager then clicking on the domain and then “Create record in Route 53”.

Where to from here?

Most web apps and sites need at least some manual testing before pushing to production. I recommend extending the above script to have at least 3 environments: Development, UAT and Production.

As seen on FOX, Digital journal, NCN, Market Watch, Bezinga and more