Greg Fullard

Posted on Nov 29, 2020 • Updated on Dec 7, 2020

Learn AWS with me :: Episode 2 : CloudFront

#aws #cloudfront #learning #skills

Background

Welcome to Episode 2 of the Learn AWS with me series. The purpose behind this series is to build skills and confidence in using the AWS platform, by finding, testing and sharing the best learning resources that teach specific AWS services AS WELL AS the various foundational technologies they depend on. In short: Instead of writing a tutorial that just scratches the surface, we assemble together a learning path of great existing resources to help you towards mastery.

You can learn more about the series here: https://dev.to/gregfullard/learn-aws-with-me-episode-1-introduction-mph

Episode 2 focusses on AWS CloudFront. Let's get into it..

Introduction

CloudFront is a CDN (Content Delivery Network) that allows us to deploy applications at AWS Edge locations to ensure low latency.

But what exactly is a CDN?

Well, it's a widely distributed network of servers that allows your content to be deployed near the end user. This makes it faster for content to get to your users. Some well known CDNs that you might come across include Akamai, Cloudflare and Fastly. Of course the major cloud providers all have their own as well: AWS CloudFront, Google Cloud CDN, Azure CDN, etc. As always, Wikipedia has a nice introduction: https://en.wikipedia.org/wiki/Content_delivery_network

Getting Started with AWS CloudFront

Assuming you already have an AWS account created, the best/fastest place to start your CloudFront journey is with the AWS getting started tutorial: https://aws.amazon.com/getting-started/hands-on/deliver-content-faster/

For some more simple and practical steps on how to use CloudFront with S3 to host a simple static website, you could also check out this article on FreeCodeCamp by @colbyfayock : https://www.freecodecamp.org/news/how-to-host-and-deploy-a-static-website-or-jamstack-app-to-s3-and-cloudfront/

Serving up static S3 content via CloudFront is great, but that's not where it's usefulness ends. This 10 Minutes tutorial from David Brown is a great introduction into using CloudFront with dynamic content served from load balanced EC2 instances: https://youtu.be/V8vR7rA0ubs

Core Concepts in CloudFront

When working with CloudFront, it is essential to understand the following core concepts:

Object: The content that is served and cached (An image, web page, etc.)
Origin: Source where the original object is served from
POP (Point of Presence): The edge servers closest to the end user
Regional Cache: A longer term cache that sits between the POP and the Origin
Distribution: A specification for how your content should be distributed to make delivery to end users efficient

Foundational Skills for working with CloudFront

No technology lives in isolation, and CloudFront is no different. Although you can begin your learning journey by jumping straight into CloudFront, becoming a true master will require skills and experience in the prerequisite, complementary and alternative technologies. The following "Skills Tetris Diagram" gives a simple overview of the skills neighbourhood that CloudFront lives in.

DNS

Since CloudFront closely relates to HTTP routing, a baseline understanding of DNS is helpful. No need to be a DNS expert, a cursory understanding is all you need. Here's a great video for a start: https://www.youtube.com/watch?v=dE4rsNuG0aw

After you've created a CloudFront distribution, your site will be accessible at a URL that was randomly generated under the CloudFront domain. For example "d3mkvdtexdirhr.cloudfront.net". This is fine for testing, but to link your distribution to a custom domain, you need to configure a CNAME record. There are many sources that provide an overview of DNS records. Cloudflare has a concise explanation on CNAME records at https://www.cloudflare.com/en-gb/learning/dns/dns-records/dns-cname-record/

While debugging DNS issues I found this article which explains some command line tools that are quite valuable: https://www.cloudns.net/blog/dns-tools-dns-trace-online-ping-traceroute-dns-lookup-reverse-lookup/

HTTP Caching

CloudFront makes your site faster by employing various caching strategies. To build a solid grasp of HTTP Caching, you can't do much better that this @MozDevNet page: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

SSL /TLS

When adding a custom domain CNAME to your CloudFront distribution, you need to supply a valid TLS certificate. Which means you need some level of understanding of TLS. This article by Steve Cope does a great job at explaining the fundamentals: http://www.steves-internet-guide.com/ssl-certificates-explained/

Setting up a TLS certificate will depend on where you get the certificate and where your domain is hosted. For me, I'm using GoDaddy and issued the certificate via AWS Certificate Manager. I used this article by @cingulara for reference: https://medium.com/@dale.bingham_30375/creating-a-static-website-using-godaddy-github-aws-s3-codedeploy-and-aws-cloudfront-1990a8f4ddd8

Beyond the console

Once you've worked through the resources above, you should be quite comfortable configuring CloudFront distributions for most typical websites via the AWS console. But in real life, you are much more likely to interact with CloudFront via the AWS CLI or one of the available SDKs. I like the Boto3 (Python) SDK quite a lot, so the two resources I used often were:

Things I struggled with

Using LetsEncrypt instead of Amazon Certificate Manager

I wanted to use Let's Encrypt CertBot and Certbot-s3front to generate a TLS certificate. I ran into various issues, specifically with the Certbot-s3front tool. Eventually I gave up and used ACM instead, which was pretty painless.

ACM Email verification

ACM Email verification didn't work for me, because the domain I used doesn't have any email hosting attached and the administrator email address is flagged as private on the WHOIS database, which meant that AWS never sent me a mail. When I switched to DNS validation it worked well

Root domain redirect to AWS CloudFront

Getting my root domain to redirect to AWS was not intuitive with GoDaddy, but once you know how to achieve it, it's quite simple (Don't use DNS records, but rather use the Domain redirect function on GoDaddy)

Things I would still need to figure out

Since I only spent a couple of hours per day for 5 days, I couldn't deep dive into everything that CloudFront offers. Some other capabilities I'd like to explore on a future iteration include:

How to cache some parts of an application, but not all. For example, only the images used in a React application
Impact of changing cache headers on the origin server
Enabling logging
Manually forcing cache invalidation
Adding dynamic capability with Lambda@Edge
Adding security to CloudFront content, i.e. content that requires an authorised user
Using a LetsEncrypt cert

Next Steps

This blog article covered the most important aspects that I came across during the weekly Twitter thread, but if you're interested, you can check out the original thread here: https://twitter.com/devskilldojo/status/1330755377768652801

Next up (Episode 3) is AWS Certificate Manager, you can follow along with episode 3 on this Twitter thread: https://twitter.com/devskilldojo/status/1333094917732757506

DEV Community