Skip to main contentSkip to user menuSkip to navigation

Amazon CloudFront

Master Amazon CloudFront: CDN setup, edge locations, caching strategies, and security features.

35 min readIntermediate
Not Started
Loading...

What is Amazon CloudFront?

Amazon CloudFront is AWS's global content delivery network (CDN) that accelerates delivery of websites, APIs, video content, and other web assets to users worldwide. With 410+ edge locations across 90+ cities in 47 countries, CloudFront brings content closer to users, dramatically reducing latency and improving user experience.

CloudFront integrates seamlessly with other AWS services like S3, EC2, and Lambda@Edge, enabling sophisticated content delivery strategies. It's trusted by Netflix for global video streaming, Spotify for music delivery, and NASA for mission-critical content distribution.

CloudFront Performance Calculator

25ms
Avg Latency
85%
Cache Hit Rate
$810
Monthly Savings
59GB
Bandwidth Saved

Edge Locations: 410 worldwide

Origin Requests: 150,000/month

Default TTL: 24h

CloudFront Distribution Types

Web Distribution

Static and dynamic content delivery with HTTP/HTTPS support.

• Website assets (HTML, CSS, JS)
• Images and media files
• API acceleration
• Custom SSL certificates
• Lambda@Edge integration

RTMP Distribution

Real-time streaming for live video and audio content.

• Live video streaming
• Real-time audio delivery
• Adobe Flash Media Server
• Low-latency streaming
• Adaptive bitrate support

API Acceleration

Optimized delivery for REST APIs and dynamic content.

• REST API optimization
• Dynamic content caching
• WebSocket support
• Intelligent routing
• Edge computing with Lambda

CloudFront Caching Architecture

Edge Locations (Tier 1)

410+ points of presence worldwide, serving content with ultra-low latency (typically <50ms).

Edge Location Request Flow
User Request → Nearest Edge Location
if (content_cached) {
  return cached_content; // Fast delivery
} else {
  fetch_from_regional_cache();
}

Regional Edge Caches (Tier 2)

13 regional caches serve multiple edge locations, reducing origin load and improving cache efficiency.

Edge → Regional Cache → Origin
• Larger cache capacity than edge locations
• Serves multiple edge locations in region
• Reduces origin server load by 70-90%

Origin Shield

Additional caching layer that minimizes load on origin servers and improves cache hit ratios.

Origin Shield Benefits:
• Collapsed forwarding to origin
• Better cache hit ratios
• Reduced origin server costs
• Improved failover resilience

Real-World CloudFront Implementations

Netflix

Serves 15+ petabytes daily through CloudFront for global 4K streaming to 230+ million subscribers.

  • • 15+ PB daily data transfer
  • • 4K Ultra HD streaming quality
  • • 190+ countries coverage
  • • Custom origin infrastructure

Spotify

Delivers music content and web assets globally with sub-50ms latency for streaming experience.

  • • Audio content acceleration
  • • Web app asset delivery
  • • Regional content optimization
  • • Mobile API acceleration

Airbnb

Optimizes image delivery and web performance for millions of property listings worldwide.

  • • Image optimization and resizing
  • • Dynamic content caching
  • • API response acceleration
  • • Mobile app performance

NASA

Handles traffic spikes during major space events, serving millions of concurrent users.

  • • Mission-critical content delivery
  • • Massive traffic spike handling
  • • High-resolution media distribution
  • • Global accessibility requirements

CloudFront Security Features

Built-in Protection

  • • AWS Shield Standard (DDoS protection)
  • • SSL/TLS encryption with ACM certificates
  • • Origin Access Control (OAC)
  • • Signed URLs and cookies for private content
  • • Geographic restrictions (geo-blocking)
  • • Field-level encryption for sensitive data

Advanced Security

  • • AWS WAF integration (Web Application Firewall)
  • • Real-time threat intelligence
  • • Custom security rules and rate limiting
  • • Bot detection and mitigation
  • • OWASP Top 10 protection
  • • HTTP security headers injection

Edge Computing Options

Lambda@Edge

Full Node.js/Python runtime for complex logic at edge locations.

  • • Request/response manipulation
  • • A/B testing and personalization
  • • Authentication and authorization
  • • Image resizing and optimization
  • • SEO-friendly URL rewriting
  • • Real-time content generation
Lambda@Edge Example
exports.handler = async (event) => {
  const request = event.Records[0].cf.request;
  
  // Device detection
  const isMobile = request.headers[
    'cloudfront-is-mobile-viewer'
  ]?.[0]?.value === 'true';
  
  if (isMobile) {
    request.uri = '/mobile' + request.uri;
  }
  
  return request;
};

CloudFront Functions

Lightweight JavaScript functions for simple transformations.

  • • HTTP header manipulation
  • • URL redirects and rewrites
  • • Request/response validation
  • • Cache key normalization
  • • Simple authorization checks
  • • Sub-millisecond execution
CloudFront Function Example
function handler(event) {
  var request = event.request;
  var uri = request.uri;
  
  // Append index.html to requests that end with '/'
  if (uri.endsWith('/')) {
    request.uri += 'index.html';
  }
  
  return request;
}

CloudFront Configuration Best Practices

✅ Do

  • • Enable compression for text content (HTML, CSS, JS)
  • • Use appropriate TTL values per content type
  • • Implement Origin Access Control (OAC) for S3
  • • Enable HTTP/2 and HTTP/3 support
  • • Monitor cache hit ratios (aim for 85%+)
  • • Use CloudFront real-time logs
  • • Configure custom error pages
  • • Enable security headers injection

❌ Don't

  • • Set high TTL for dynamic/personalized content
  • • Forward unnecessary headers or cookies
  • • Use wildcards in cache invalidations
  • • Ignore viewer protocol policies
  • • Mix HTTP and HTTPS without redirects
  • • Forget to configure health checks
  • • Cache private or sensitive data
  • • Use default cache behaviors for everything

Optimal TTL Configuration

Static Assets
1 year (31536000s)
CSS, JS, Images
Semi-Static
1 day (86400s)
HTML, API responses
Dynamic
0s (no-cache)
User-specific data
No quiz questions available
Questions prop is empty