CDN Configuration and Origin Shield Setup

How CDNs Work

A Content Delivery Network (CDN) caches your content on servers distributed globally. When a user requests your site, the CDN serves the response from the nearest edge server instead of your origin.

Without CDN:
User (Tokyo) → Origin Server (Virginia) → 200ms round trip

With CDN:
User (Tokyo) → CDN Edge (Tokyo) → 5ms round trip (cache hit)
                                 → Origin (cache miss, then cached)

CDNs dramatically reduce latency, decrease origin server load, and provide DDoS mitigation.

Cache-Control Headers

Your origin server controls what the CDN caches via HTTP headers:

# Cache static assets for 1 year (immutable = never revalidate)
Cache-Control: public, max-age=31536000, immutable

# Cache HTML for 5 minutes, revalidate after
Cache-Control: public, max-age=300, must-revalidate

# Never cache (API responses, user-specific content)
Cache-Control: no-store, max-age=0

# Cache at CDN but not in browser
Cache-Control: s-maxage=3600, max-age=0

Cloudflare Configuration

Cloudflare is the most widely used CDN, operating as a reverse proxy:

# Page Rules for cache control
*.example.com/static/*   → Cache Level: Cache Everything, Edge TTL: 1 month
*.example.com/api/*      → Cache Level: Bypass
example.com/             → Cache Level: Standard (respect origin headers)

Key Cloudflare settings: - SSL Mode — Full (Strict) requires a valid certificate on your origin. - Always Use HTTPS — Redirects HTTP to HTTPS at the edge. - Brotli — Enable for better compression than gzip. - Auto Minify — Minify HTML, CSS, and JavaScript at the edge.

Origin Shield

An origin shield is an intermediate cache layer between CDN edge servers and your origin:

Without Origin Shield:
Edge (Tokyo) → Origin (miss)
Edge (London) → Origin (miss)
Edge (Sydney) → Origin (miss)
# Origin handles 3 requests for the same content

With Origin Shield (Virginia):
Edge (Tokyo) → Shield (Virginia) → Origin (1 miss)
Edge (London) → Shield (Virginia) → Cache hit
Edge (Sydney) → Shield (Virginia) → Cache hit
# Origin handles 1 request; shield serves the rest

On AWS CloudFront, enable Origin Shield in the distribution settings. Choose a shield region close to your origin server.

Cache Purging

When content changes, you need to invalidate the CDN cache:

# Cloudflare: Purge specific URLs
curl -X POST "https://api.cloudflare.com/client/v4/zones/ZONE_ID/purge_cache" \
  -H "Authorization: Bearer API_TOKEN" \
  -H "Content-Type: application/json" \
  --data '{"files":["https://example.com/page.html"]}'

# Cloudflare: Purge everything (use sparingly)
curl -X POST "https://api.cloudflare.com/client/v4/zones/ZONE_ID/purge_cache" \
  -H "Authorization: Bearer API_TOKEN" \
  --data '{"purge_everything":true}'

# CloudFront: Create invalidation
aws cloudfront create-invalidation \
  --distribution-id DIST_ID \
  --paths "/page.html" "/css/*"

Best Practices

• Cache-bust with filenames — Use hashed filenames for static assets (app.a1b2c3.js). Set max-age=31536000, immutable. Never purge, never stale.
• Short TTL for HTML — Cache HTML for 5-60 seconds at the edge. This protects the origin while ensuring fresh content.
• Vary header — If responses differ by Accept-Encoding or Accept-Language, include the Vary header so the CDN caches each variant separately.
• Monitor cache hit ratio — Aim for 90%+ cache hit ratio on static assets. Below 80% indicates misconfigured cache headers.