Image for post

Serve static content from S3 with CloudFront and Origin Access Identity

How to restrict access to an S3 bucket so that your html, css, and images, are only accessible through CloudFront.

Image for post
Image for post
Basic set up — hosting a static website in S3
Image for post
Image for post
Introducing CloudFront as our Content Delivery Network
Image for post
Image for post
Image for post
S3 Bucket holding our static website content
Image for post
Image for post
Hitting index.html on S3 endpoint receives an Access Denied error
Image for post
Image for post
Our CloudFront distribution for our S3 origin
Image for post
Image for post
Hitting index.html on CloudFront endpoint receives an Access Denied error
Image for post
Image for post
Select our origin and click Edit
Image for post
Image for post
Select the options and save
Image for post
Image for post
Our static content is now served correctly via CloudFront

A note from the author

Written by

DevOps | SRE | AWS | GCP https://twitter.com/davelms