Full Stack • Java • System Design • Cloud • AI Engineering

CloudFront with Amazon S3

Learn how to use Amazon CloudFront with Amazon S3 to build secure, high-performance, globally distributed web applications. This guide covers CloudFront architecture, S3 integration, Origin Access Control (OAC), bucket policies, caching, HTTPS, and production best practices.

Introduction

Modern applications serve millions of users across the world.

If every user downloads files directly from a single AWS Region, users who are far from that Region experience:

  • Higher latency
  • Slower downloads
  • Increased server load
  • Higher bandwidth costs

Amazon CloudFront solves these problems.

CloudFront is AWS's Content Delivery Network (CDN) that caches your content at AWS Edge Locations around the world.

Instead of every request reaching your S3 bucket, CloudFront serves cached content from the nearest edge location.

Learning Objectives

After completing this article, you will understand:

  • What is Amazon CloudFront?
  • What is a CDN?
  • Why CloudFront is needed
  • CloudFront Architecture
  • Edge Locations
  • Origin Servers
  • S3 Integration
  • Origin Access Control (OAC)
  • Bucket Policies
  • HTTPS
  • Cache Behavior
  • Cache Invalidation
  • CloudFront Security
  • Cost Optimization
  • Production Best Practices

What is a CDN?

CDN stands for

Content Delivery Network

A CDN stores copies of your static content closer to users.

Instead of downloading data from one AWS Region, users download it from the nearest AWS Edge Location.

Without CloudFront

flowchart LR
    U1[USA User]
    U2[India User]
    U3[Australia User]
    S3[(Amazon S3 - us-east-1)]

    U1 --> S3
    U2 --> S3
    U3 --> S3

Problems:

  • Higher latency
  • More S3 requests
  • Slower website
  • Higher bandwidth usage

With CloudFront

flowchart LR
    U1[USA User]
    U2[India User]
    U3[Australia User]

    CF[Amazon CloudFront]

    S3[(Amazon S3)]

    U1 --> CF
    U2 --> CF
    U3 --> CF

    CF --> S3

Advantages:

  • Faster downloads
  • Lower latency
  • Global availability
  • Reduced S3 traffic
  • Better user experience

CloudFront Components

Component Description
Distribution CloudFront configuration
Origin Backend source (S3, ALB, EC2)
Edge Location Global cache server
Cache Stored content
Behavior Routing rules
Origin Access Control Secure S3 access
Invalidations Remove cached content

What Can CloudFront Serve?

CloudFront supports:

  • Images
  • CSS
  • JavaScript
  • Videos
  • PDFs
  • ZIP files
  • REST APIs
  • GraphQL APIs
  • Static websites
  • Dynamic websites

Real-Time Use Cases

Website Hosting

React
Angular
Next.js
Vue

Static assets stored in S3

↓

CloudFront

↓

Users worldwide

Profile Images

profile.png

Stored in S3

↓

Cached globally

↓

Displayed instantly

Video Streaming

video.mp4

↓

CloudFront

↓

Fast streaming

PDF Downloads

invoice.pdf

↓

CloudFront

↓

Download from nearest edge

CloudFront High-Level Architecture

flowchart TD
    USER[Users Worldwide]

    EDGE[CloudFront Edge Location]

    ORIGIN[(Amazon S3)]

    USER --> EDGE
    EDGE --> ORIGIN

Enterprise Architecture

flowchart TD
    U[Users / Browser]
    CF[Amazon CloudFront]
    WAF[AWS WAF]
    S3[Amazon S3 Static Content]
    API[Spring Boot API]
    DB[(Amazon Aurora Database)]

    U --> CF
    CF --> WAF
    WAF --> S3
    WAF --> API
    API --> DB

CloudFront serves:

  • Static files

Spring Boot serves:

  • APIs

CloudFront Request Flow

flowchart LR

User

CloudFront

Cache

S3

User --> CloudFront
CloudFront --> Cache
Cache --> S3

Step 1

User requests

logo.png

Step 2

CloudFront checks cache.

If available

↓

Return immediately.

If not

↓

Download from S3.

↓

Store in cache.

↓

Return to user.

Cache Hit

User

↓

CloudFront

↓

Cache Found

↓

Return File

Fast response.

Cache Miss

User

↓

CloudFront

↓

Cache Missing

↓

S3

↓

Cache

↓

User

Edge Locations

CloudFront has hundreds of Edge Locations globally.

