Why CDN & Edge Computing

Edge computing pushes compute and data closer to end users. CDNs cache content at edge locations worldwide, reducing latency and origin load. Together, they enable sub-50ms response times globally.

CDN Architecture

        ┌─────────────────────────────────────────────────┐
        │              Users (Global)                     │
        └────────────────────┬────────────────────────────┘
                             │
              ┌──────────────┼──────────────┐
              │              │              │
     ┌────────┴───────┐ ┌───┴────────┐ ┌───┴────────┐
     │  Edge Location  │ │  Edge     │ │  Edge     │
     │  (Tokyo)        │ │  (London) │ │  (São    │
     │  ┌───────────┐  │ │  ┌──────┐ │ │  Paulo)  │
     │  │   Cache   │  │ │  │Cache │ │ │  ┌──────┐│
     │  └───────────┘  │ │  └──────┘ │ │  │Cache ││
     └────────┬────────┘ └─────┬──────┘ └───┬──────┘
              │                │            │
              └────────────────┼────────────┘
                               │
                      ┌────────┴────────┐
                      │  Origin Server  │
                      │  (us-east-1)    │
                      └─────────────────┘

Pattern 1: CloudFront with Lambda@Edge

Process requests at edge locations for personalization and A/B testing.

// Lambda@Edge for A/B testing at the edge
exports.handler = async (event) => {
  const request = event.Records[0].cf.request;
  const headers = request.headers;
  
  // Check for A/B test cookie
  const cookie = headers['cookie']?.[0]?.value || '';
  const abMatch = cookie.match(/ab_test=([a-z]+)/);
  const group = abMatch ? abMatch[1] : determineGroup(headers);
  
  // Rewrite URI based on test group
  if (group === 'variant-b') {
    request.uri = request.uri.replace('/v1/', '/v2/');
  }
  
  // Set response header for tracking
  request.headers['x-ab-group'] = [{ key: 'X-AB-Group', value: group }];
  
  return request;
};

function determineGroup(headers) {
  // Hash user agent + accept-language for consistent bucketing
  const hash = simpleHash(
    (headers['user-agent']?.[0]?.value || '') +
    (headers['accept-language']?.[0]?.value || '')
  );
  return hash % 100 < 10 ? 'variant-b' : 'variant-a';
}

Pattern 2: Multi-Layer Caching

Implement browser, CDN, and origin caching with proper cache headers.

# Cache-Control header strategy
CACHE_HEADERS = {
    # Static assets - immutable, long cache
    'static-assets': {
        'Cache-Control': 'public, max-age=31536000, immutable',
        'Vary': 'Accept-Encoding',
    },
    
    # API responses - short cache, stale-while-revalidate
    'api-responses': {
        'Cache-Control': 'public, max-age=60, stale-while-revalidate=300',
        'Vary': 'Authorization, Accept',
    },
    
    # HTML pages - moderate cache
    'html-pages': {
        'Cache-Control': 'public, max-age=300, stale-while-revalidate=60',
        'Vary': 'Accept-Encoding',
    },
    
    # Dynamic content - no cache
    'dynamic': {
        'Cache-Control': 'private, no-cache, no-store, must-revalidate',
    },
}

def set_cache_headers(response_type, response):
    headers = CACHE_HEADERS.get(response_type, CACHE_HEADERS['dynamic'])
    for key, value in headers.items():
        response.headers[key] = value
    return response

Pattern 3: Edge-Side Rendering with CloudFront Functions

Transform content at the edge without Lambda cold starts.

// CloudFront Function for URL normalization (runs in <1ms)
function handler(event) {
  var request = event.request;
  var uri = request.uri;
  var querystring = request.querystring;
  
  // Remove trailing slash (except root)
  if (uri !== '/' && uri.endsWith('/')) {
    uri = uri.slice(0, -1);
  }
  
  // Add .html extension for clean URLs
  if (!uri.includes('.')) {
    uri = uri + '.html';
  }
  
  // Forward only necessary headers
  request.headers = {
    'host': request.headers['host'],
    'cloudfront-is-mobile-viewer': request.headers['cloudfront-is-mobile-viewer'],
  };
  
  request.uri = uri;
  return request;
}

Pattern 4: Origin Shield for Reducing Origin Load

Use CloudFront Origin Shield to add a centralized caching layer.

// Terraform CloudFront with Origin Shield
resource "aws_cloudfront_distribution" "main" {
  origin {
    domain_name = aws_s3_bucket.assets.bucket_regional_domain_name
    origin_id   = "S3-assets"
    
    s3_origin_config {
      origin_access_identity = aws_cloudfront_origin_access_identity.main.cloudfront_access_identity_path
    }
  }
  
  origin {
    domain_name = aws_lb.api.dns_name
    origin_id   = "API-origin"
    
    origin_shield {
      enabled              = true
      origin_shield_region = "us-east-1"  # Central shield region
    }
    
    custom_origin_config {
      http_port              = 80
      https_port             = 443
      origin_protocol_policy = "https-only"
      origin_ssl_protocols   = ["TLSv1.2"]
    }
  }
  
  default_cache_behavior {
    allowed_methods        = ["GET", "HEAD", "OPTIONS"]
    cached_methods         = ["GET", "HEAD"]
    target_origin_id       = "S3-assets"
    viewer_protocol_policy = "redirect-to-https"
    
    # Edge TTL settings
    min_ttl     = 0
    default_ttl = 86400
    max_ttl     = 31536000
    
    forwarded_values {
      query_string = false
      cookies { forward = "none" }
    }
  }
  
  # API behavior - no cache
  ordered_cache_behavior {
    path_pattern           = "/api/*"
    allowed_methods        = ["GET", "HEAD", "OPTIONS", "PUT", "POST", "PATCH", "DELETE"]
    cached_methods         = ["GET", "HEAD"]
    target_origin_id       = "API-origin"
    viewer_protocol_policy = "https-only"
    
    min_ttl     = 0
    default_ttl = 0
    max_ttl     = 0
    
    forwarded_values {
      query_string = true
      headers      = ["Authorization", "Content-Type", "Origin"]
      cookies { forward = "all" }
    }
  }
}

Pattern 5: Edge Database with Durable Objects

Use Cloudflare Durable Objects or CloudFront Workers for edge-stateful applications.

// Cloudflare Durable Object for edge state
export class EdgeCounter {
  constructor(state, env) {
    this.state = state;
  }
  
  async fetch(request) {
    const url = new URL(request.url);
    
    if (url.pathname === '/increment') {
      // Durable Object maintains state across requests
      let count = await this.state.storage.get('count') || 0;
      count++;
      await this.state.storage.put('count', count);
      
      return new Response(JSON.stringify({ count }), {
        headers: { 'Content-Type': 'application/json' },
      });
    }
    
    return new Response('Not found', { status: 404 });
  }
}

Performance Benchmarks

Follow-Up Questions

1. How do you handle cache invalidation for user-specific content without purging the entire CDN cache?
2. What are the trade-offs between CloudFront Functions, Lambda@Edge, and Cloudflare Workers for edge computing?
3. How would you design a CDN strategy for a streaming video platform with DRM content?