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. 🚀
Think you’ve got what it takes to join our rock star Dev Team? JOIN THE TEAM.
- October 10, 2019
- 1 min read
- October 8, 2019
- 1 min read
- September 26, 2019
- 3 mins read