<h2 id="content"><a href="#content" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Content</h2>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#the-series">The Series</a>
<ol>
<li><a href="#1-caching-private-vs-shared-caches">Caching: private vs shared caches</a></li>
<li><a href="#2-http-caching-the-6-core-concepts">HTTP Caching: The 6 core concepts</a></li>
<li><a href="#3-http-caching-in-practice">HTTP Caching: In-Practice</a></li>
<li><a href="#4-edge-computing-an-introduction-to-content-delivery-networks-cdns">Edge Computing: An Introduction to Content Delivery Networks (CDNs)</a></li>
<li><a href="#5-amazon-cloudfront-an-overview-of-policies">Amazon cloudfront: An overview of policies</a></li>
<li><a href="#6-amazon-cloudfront-caching-deep-dive">Amazon cloudfront: Caching deep dive</a></li>
<li><a href="#7-amazon-cloudfront-create-a-distribution--lambda-tutorial">Amazon Cloudfront: Create a distribution + Lambda (tutorial)</a></li>
<li><a href="#8-amazon-cloudfront-origin-request-policy-tutorial">Amazon Cloudfront: Origin request policy (tutorial)</a></li>
<li><a href="#9-amazon-cloudfront-cache-policy-tutorial">Amazon Cloudfront: Cache policy (tutorial)</a></li>
<li><a href="#10-amazon-cloudfront-response-header-policy-tutorial">Amazon Cloudfront: Response header policy (tutorial)</a></li>
<li><a href="#11-running-an-astro-static-site-on-amazon-cloudfront">Running an Astro static site on Amazon cloudfront</a></li>
<li><a href="#12-s3--cloudfront-multi-page-support">S3 + Cloudfront: Multi-page support</a></li>
<li><a href="#13-compute-at-the-edge">Compute at the edge</a></li>
<li><a href="#14-ssg-vs-ssr-comparison-using-aws">SSG vs SSR comparison using AWS</a></li>
<li><a href="#15-astro-ssr-at-the-edge">Astro SSR at the edge</a></li>
</ol>
</li>
</ul>
<h2 id="introduction"><a href="#introduction" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Introduction</h2>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/amazon-cloudfront-technical-series-learning-pyramid.png" alt="Amazon Cloudfront technical series learning pyramid" style="width:80%" />
  </div>
</div>
<p>This technical series will contain resources that get you up to speed when using Amazon Cloudfront.</p>
<p>You can think of this article as a high level map that stitches everything together.</p>
<p>We will explore each topic one by one, and build our understanding that way.</p>
<p>First, we will start from the basics of understanding of HTTP caching concepts, CDNs in general and theory related to Amazon Cloudfront.</p>
<p>Then we put things into practice by exploring specific features within Amazon Cloudfront through tutorials.</p>
<p>That way you get a good mix of both theory and practice!</p>
<blockquote class="common">
<b>💡 Tip:</b>
<p>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.</p>
<p>The idea is find the approach that works best for you!</p>
<p>The technical series is structured in a way that each topic is independent of the other.</p>
</blockquote>
<h2 id="the-series"><a href="#the-series" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>The Series</h2>
<h3 id="1-caching-private-vs-shared-caches"><a href="#1-caching-private-vs-shared-caches" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>1. Caching: private vs shared caches</h3>
<p>When using technologies that support the HTTP caching standard, there are two types of caches you should be aware of!</p>
<p>Most of the time, responses can be shared across the different clients but sometimes they shouldn’t be.</p>
<p>Either way, the big idea here is learning to differentiate between the two and when to use one over the other.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/types-of-caches-request-with-shared-cache.png" alt="Request with shared cache" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Illustration of the types of caches a request may go through on its journey from the client to the server</i></blockquote>
  </div>
</div>
<p><a href="https://www.jerrychang.ca/writing/caching-private-vs-shared-caches" target="_blank" rel="nofollow noopener noreferrer">Caching: Private vs Shared caches</a></p>
<h3 id="2-http-caching-the-6-core-concepts"><a href="#2-http-caching-the-6-core-concepts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>2. HTTP Caching: The 6 core concepts</h3>
<p>An 80/20 overview of HTTP caching, in this article, we’ll cover the 6 core concepts in HTTP caching.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/http-caching-talking-to-the-server.png" alt="Talking to the server" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Illustration of a validation request: client validating a response with server</i></blockquote>
  </div>
