What Is AWS CloudFront?

What Is a CDN?

A CDN (Content Delivery Network) is a network of servers distributed globally. Instead of all requests hitting your origin server in one region, a CDN caches your content at dozens or hundreds of locations worldwide. A user in Singapore gets content from a Singapore edge, not from us-east-1.

CloudFront is AWS's CDN with 400+ edge locations across the world.

Core Concepts

Distribution

A distribution is the CloudFront resource you create. It has a domain like d1abc2def3.cloudfront.net. You configure one or more origins, cache behaviors, and SSL settings in a distribution.

Origin

The origin is where CloudFront fetches content from when it doesn't have it cached. Origins can be:

• S3 bucket — for static sites and file hosting
• EC2 or ALB — for dynamic applications
• Any HTTP server — including Lightsail or on-premise servers

Edge Location vs. Regional Cache

CloudFront has a two-tier caching system:

1. Edge locations — 400+ points of presence globally, closest to end users
2. Regional edge caches — 13 larger caches between edge locations and your origin

Most requests are served from an edge location. Cache misses go to the regional cache before hitting your origin — reducing origin load.

Cache Behavior

A cache behavior maps a URL path pattern to settings:

• Which origin to use
• How long to cache (TTL)
• Whether to forward query strings or headers to the origin
• Whether to compress responses (gzip/brotli)

Path pattern: /api/*   → forward to EC2, don't cache (TTL 0)
Path pattern: /*       → serve from S3, cache for 1 day (TTL 86400)

TTL (Time to Live)

How long CloudFront caches an object at the edge before checking the origin again. Set via:

• Cache-Control: max-age=86400 headers from your origin
• Default TTL setting in the cache behavior (fallback when no header is present)

Invalidation

When you deploy a new version of your app, old cached files might still be served. An invalidation tells CloudFront to clear specific paths:

aws cloudfront create-invalidation \
  --distribution-id E1ABCDEF12345 \
  --paths "/*"

First 1,000 invalidation paths per month are free; after that, $0.005 per path. A better long-term solution is cache-busting — putting a content hash in filenames (e.g., main.a3f2c1.js), which React/webpack do automatically.

Standard Pattern: S3 + CloudFront + HTTPS

This is the most common setup for hosting a React or static frontend:

User → CloudFront (edge) → S3 (origin)
         ↑ HTTPS via ACM cert
         ↑ custom domain via Route 53 ALIAS record

Steps:

1. Upload your build to an S3 bucket (with public access blocked)
2. Create a CloudFront distribution with the S3 bucket as the origin
3. Use Origin Access Control (OAC) so only CloudFront can read the S3 bucket
4. Request a certificate in AWS Certificate Manager (ACM) for your domain
5. Attach the ACM cert to your CloudFront distribution
6. Create a Route 53 ALIAS record pointing your domain to the CloudFront domain

With this setup:

• S3 is completely private (no direct public access)
• All traffic goes through CloudFront with HTTPS
• Files are served from the nearest edge location globally
• Your origin (S3) is protected from direct traffic

CloudFront vs. Serving from EC2 Directly

	EC2 Direct	EC2 + CloudFront
Latency	Distance to server	Distance to nearest edge
Origin load	Every request hits EC2	Only cache misses hit EC2
DDoS protection	None	AWS Shield Standard (free)
SSL	Managed by Nginx/Certbot	Managed by ACM in CloudFront
Cost	EC2 bandwidth out	CloudFront data transfer (often cheaper at scale)