After this lesson, you will be able to: Configure CloudFront as a CDN: distributions, origins, cache behaviors, with S3 and custom origins.
CloudFront is AWS's CDN. Serves static + dynamic content from edge locations worldwide. Reduces latency + origin load.
Distribution: a CDN deployment. Has a unique CloudFront URL (or your custom domain). Origin: where to fetch content if not cached. Can be S3, ALB, EC2, or any HTTPS endpoint. Behavior: path-based rules. e.g. `/api/*` → origin: ALB (no cache); `/*` → origin: S3 (cache for 1 day). TTL: how long to cache. Set per behavior + can be overridden by Cache-Control headers.
CloudFront respects your Cache-Control headers.
# Static asset with content hash in filename, cache foreverCache-Control: public, max-age=31536000, immutable# HTML, never cache; always check originCache-Control: no-store# Dynamic API response that can be stale brieflyCache-Control: public, max-age=60, s-maxage=300, stale-while-revalidate=60# max-age, browser cache 60s# s-maxage, CDN cache 300s# stale-while-revalidate, serve stale for 60s after expiry while fetching fresh# In Next.js: export const revalidate = 60;# In Express: res.set('Cache-Control', 'public, max-age=60, s-maxage=300')
1. Upload site to private S3 bucket (no public access). 2. Create CloudFront distribution; origin = S3 bucket. 3. Use OAC (Origin Access Control) to let CloudFront read the bucket; bucket stays private to the public. 4. Point your domain at the CloudFront URL via Route 53. Free tier: 1TB egress + 10M requests / month. Generous for hobby + small commercial. Vercel / Netlify do this for you behind the scenes.
Treating CloudFront as 'set max-age to a year and forget'. Updates won't reach users. Cache-Control: public on responses with auth/cookies, CDN caches and serves to wrong user. Use private + scope by header. No HTTPS on the origin. CloudFront → origin should be HTTPS to prevent man-in-the-middle. Skipping a custom domain. The default `<id>.cloudfront.net` URL doesn't look professional. Forgetting Lambda@Edge / CloudFront Functions for header rewriting. Useful for redirects, A/B routing, auth. Cheap.
Pick the most likely cause.
Sign in and purchase access to unlock this lesson.