</div>
<p><strong>The concepts are:</strong></p>
<ol>
<li>Cache-Control headers</li>
<li>Validation</li>
<li>Vary</li>
<li>Request Collapsing</li>
<li>Response Staleness</li>
<li>Deleting from the cache</li>
</ol>
<p><a href="https://www.jerrychang.ca/writing/http-caching-the-6-core-concepts" target="_blank" rel="nofollow noopener noreferrer">HTTP caching: The 6 Core Concepts</a></p>
<h3 id="3-http-caching-in-practice"><a href="#3-http-caching-in-practice" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>3. HTTP Caching: In-Practice</h3>
<p>It’s great to know about HTTP caching, and what it does but how do we apply those concepts in the real world ?</p>
<p>In this article, we will go through examples of common use cases, and how apply HTTP caching in those scenarios.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/http-caching-response-private.png" alt="HTTP caching with Cache-Control: private" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>HTTP caching with <b>Cache-Control: private</b></i></blockquote>
  </div>
</div>
<p><a href="https://www.jerrychang.ca/writing/http-caching-in-practice" target="_blank" rel="nofollow noopener noreferrer">HTTP Caching: In-Practice</a></p>
<h3 id="4-edge-computing-an-introduction-to-content-delivery-networks-cdns"><a href="#4-edge-computing-an-introduction-to-content-delivery-networks-cdns" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>4. Edge Computing: An Introduction to Content Delivery Networks (CDNs)</h3>
<p>A quick primer on edge computing, specifically on the topic of content delivery networks (CDNs).</p>
<p>This is a technology agnostic introduction.</p>
<p><strong>We’ll answer questions like:</strong></p>
<ul>
<li>
<p>What problems are CDNs solving ?</p>
</li>
<li>
<p>What are the common use cases ?</p>
</li>
<li>
<p>What are the common technologies in the market ?</p>
</li>
<li>
<p>and more...</p>
</li>
</ul>
<p>It includes illustrations, so be sure to give it a read!</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cdn-intro-access-to-edge-locations.png" alt="accessing the data through the edge locations" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote><i>Illustration of accessing the data through the edge locations</i></blockquote>
  </div>
</div>
<p><a href="https://www.jerrychang.ca/writing/edge-computing-an-introduction-to-content-delivery-networks" target="_blank" rel="nofollow noopener noreferrer">Edge Computing: An introduction to Content Delivery Networks</a></p>
<h3 id="5-amazon-cloudfront-an-overview-of-policies"><a href="#5-amazon-cloudfront-an-overview-of-policies" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>5. Amazon cloudfront: An overview of policies</h3>
<p>Within Amazon cloudfront, the main ways you control request is through use of policies.</p>
<p>We’ll go through an overview of the policies that are available.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cloudfront-policies-all.png" alt="Cloudfront policies: caching, origin request and response header policy" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Illustration of the cloudfront policies: caching, origin request, response header policy</blockquote>
  </div>
</div>
<p><strong>The policies are:</strong></p>
<ul>
<li>Cache policy</li>
<li>Origin request policy</li>
<li>Response header policy</li>
</ul>
<p><a href="https://www.jerrychang.ca/writing/amazon-cloudfront-an-overview-of-policies" target="_blank" rel="nofollow noopener noreferrer">Amazon Cloudfront: An overview of policies</a></p>
<h3 id="6-amazon-cloudfront-caching-deep-dive"><a href="#6-amazon-cloudfront-caching-deep-dive" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>6. Amazon cloudfront: Caching deep dive</h3>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cloudfront-cache-options.png" alt="Cloudfront cache options" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Cloudfront cache options</blockquote>
  </div>
