Published on: Sun Nov 27 2022
This technical series will contain resources that get you up to speed when using Amazon Cloudfront.
You can think of this article as a high level map that stitches everything together.
We will explore each topic one by one, and build our understanding that way.
First, we will start from the basics of understanding of HTTP caching concepts, CDNs in general and theory related to Amazon Cloudfront.
Then we put things into practice by exploring specific features within Amazon Cloudfront through tutorials.
That way you get a good mix of both theory and practice!
đĄ Tip:You donât have to follow the technical series one by one, you can jump around, and maybe try a tutorial then read some âtheoryâ related articles.
The idea is find the approach that works best for you!
The technical series is structured in a way that each topic is independent of the other.
When using technologies that support the HTTP caching standard, there are two types of caches you should be aware of!
Most of the time, responses can be shared across the different clients but sometimes they shouldnât be.
Either way, the big idea here is learning to differentiate between the two and when to use one over the other.
Illustration of the types of caches a request may go through on its journey from the client to the server
Caching: Private vs Shared caches
An 80/20 overview of HTTP caching, in this article, weâll cover the 6 core concepts in HTTP caching.
Illustration of a validation request: client validating a response with server
The concepts are:
HTTP caching: The 6 Core Concepts
Itâs great to know about HTTP caching, and what it does but how do we apply those concepts in the real world ?
In this article, we will go through examples of common use cases, and how apply HTTP caching in those scenarios.
HTTP caching with Cache-Control: private
A quick primer on edge computing, specifically on the topic of content delivery networks (CDNs).
This is a technology agnostic introduction.
Weâll answer questions like:
What problems are CDNs solving ?
What are the common use cases ?
What are the common technologies in the market ?
and more...
It includes illustrations, so be sure to give it a read!
Illustration of accessing the data through the edge locations
Edge Computing: An introduction to Content Delivery Networks
Within Amazon cloudfront, the main ways you control request is through use of policies.
Weâll go through an overview of the policies that are available.
Illustration of the cloudfront policies: caching, origin request, response header policy
The policies are:
Amazon Cloudfront: An overview of policies
Cloudfront cache options
When you use Amazon cloudfront, there are many options that allow you to change the caching behavior.
This article will go through the options, and some of the gotchas when managing caching within Amazon cloudfront.
Amazon Cloudfront: Caching Deep dive
A tutorial on how to set up Amazon cloudfront distrubtion using a lambda as an origin server.
All of this is done via terraform.
Illustration of the sandbox architecture with Cloudfront and Lambda
Amazon Cloudfront: Create a distribution + Lambda (tutorial)
A tutorial on how to set up Amazon cloudfront origin request policy.
By default, only some request properties are added to the request forwarded to the origin server.
So, if we want additional properties to be added, we need to include them in this policy.
All of this is done via terraform.
Amazon Cloudfront: Origin request policy (tutorial)
A tutorial on how to set up Amazon cloudfront cache policy.
There are ways to manage the caching within Amazon cloudfront, and one of the ways to do so is through cache policies.
Amazon Cloudfront: Cache policy (tutorial)
A tutorial on how to set up Amazon Cloudfront response header policy.
Amazon cloudfront also allows you to alter the response headers sent to the client.
This can be for custom headers, caching or security headers.
Amazon Cloudfront: Response header policy (tutorial)
Deploy a astro static site to S3 served through Amazon cloudfront.
Illustration of the AWS architecture serving a multi-page Astro site from Cloudfront
The goal here is to build the CI/CD with Github Actions and AWS infrastructure to serve our multi page Astro site!
Surprisingly, this does not work out of the box.
This isnât really a gotcha but rather a misunderstanding of how S3 really works.
We address the main question of: What does a folder in S3 really mean ?
This one definitely caught me off guard but after digging into it, it does makes sense!
Illustration of how S3 uses folder prefixes
Amazon S3 + Cloudfront: Multi-page suport
Difference between Lambda @ Edge and cloudfront functions ?
Illustration of the AWS Edge locations map (Source: AWS Global Edge Network)
AWS: Cloudfront functions versus Lambda@Edge
Do you know the difference between SSG and SSR ?
Both are these are techniques for rendering website to the end-users.
Weâll go through the basics and show examples on how to implement it using AWS.
Bonus section in the article âď¸
Complexity comparison between SSG, SSR and ISR
Server-side rendering (SSR) vs static site generation (SSG) using AWS
Deploy a astro site with SSR to S3 served through Amazon cloudfront.
Weâre going to get hands-on and integrate the custom Lambda@Edge Astro adapter into our existing site.
This will allow us to create a bundle for SSR which we can deploy to the Edge!
AWS Architecture for our Astro site with SSR at the edge
Then consider signing up to get notified when new content arrives!