Stop 05 · Storage ServicesTopics · 8/9

CDN Integration With Storage

In short

Serving a college fest website's images straight from a bucket works, until the aftermovie goes viral. Put a CDN in front and files load faster everywhere, while the bucket stays private.

Placing a CDN in front of object storage to serve static content (images, videos, downloads) with low latency globally — a common, high-impact pattern connecting Phase 2's CDN concept directly to storage.

The blob character on a bicycle with a bundle of newspapers tosses one to a house.

Think of it like this

The newspaper vendor network

The printing press doesn't deliver to each house. Bundles go to local vendors at dawn, and each vendor cycles round their own lanes. The press is your bucket. The vendors are CDN edges near your users.

Watch it happen

CloudFront in front of a private bucket

User

CDN edge

Private S3

GET bucket URL

1/6Someone tries to fetch an image directly from the bucket.

The big ideas

What you need to know

Bucket stays private

Origin access control (OAC) lets only your CDN read from the bucket. Nobody can bypass the CDN.

Faster for everyone

Users fetch from a nearby edge. Your bucket sees a fraction of the traffic.

Often cheaper

Serving cached files from the CDN can cost less than sending every request out of the bucket.

Updating files

Use versioned file names for assets, or create an invalidation when a file must change right away.

See it in code

Walk through the code

json

1{2  "Version": "2012-10-17",3  "Statement": [{4    "Effect": "Allow",5    "Principal": { "Service": "cloudfront.amazonaws.com" },6    "Action": "s3:GetObject",7    "Resource": "arn:aws:s3:::fest-assets/*",8    "Condition": {9      "StringEquals": {10        "AWS:SourceArn": "arn:aws:cloudfront::111122223333:distribution/EDFDVBD6EXAMPLE"11      }12    }13  }]14}

1/2Allow the CloudFront service to read objects in this bucket, and nothing else.

The bucket policy CloudFront's OAC setup asks you to add. Only that one distribution can read objects.

Save yourself the pain

Common mistakes

Oops

Making the bucket public and also adding a CDN.

Do this instead

Then people can skip the CDN entirely. Keep the bucket private and allow only the distribution through OAC.

Oops

Overwriting style.css and wondering why users see the old one.

Do this instead

Edges still hold the cached copy. Use hashed names like style.3f9a.css, or invalidate the path.

Your mission

Private bucket, public site

~40 min

Quick check

What does origin access control (OAC) achieve?

Go deeper

1Set up a CDN distribution pointing to a storage bucket serving static assets.
2Test load times for the same asset with and without the CDN from different locations.
3Learn why this pattern also reduces direct load (and cost) on the origin storage.