Back to: AWS-Basics-Advanced
AWS CloudFront β Content Delivery Network (CDN) Explained
π What is AWS CloudFront?
Amazon CloudFront is a Content Delivery Network (CDN) service that delivers your websiteβs static and dynamic content (HTML, CSS, JS, images, videos, APIs) to users globally with low latency and high transfer speed.
Instead of every user connecting directly to your origin server (like S3, EC2, or ALB), CloudFront caches your content at edge locations around the world.
When a user makes a request:
-
CloudFront routes it to the nearest edge location.
-
If the content is cached, it is delivered instantly.
-
If not, CloudFront fetches it from the origin, caches it, and then delivers it.
π§ Why CloudFront is Useful
Benefit | Description |
---|---|
π Global Edge Network | Delivers content from the nearest edge location, reducing latency. |
β‘ Faster Performance | Caches frequently accessed data for speed. |
π‘οΈ Security | Integrated with AWS WAF & Shield for protection from DDoS and web exploits. |
π° Cost Optimization | Reduces load on origin servers (S3, EC2, ALB), saving data transfer cost. |
π§© Customizable Caching | You can control caching behavior based on path, headers, query strings, etc. |
π HTTPS Support | Automatically provides SSL/TLS certificates using ACM. |
ποΈ CloudFront Architecture Overview
Components:
-
Origin β Source of content (S3 bucket, ALB, EC2, API Gateway).
-
Edge Locations β Global endpoints where CloudFront caches content.
-
Distribution β Configuration entity that defines origins, behaviors, and cache settings.
-
Cache Behavior β Rules for caching (e.g., different caching for
/images
and/api
). -
Viewer Protocol Policy β Enforces HTTPS.
-
Invalidations β Used to remove cached objects manually.
βοΈ How CloudFront Works (Step-by-Step)
-
A user requests
https://cdn.mywebsite.com/images/logo.png
. -
DNS routes the request to the nearest CloudFront edge.
-
If the object is cached, itβs returned immediately.
-
If not, CloudFront fetches it from your origin (e.g., S3).
-
The response is cached for a defined duration (TTL) and then served to future users.
π§© Creating a Custom Cache Behavior
A custom cache behavior lets you apply different caching rules for specific paths, headers, or query strings.
This is helpful when you want:
-
Longer cache for static files (e.g., images, CSS)
-
Short cache for APIs or frequently updated content
-
Different caching for logged-in vs. guest users
π§ Use Case Example
Scenario:
You have an e-commerce website:
-
Static files:
/static/*
(images, CSS, JS) β can be cached for 1 day -
API requests:
/api/*
β should be cached for only 10 seconds
Weβll create two cache behaviors for these.
π οΈ Steps to Create Custom Cache Settings in CloudFront
Step 1: Open CloudFront Console
Go to AWS Console β CloudFront β Distributions β Create Distribution
Step 2: Select Origin
-
Origin domain: Choose your origin (S3, ALB, EC2, or custom domain)
-
Example:
myapp-alb-123456.us-east-1.elb.amazonaws.com
-
Leave Origin Path empty (unless you want to point to a subdirectory)
Step 3: Configure Default Behavior
This will handle all requests not covered by other rules.
-
Viewer protocol policy: Redirect HTTP to HTTPS
-
Allowed HTTP methods: GET, HEAD, OPTIONS
-
Cache policy: Use managed policy
CachingOptimized
(for static content)
Step 4: Add Custom Cache Behavior
Now letβs add two behaviors.
πΉ Behavior 1: Static Content (/static/*
)
-
Go to your CloudFront distribution β Behaviors β Create Behavior
-
Path pattern:
/static/*
-
Cache policy: Create a new one named
StaticCachePolicy
-
Configure:
-
Cache key settings: None (default)
-
TTL (Time to Live):
-
Min TTL:
3600
seconds (1 hour) -
Default TTL:
86400
seconds (1 day) -
Max TTL:
604800
seconds (7 days)
-
-
-
Compression: Enable (gzip, brotli)
-
Viewer protocol: Redirect HTTP to HTTPS
Click Create behavior β
πΉ Behavior 2: API Requests (/api/*
)
-
Add another behavior β Path pattern:
/api/*
-
Cache policy: Create a new one named
APICachePolicy
-
Configure:
-
Cache key settings: Include Query strings and Headers (for dynamic API responses)
-
TTL:
-
Min TTL:
0
-
Default TTL:
10
-
Max TTL:
60
-
-
-
Viewer protocol: Redirect HTTP to HTTPS
-
Allowed HTTP methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
Click Create behavior β
Step 5: Attach SSL Certificate
Under Settings β Alternate Domain Names (CNAMEs)
Add: cdn.mywebsite.com
Attach your ACM certificate from AWS Certificate Manager (for HTTPS support).
Step 6: Deploy Distribution
Click Create Distribution and wait until the status becomes Deployed.
Your CloudFront URL will look like: