Part 5: Adding CloudFront

In this post we will add a CloudFront distribution to our project.  Amazon CloudFront is AWS's Content Delivery Network (CDN).  Other popular CDNs that you may have heard of are Cloudflare, Fastly, and Akamai.  A CDN has servers distributed around the world for the purpose of caching content closer to its end users.  By caching content closer to the end users, the resources load faster and less traffic has to be served by your origin (the term used to refer to the source of the content).

This post picks up where we left off in Part 4: Adding the category and home landing pages.  If you did not go through that post, you can get the project files we will be using as our starting point here.

The first thing we will do is add an additional item to the resources section of our template.yaml file.  This new item in the template.yaml file will create our CloudFront Distribution when we apply our updated CloudFormation template (via sam deploy).

Then we will add an additional item to the output section of our template.yaml file.  This new output will provide us with the URL to our CloudFront distribution.

As a part of the CloudFront distribution that we added, we specified that the OriginPath is /Prod.  That tells CloudFront to use that base path for all items being requested from origin.  So, now with that added, we should remove /Prod from the hyperlinks in our page.yaml file.  We can just do a global replace to remove /Prod from our page.yaml file, it should be there 5 times.

Now let's run sam deploy so that these CloudFormation updates will be deployed.

When sam deploy completes, you will see our new output being returned for the CloudFrontDistribution's URL which will be something like https://d2mubg31z2zmzn.cloudfront.net/

I can imagine a possibility that someone would like their blog to have a more memorable URL than https://d2mubg31z2zmzn.cloudfront.net/.  So, in this next section we will add a custom domain for our CloudFront distribution.

First, you will need a domain name and the ability to add a DNS record to that domain.  For this the AWS answer is Route 53, but like I have said in previous posts, I am a very cost conscious person.  With that in mind, I cannot get myself to pay 50 cents a month for a hosted zone when every other registrar I have used provides that service for free.  Yes, even though AWS took liberties with the DNS standard and added their own record type (ALIAS).  I still don't think it is worth 50 cents a month.

To add a custom domain to our blog, via CloudFront, we will first add parameters and conditions to our CloudFormation template.  There will be two parameters, one for the DNS alias we want to use and the second for the Amazon Resource Names (ARN) for your certificate stored in AWS Certificate Manager.  We are adding these as parameters, so we do not have to hard code these values in the CloudFormation template.  The conditions are being added, so that if anyone wants to follow along and they do not have a domain name they want to use (or maybe they are happy with a URL like https://d2mubg31z2zmzn.cloudfront.net/), they can just leave these new parameters blank and CloudFormation will apply just like it did before we added them.  To add those parameters and conditions add the following to your template.yaml file.  I like to add these right above the Mappings sections.

Next we will add logic to our CloudFront resource in template.yaml to add the alias and certificate properties when the condition we defined above is met.  To do that add these lines to the bottom of the AWS::CloudFront::Distribution resource.

And last, we will add another output to our CloudFormation template.  This output will give us the information we need to create our CNAME DNS record to point it to our CloudFront Distribution.  To add that just add the following to the outputs section of your template.yaml file.

That is everything we need to add to our project files.  If you will be using a custom domain, we need a certificate in AWS Certificate Manager (ACM) before we are ready to apply our updated CloudFormation.  We will be using a public certificate, so it is free.  Since generating a certificate is not usually something you want to do often, and I commonly create/destroy CloudFormation stacks while keeping the certificate, I do it outside of the CloudFormation.  This is one of the rare things that I feel is ok to do through the AWS console.  To create a certificate in AWS Certificate Manger follow these steps.

1. Open your web browser and log into the AWS console.
2. Search for Certificate Manager and open it.
3. Click request a certificate.
4. Keep request a public certificate selected and press request a certificate.
5. For domain name enter the domain name that you will be using for your blog (I commonly create a wildcard certificate by entering *.domainname.tld, like *.jonholman.com) and press next.  Note that it would be helpful to have the wildcard (*) certificate as we will be using the same certificate later when we create our admin page.
6. Now for validation method you can pick whichever option you prefer, either way you need to validate 'that you own or control the domains for which you are requesting the certificate' and press next.
7. On the next page you can add any AWS tags to your certificate, if you would like, and press review.
8. Then review your selections and press confirm and request.
9. The next screen will give you information about how your validation is being processed, press continue.
10. Now follow the instructed steps to complete validation of your request.
11. Soon after you complete validation, you can refresh the AWS Certificate Manager console and see that your certificate has updated from pending validation to issued.
12. Expand your new certificate and copy the ARN value, so that you can provide it to our next step as the value to that parameter.

Now that we have added those items and generated our certificate (if necessary), let's deploy these changes by running sam deploy --guided.  Note that we need to run sam deploy with the guided option this time to allow us to add values for the two new parameters that we added.  If you will not be adding a custom domain name just press enter for each of those values when prompted.

Our project directory at the end of this post is available here.

Thanks for reading.  If you have any feedback or questions, please leave a comment or message me on Twitter/LinkedIn (links on the right side bar).

In the next post, we will move our static assets to an S3 Bucket so that our web pages do not rely on resources from other web sites.  We will then add that s3 bucket as another origin on this same CloudFront distribution.