</div>
<p>When you use Amazon cloudfront, there are many options that allow you to change the caching behavior.</p>
<p>This article will go through the options, and some of the gotchas when managing caching within Amazon cloudfront.</p>
<p><a href="https://www.jerrychang.ca/writing/amazon-cloudfront-caching-deep-dive" target="_blank" rel="nofollow noopener noreferrer">Amazon Cloudfront: Caching Deep dive</a></p>
<h3 id="7-amazon-cloudfront-create-a-distribution--lambda-tutorial"><a href="#7-amazon-cloudfront-create-a-distribution--lambda-tutorial" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>7. Amazon Cloudfront: Create a distribution + Lambda (tutorial)</h3>
<p>A tutorial on how to set up Amazon cloudfront distrubtion using a lambda as an origin server.</p>
<p>All of this is done via terraform.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/cloudfront-tutorial-architecture.png" alt="Illustration of the sandbox architecture with Cloudfront and Lambda" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Illustration of the sandbox architecture with Cloudfront and Lambda</blockquote>
  </div>
</div>
<p><a href="https://www.jerrychang.ca/writing/amazon-cloudfront-create-a-distribution" target="_blank" rel="nofollow noopener noreferrer">Amazon Cloudfront: Create a distribution + Lambda (tutorial)</a></p>
<h3 id="8-amazon-cloudfront-origin-request-policy-tutorial"><a href="#8-amazon-cloudfront-origin-request-policy-tutorial" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>8. Amazon Cloudfront: Origin request policy (tutorial)</h3>
<p>A tutorial on how to set up Amazon cloudfront origin request policy.</p>
<p>By default, only some request properties are added to the request forwarded to the origin server.</p>
<p>So, if we want additional properties to be added, we need to include them in this policy.</p>
<p>All of this is done via terraform.</p>
<p><a href="https://www.jerrychang.ca/writing/amazon-cloudfront-origin-request-policy" target="_blank" rel="nofollow noopener noreferrer">Amazon Cloudfront: Origin request policy (tutorial)</a></p>
<h3 id="9-amazon-cloudfront-cache-policy-tutorial"><a href="#9-amazon-cloudfront-cache-policy-tutorial" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>9. Amazon Cloudfront: Cache policy (tutorial)</h3>
<p>A tutorial on how to set up Amazon cloudfront cache policy.</p>
<p>There are ways to manage the caching within Amazon cloudfront, and one of the ways to do so is through cache policies.</p>
<p><a href="https://www.jerrychang.ca/writing/amazon-cloudfront-cache-policy" target="_blank" rel="nofollow noopener noreferrer">Amazon Cloudfront: Cache policy (tutorial)</a></p>
<h3 id="10-amazon-cloudfront-response-header-policy-tutorial"><a href="#10-amazon-cloudfront-response-header-policy-tutorial" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>10. Amazon Cloudfront: Response header policy (tutorial)</h3>
<p>A tutorial on how to set up Amazon Cloudfront response header policy.</p>
<p>Amazon cloudfront also allows you to alter the response headers sent to the client.</p>
<p>This can be for custom headers, caching or security headers.</p>
<p><a href="https://www.jerrychang.ca/writing/amazon-cloudfront-response-header-policy" target="_blank" rel="nofollow noopener noreferrer">Amazon Cloudfront: Response header policy (tutorial)</a></p>
<h3 id="11-running-an-astro-static-site-on-amazon-cloudfront"><a href="#11-running-an-astro-static-site-on-amazon-cloudfront" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>11. Running an Astro static site on Amazon cloudfront</h3>
<p>Deploy a astro static site to S3 served through Amazon cloudfront.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/multi-page-cloudfront-function-url-remapping.png" alt="Illustration of the AWS architecture serving a multi-page Astro site from Cloudfront" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Illustration of the AWS architecture serving a multi-page Astro site from Cloudfront</blockquote>
  </div>