Example:

Dallas

New York

London

Mumbai

Singapore

Sydney

Tokyo

Users connect automatically to the nearest location.

Origin

Origin is where CloudFront fetches data.

Common origins:

  • Amazon S3
  • EC2
  • ALB
  • API Gateway
  • Spring Boot Application
  • Custom Origin

S3 as Origin

flowchart LR
    B[User Browser] --> CF[Amazon CloudFront CDN]
    CF --> S3[Amazon S3 Static Website Bucket]

Most common architecture.

Creating S3 Bucket

AWS Console

↓

S3

↓

Create Bucket

Example:

Bucket Name

codewithvenu-static-assets

Region

us-east-1

Enable

  • Versioning
  • Default Encryption

Keep

Block Public Access

Enabled

Bucket Structure

codewithvenu-static-assets

images/

css/

js/

pdf/

videos/

Upload Sample Files

Example

logo.png

style.css

app.js

guide.pdf

banner.jpg

Verify Bucket

AWS CLI

aws s3 ls

Output

codewithvenu-static-assets

List files

aws s3 ls s3://codewithvenu-static-assets

Create CloudFront Distribution

AWS Console

↓

CloudFront

↓

Create Distribution

Origin

Amazon S3

Choose bucket

codewithvenu-static-assets

Origin Access

Old approach

Origin Access Identity (OAI)

Recommended approach

Origin Access Control (OAC)

What is OAC?

Origin Access Control securely allows CloudFront to access your private S3 bucket.

Users cannot access S3 directly.

Only CloudFront can.

OAC Architecture

flowchart LR
    user["Users"]
    cloudfront["CloudFront"]
    oac["Origin Access Control (OAC)"]
    bucket["Private S3 Bucket"]

    user --> cloudfront
    cloudfront --> oac
    oac --> bucket

Why OAC?

Benefits

  • Better security
  • IAM integration
  • Supports new AWS features
  • Replaces OAI
  • Private bucket

Private Bucket

Never expose bucket publicly.

Wrong

Public Read Access

Correct

Private Bucket

↓

CloudFront

↓

Users

Bucket Policy

Allow

CloudFront

Deny

Everyone else.

Example architecture

flowchart LR
    U[User]
    CF[CloudFront]
    S3[Private S3]

    U -.-> S3
    U --> CF
    CF --> S3

HTTPS

CloudFront automatically supports HTTPS.

Benefits

  • Secure communication
  • Encryption
  • Better SEO
  • Browser trust

HTTP vs HTTPS

HTTP

Plain Text

HTTPS

Encrypted

Always use HTTPS.

Cache Behavior

Cache behavior defines:

  • Path pattern
  • Allowed methods
  • TTL
  • Compression
  • Viewer protocol policy

Example

/images/*

Different cache policy.

TTL

TTL

Time To Live

Example

1 Hour

24 Hours

7 Days

Longer TTL

↓

Better performance

↓

Lower origin requests

Compression

Enable

  • GZIP
  • Brotli

Benefits

  • Smaller files
  • Faster downloads
  • Lower bandwidth

Object Versioning

Instead of

logo.png

Use

logo-v2.png

or

logo.png?v=2

Avoids unnecessary invalidations.

CloudFront Security

Enable:

  • HTTPS
  • OAC
  • AWS WAF
  • Shield Standard
  • Private Bucket

Never expose S3 directly.

Cost Optimization

Use:

  • Cache static files
  • Long TTL
  • Compression
  • Correct cache behavior
  • Object versioning

Reduces:

  • S3 requests
  • Bandwidth
  • Cost

Best Practices

  • Keep bucket private
  • Use Origin Access Control
  • Enable HTTPS
  • Enable Compression
  • Use Versioning
  • Cache static assets
  • Monitor CloudFront metrics
  • Use AWS WAF
  • Use Shield Standard
  • Use Lifecycle Policies for S3
  • Enable Logging
  • Use CloudFront for static content
  • Keep APIs separate from static assets

Summary

In this part, we learned:

  • What CloudFront is
  • CDN fundamentals
  • CloudFront architecture
  • Edge Locations
  • S3 as Origin
  • Origin Access Control (OAC)
  • Private bucket architecture
  • HTTPS
  • Cache behavior
  • TTL
  • Compression
  • Security best practices
Loading likes...

Comments

Share a question, correction, or practical insight about this article.

Loading approved comments...