Hosting a Static Site with Cloudfront

A simple tutorial with some pictures

Photo by Davies Designs Studio on Unsplash

What is Cloudfront?

Cloudfront is Amazon’s Cloud Distribution Network (CDN) that they offer as a service to customers. It basically means that it’s a way to store (cache) resources close to where users might request them from.

It can stand in front of an Elastic Load Balancer (ELB), which would itself be in front of some sort of application, or it can stand in front of Amazon’s serverless storage mechanism, S3. (It can also front MediaStore, but we won’t go there…)

The way Cloudfront caches things for you, depending on your setup, is:

1. A user makes a request to a Cloudfront resource, let’s say the static website
2. The Cloudfront URL resolves to an IP address/ data center near the user, but the files are not cached
3. The Cloudfront service makes a call to the origin (for example, an S3 bucket in another region), pulls the resource, caches it in the nearest data center
4. Cloudfront returns the resource

Now if you or another user make the request again from the same geographic region, Cloudfront won’t have to go to the origin (unless the cache is invalidated), but can instead serve you content it has stored locally.