• Summary:
• Contents:

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
4. If you refresh the CF distribution tab in your browser, notice that the original image is still being loaded instead of the updated image (because it's cached)
   • You can delete cache in your browser and refresh the CF distribution tab, it should still show the original image instead of updated image (because the edge location still has original image cached)
   • 💡 We won't see updated image until cache TTL of image object expires… or until we do a cache invalidation in CF (costs money)
5. If you have an app where objects must be updated regularly, consider:
   • Reducing cache TTL for objects, especially early enough before updates
   • Using versioned object names (merlin_v1.jpg, merlin_v2.jpg…) → never overwrites objects
   • Performing cache invalidation (costs money, generally use only to fix errors)
6. Notice how CF distribution can use HTTPS, whereas default endpoint for S3 static website can only use HTTP (if you force HTTPS there, it doesn't load)
   • Screenshot of default SSL certificate used for distribution (can get it from your browser)