</div>
<p>The goal here is to build the CI/CD with Github Actions and AWS infrastructure to serve our multi page Astro site!</p>
<h3 id="tutorials"><a href="#tutorials" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Tutorials:</h3>
<ul>
<li><a href="https://www.jerrychang.ca/writing/astro-ci-cd-with-aws-and-github-actions" target="_blank" rel="nofollow noopener noreferrer">Astro: CI/CD with AWS and Github Actions</a></li>
<li><a href="https://www.jerrychang.ca/writing/astro-cloudfont-integration" target="_blank" rel="nofollow noopener noreferrer">Astro: Setting up Cloudfront</a></li>
<li><a href="https://www.jerrychang.ca/writing/amazon-s3-cloudfront-multi-page-support-tutorial" target="_blank" rel="nofollow noopener noreferrer">Astro: Adding multi page support with Amazon S3 + Cloudfront (Tutorial)</a></li>
</ul>
<h3 id="12-s3--cloudfront-multi-page-support"><a href="#12-s3--cloudfront-multi-page-support" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>12. S3 + Cloudfront: Multi-page support</h3>
<p>Surprisingly, this does not work out of the box.</p>
<p>This isn’t really a gotcha but rather a misunderstanding of how S3 really works.</p>
<p>We address the main question of: <strong>What does a folder in S3 really mean ?</strong></p>
<p>This one definitely caught me off guard but after digging into it, it does makes sense!</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/multi-page-s3-folder-prefix.png" alt="Illustration of how S3 uses folder prefixes" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Illustration of how S3 uses folder prefixes</blockquote>
  </div>
</div>
<p><a href="https://www.jerrychang.ca/writing/amazon-s3-cloudfront-multi-page-support" target="_blank" rel="nofollow noopener noreferrer">Amazon S3 + Cloudfront: Multi-page suport</a></p>
<h3 id="13-compute-at-the-edge"><a href="#13-compute-at-the-edge" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>13. Compute at the edge</h3>
<p>Difference between Lambda @ Edge and cloudfront functions ?</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/aws-edge-functions-comparison-global-network.png" alt="Illustration of the AWS Global Network" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Illustration of the AWS Edge locations map (Source: <a href="https://aws.amazon.com/cloudfront/features/?whats-new-cloudfront.sort-by=item.additionalFields.postDateTime&whats-new-cloudfront.sort-order=desc#edge-locations" target="_blank">AWS Global Edge Network</a>)</blockquote>
  </div>
</div>
<p><a href="https://www.jerrychang.ca/writing/cloudfront-functions-versus-lambda-at-edge" target="_blank" rel="nofollow noopener noreferrer">AWS: Cloudfront functions versus Lambda@Edge</a></p>
<h3 id="14-ssg-vs-ssr-comparison-using-aws"><a href="#14-ssg-vs-ssr-comparison-using-aws" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>14. SSG vs SSR comparison using AWS</h3>
<p>Do you know the difference between SSG and SSR ?</p>
<p>Both are these are techniques for rendering website to the end-users.</p>
<p>We’ll go through the basics and show examples on how to implement it using AWS.</p>
<p>Bonus section in the article ⭐️</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/ssr-vs-ssg-complexity-comparison.png" alt="Complexity comparison between SSG, SSR and ISR" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Complexity comparison between SSG, SSR and ISR</blockquote>
  </div>
</div>
<p><a href="https://www.jerrychang.ca/writing/ssr-vs-ssg-using-aws" target="_blank" rel="nofollow noopener noreferrer">Server-side rendering (SSR) vs static site generation (SSG) using AWS</a></p>
<h3 id="15-astro-ssr-at-the-edge"><a href="#15-astro-ssr-at-the-edge" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>15. Astro SSR at the edge</h3>
<p>Deploy a astro site with SSR to S3 served through Amazon cloudfront.</p>
<p>We’re going to get hands-on and integrate the custom Lambda@Edge Astro adapter into our existing site.</p>
<p>This will allow us to create a bundle for SSR which we can deploy to the Edge!</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/astro-adapter-architecture.png" alt="AWS Architecture for our Astro site with SSR at the edge" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>AWS Architecture for our Astro site with SSR at the edge</blockquote>
  </div>
</div>
<p><a href="https://www.jerrychang.ca/writing/astro-rendering-at-the-edge" target="_blank" rel="nofollow noopener noreferrer">Astro: Going to the Edge</a></p>


Jerry Chang

Go Back

Amazon Cloudfront: Technical Series

Enjoy the content ?