• Summary:
• Contents:

Demo architecture

• CF distribution will deliver an S3 static website

PART 1: Create and deploy a CF distribution with S3 origin

Ref: https://learn.cantrill.io/courses/1820301/lectures/41301527

1. Deploy CFN stack provided with demo (S3 bucket with static website hosting)
   • 💡 Problems of a barebones S3 static website (which we want to solve with CF):
     1. Bad performance for users outside of bucket region
     2. Big request load on origin (no caching)
     3. No HTTPS (S3 static websites only capable of delivering HTTP)
2. Create a new CF distribution, set origin domain name to the created S3 bucket
   • ‼️ By selecting the S3 bucket, the static website will be an S3 origin! If instead you put DNS name of the S3 static website hosting endpoint, CF will consider it a custom origin!
   • Screenshot
3. You can leave default values for most settings (restrict viewer access, viewer protocol policy, cache policy…)
   • “CachingOptimized” policy works for demo purposes (default TTLs)
   • Screenshot
4. ❗ Set the root default object to index.html
   • Object returned when client queries just the name of the distribution (without specifying any object) → client queries root URL / of distribution
   • Screenshot
5. Deploy the distribution (can take a while)

PART 2: Test the CF distribution

Ref: https://learn.cantrill.io/courses/1820301/lectures/41301528

1. Notice your assigned default distribution name (ends in cloudfront.net)
2. Open the distribution in your browser, refresh it a few times
   • Notice that the website is refreshed fast & immediately → Good performance
   • Because it's cached in browser and in the local edge location
3. Modify the merlin.jpg image in the S3 bucket (you can substitute it with an image of Whiskers, but make sure the new image has the same name merlin.jpg)
   • You can verify that you overwrote the image correctly by opening index.html from S3 console, latest changes should be visible via the default S3 static website endpoint