CloudFont(Content Delivery Network)

0

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:

  1. Origin – Source of content (S3 bucket, ALB, EC2, API Gateway).

  2. Edge Locations – Global endpoints where CloudFront caches content.

  3. Distribution – Configuration entity that defines origins, behaviors, and cache settings.

  4. Cache Behavior – Rules for caching (e.g., different caching for /images and /api).

  5. Viewer Protocol Policy – Enforces HTTPS.

  6. Invalidations – Used to remove cached objects manually.


βš™οΈ How CloudFront Works (Step-by-Step)

  1. A user requests https://cdn.mywebsite.com/images/logo.png.

  2. DNS routes the request to the nearest CloudFront edge.

  3. If the object is cached, it’s returned immediately.

  4. If not, CloudFront fetches it from your origin (e.g., S3).

  5. 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/*)

  1. Go to your CloudFront distribution β†’ Behaviors β†’ Create Behavior

  2. Path pattern: /static/*

  3. Cache policy: Create a new one named StaticCachePolicy

  4. 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)

  5. Compression: Enable (gzip, brotli)

  6. Viewer protocol: Redirect HTTP to HTTPS

Click Create behavior βœ…


πŸ”Ή Behavior 2: API Requests (/api/*)

  1. Add another behavior β†’ Path pattern: /api/*

  2. Cache policy: Create a new one named APICachePolicy

  3. Configure:

    • Cache key settings: Include Query strings and Headers (for dynamic API responses)

    • TTL:

      • Min TTL: 0

      • Default TTL: 10

      • Max TTL: 60

  4. Viewer protocol: Redirect HTTP to HTTPS

  5. 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:

https://d12345abcd.cloudfront.net/

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to Top