Amazon Cloudfront: Technical Series

Published on: Sun Nov 27 2022

Jerry Chang

Content

Introduction
The Series

Introduction

Amazon Cloudfront technical series learning pyramid

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.

The Series

1. Caching: private vs shared caches

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

2. HTTP Caching: The 6 core concepts

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:

Cache-Control headers
Validation
Vary
Request Collapsing
Response Staleness
Deleting from the cache

HTTP caching: The 6 Core Concepts

3. HTTP Caching: In-Practice

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

HTTP caching with Cache-Control: private

HTTP Caching: In-Practice

4. Edge Computing: An Introduction to Content Delivery Networks (CDNs)

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!

accessing the data through the edge locations

Illustration of accessing the data through the edge locations

Edge Computing: An introduction to Content Delivery Networks

5. Amazon cloudfront: An overview of policies

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.

Cloudfront policies: caching, origin request and response header policy

Illustration of the cloudfront policies: caching, origin request, response header policy

The policies are:

Cache policy
Origin request policy
Response header policy

Amazon Cloudfront: An overview of policies

6. Amazon cloudfront: Caching deep dive

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

7. Amazon Cloudfront: Create a distribution + Lambda (tutorial)

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

Illustration of the sandbox architecture with Cloudfront and Lambda

Amazon Cloudfront: Create a distribution + Lambda (tutorial)

8. Amazon Cloudfront: Origin request policy (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)

9. Amazon Cloudfront: Cache 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)

10. Amazon Cloudfront: Response header 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)

11. Running an Astro static site on Amazon cloudfront

Deploy a astro static site to S3 served through Amazon cloudfront.

Illustration of the AWS architecture serving a multi-page Astro site from 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!

Tutorials:

12. S3 + Cloudfront: Multi-page support

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

Illustration of how S3 uses folder prefixes

Amazon S3 + Cloudfront: Multi-page suport

13. Compute at the edge

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

14. SSG vs SSR comparison using AWS

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

Complexity comparison between SSG, SSR and ISR

Server-side rendering (SSR) vs static site generation (SSG) using AWS

15. Astro SSR at the edge

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

AWS Architecture for our Astro site with SSR at the edge

Astro: Going to the Edge

Enjoy the content ?

Then consider signing up to get notified when new content arrives!