AWS CloudFront & CDN
Cache and accelerate content globally with CloudFront distributions and edge locations
Knowledge Debt detected
You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.
Explanation
CloudFront is AWS's CDN (Content Delivery Network) — it caches your content at edge locations around the world so users download from nearby servers instead of your origin.
How it works:
User in Brazil ↓ CloudFront edge location in São Paulo ← cache HIT: serves from edge (fast) ↓ (cache MISS only) Origin (S3 / EC2 / ALB in us-east-1) ← origin fetch (slower, only once)
Common use cases:
| Use case | Setup | |---|---| | Static site / SPA | S3 bucket as origin + CloudFront | | API acceleration | ALB/API Gateway as origin | | Video streaming | S3 origin + signed URLs | | Custom domain + HTTPS | ACM certificate attached to distribution |
Cache behavior — what gets cached:
/static/* → cache for 1 year (CSS, JS, images — versioned filenames) /api/* → cache for 0 s (never cache API responses) /*.html → cache for 5 min (short TTL, can invalidate on deploy)
Cache invalidation:
bash aws cloudfront create-invalidation --distribution-id E1234567890ABC --paths "/index.html" "/app.*.js" # First 1,000 invalidation paths/month are free
Signed URLs — private content:
Generate a time-limited URL for a private S3 file. URL expires in N seconds — only the intended user can download it. Used for paid video, document access, and download links.
Origin Access Control (OAC):
Set S3 bucket policy to only allow CloudFront — users cannot bypass CloudFront to access S3 directly.
Examples
Hosting a React SPA on S3 + CloudFront
The custom error response (403 → /index.html) lets React Router handle client-side routing — without it, direct URL access breaks
# 1. Build and upload to S3
npm run build
aws s3 sync dist/ s3://my-app-bucket --delete
# 2. Key CloudFront settings:
# - Origin: S3 bucket with OAC (no public S3 access)
# - Viewer protocol: redirect HTTP → HTTPS
# - Default root object: index.html
# - Custom error response: 403/404 → /index.html (200)
# ↑ This is the key setting for SPA routing!
# Without it, /about returns a 403 from S3
# 3. Invalidate on deploy
aws cloudfront create-invalidation --distribution-id E1234567890ABC --paths "/index.html"Cache headers strategy for zero-invalidation deploys
Content-hashed asset filenames + long TTL = zero CDN invalidation cost for static assets on every deploy
# Upload JS/CSS with content hash in filename + long cache
aws s3 cp dist/main.a3f9c2d1.js s3://my-app/ --cache-control "max-age=31536000, immutable"
# Upload HTML with no cache (must always be fresh)
aws s3 cp dist/index.html s3://my-app/ --cache-control "no-cache, no-store"
# Why this works:
# - JS/CSS: filename changes on every build (content hash)
# → safe to cache forever, new deploy = new URL
# - HTML: references the new hashed filenames
# → must never be stale
# On deploy: only invalidate index.html
aws cloudfront create-invalidation --distribution-id $DIST_ID --paths "/index.html"
# JS/CSS don't need invalidation — their URLs changedHow well did you understand this?