CDN

How CDNs Work

Content Delivery Networks distribute content globally for faster access.

CDN Architecture

User → Edge Server (nearest) → Origin Server
         ↓
    Cache Hit → Return cached content
    Cache Miss → Fetch from origin, cache, return

Benefits

1. Reduced Latency: Content served from nearest edge
2. Reduced Origin Load: Edge servers handle most requests
3. High Availability: Redundancy across multiple locations
4. DDoS Protection: Edge servers absorb attacks

Popular CDNs

• Cloudflare: Free tier, easy setup
• AWS CloudFront: Deep AWS integration
• Fastly: Real-time purge, edge computing
• Akamai: Enterprise-grade
• Vercel/Netlify: Built-in for static sites

DNS Resolution

1. User requests example.com
2. DNS resolves to CDN edge server IP
3. Edge server checks cache
4. If miss, fetches from origin
5. Caches response for future requests

CDN Configuration

Cloudflare Setup

// wrangler.toml (Cloudflare Workers)
name = "my-site"
routes = [
  { pattern = "example.com/*", zone_name = "example.com" }
]

// Worker for custom caching
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  
  // Custom cache key
  const cacheKey = new Request(url.toString(), request)
  const cache = caches.default
  
  // Check cache
  let response = await cache.match(cacheKey)
  if (response) {
    return response
  }
  
  // Fetch from origin
  response = await fetch(request)
  
  // Cache response
  if (response.ok) {
    const clonedResponse = response.clone()
    clonedResponse.headers.set('Cache-Control', 'public, max-age=3600')
    event.waitUntil(cache.put(cacheKey, clonedResponse))
  }
  
  return response
}

AWS CloudFront

// CloudFront distribution config
const distributionConfig = {
  Origins: {
    Items: [
      {
        DomainName: 'origin.example.com',
        Id: 'origin-1',
        CustomOriginConfig: {
          HTTPPort: 80,
          HTTPSPort: 443,
          OriginProtocolPolicy: 'https-only',
        },
      },
    ],
  },
  DefaultCacheBehavior: {
    TargetOriginId: 'origin-1',
    ViewerProtocolPolicy: 'redirect-to-https',
    CachePolicyId: '658327ea-f89d-4fab-a63d-7e88639e58f6', // CachingOptimized
    Compress: true,
  },
  CacheBehaviors: {
    Items: [
      {
        PathPattern: '/api/*',
        TargetOriginId: 'origin-1',
        ViewerProtocolPolicy: 'redirect-to-https',
        CachePolicyId: '4135ea2d-6df8-44a3-9df3-4b5a84be39ad', // CachingDisabled
      },
    ],
  },
};

Caching Rules

// Static assets (immutable)
const staticAssets = {
  pattern: '\\\.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$',
  cacheControl: 'public, max-age=31536000, immutable',
};

// HTML pages
const htmlPages = {
  pattern: '\\\.html$|^/$',
  cacheControl: 'public, max-age=3600, must-revalidate',
};

// API responses
const apiResponses = {
  pattern: '/api/*',
  cacheControl: 'private, no-cache',
};

Purging Cache

// Cloudflare API
async function purgeCache(zoneId, apiToken, urls) {
  await fetch(
    `https://api.cloudflare.com/client/v4/zones/${zoneId}/purge_cache`,
    {
      method: 'DELETE',
      headers: {
        Authorization: `Bearer ${apiToken}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ files: urls }),
    }
  );
}

Edge Caching

Cache content at edge locations closest to users.

Edge Caching Strategies

// Cache by device type
const cacheKey = new Request(url, {
  headers: {
    'User-Agent': request.headers.get('User-Agent'),
    'Accept': request.headers.get('Accept'),
  },
});

// Cache by locale
const locale = request.headers.get('Accept-Language')?.split(',')[0] || 'en';
const cacheKey = `${url}?locale=${locale}`;

Cache Invalidation at Edge

// Versioned assets
const version = 'v1.2.3';
const assetUrl = `/static/${version}/app.js`;

// Purge specific paths
await purgeCache(zoneId, apiToken, [
  '/index.html',
  '/static/v1.2.3/*',
]);

Edge Computing

// Cloudflare Worker for edge logic
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  
  // A/B testing at edge
  const bucket = Math.random() < 0.5 ? 'A' : 'B';
  const cookie = `ab-test=${bucket}; path=/`
  
  // Rewrite URL based on bucket
  if (bucket === 'B' && url.pathname === '/') {
    url.pathname = '/new-homepage';
  }
  
  const response = await fetch(url.toString(), request)
  const newResponse = new Response(response.body, response)
  newResponse.headers.set('Set-Cookie', cookie)
  
  return newResponse
}

CDN Best Practices

1. Use immutable caching for versioned assets
2. Set appropriate TTLs for different content types
3. Implement cache invalidation for dynamic content
4. Use edge computing for personalization
5. Monitor cache hit ratios
6. Configure proper cache keys
7. Use compression at the edge