Content delivery with CDN in HLD - Architecture Diagram

System Overview - Content delivery with CDN

This system delivers web content like images, videos, and web pages to users quickly and reliably. It uses a Content Delivery Network (CDN) to cache content closer to users worldwide, reducing load times and server strain.

Architecture Diagram

User
  |
  v
+----------------+
|    CDN Edge    |
+----------------+
  |
  v
+----------------+       +----------------+
| Load Balancer  |<----->|   Origin Server |
+----------------+       +----------------+
                             |
                             v
                      +----------------+
                      |   Database     |
                      +----------------+

Components

User

client

Requests content such as web pages, images, or videos

CDN Edge

cdn

Caches and delivers content close to users to reduce latency

Load Balancer

load_balancer

Distributes incoming requests evenly to origin servers

Origin Server

service

Hosts original content and serves requests not found in CDN cache

Database

database

Stores dynamic content and metadata required by origin server

Request Flow - 10 Hops

User → CDN Edge

CDN Edge → CDN Edge

CDN Edge → User

CDN Edge → Load Balancer

Load Balancer → Origin Server

Origin Server → Database

Database → Origin Server

Origin Server → Load Balancer

Load Balancer → CDN Edge

CDN Edge → User

Failure Scenario

Component Fails:CDN Edge

Impact:Users experience slower content delivery as requests bypass CDN cache and go directly to origin servers, increasing latency and load on origin.

Mitigation:System falls back to origin servers via load balancer; origin servers must be scalable to handle increased load. CDN provider redundancy and multiple edge locations reduce risk.

Architecture Quiz - 3 Questions

What is the main purpose of the CDN Edge in this system?

A To cache and deliver content close to users

B To store user data permanently

C To balance load between origin servers

D To process database queries

Design Principle

This system uses a CDN to cache content near users, reducing latency and origin server load. The load balancer ensures origin servers share traffic evenly, improving reliability and scalability.

Practice

1. What is the primary purpose of a Content Delivery Network (CDN)?

easy

A. To store user data permanently

B. To cache content closer to users for faster delivery

C. To replace the origin server completely

D. To encrypt all website content

Solution

1. Step 1: Understand CDN function

   A CDN stores copies of content in multiple locations worldwide to reduce latency.

2. Step 2: Identify main benefit

   This caching near users speeds up content delivery and reduces load on the origin server.

3. Final Answer:

   To cache content closer to users for faster delivery -> Option B

4. Quick Check:

   CDN = caching near users [OK]

Hint: CDN = cache content near users for speed [OK]

Common Mistakes:

• Thinking CDN replaces origin server
• Confusing CDN with data storage
• Assuming CDN encrypts all content

2. Which of the following is the correct sequence when a user requests content served via a CDN?

easy

A. User -> Origin Server -> CDN -> User

B. Origin Server -> User -> CDN

C. User -> CDN -> Origin Server (if needed) -> CDN -> User

D. User -> CDN -> User -> Origin Server

Solution

1. Step 1: Trace request flow in CDN

   User first contacts the CDN edge server; if content is cached, it responds immediately.

2. Step 2: Understand cache miss handling

   If content is not cached, CDN fetches it from the origin server, caches it, then serves user.

3. Final Answer:

   User -> CDN -> Origin Server (if needed) -> CDN -> User -> Option C

4. Quick Check:

   Request flow = CDN first, origin fallback [OK]

Hint: User hits CDN first, origin only if cache miss [OK]

Common Mistakes:

• Assuming user contacts origin server first
• Ignoring CDN cache miss flow
• Confusing response direction

3. Consider this simplified code snippet representing a CDN cache check:

cache = {"index.html": "content"}
request = "style.css"

if request in cache:
    response = cache[request]
else:
    response = "fetch from origin"
print(response)

What will be printed?

medium

A. fetch from origin

B. KeyError

C. content

D. None

Solution

1. Step 1: Check if request key exists in cache

   The request is "style.css" which is not in cache keys (only "index.html" exists).

2. Step 2: Determine else branch execution

   Since request not found, else branch runs, setting response to "fetch from origin".

3. Final Answer:

   fetch from origin -> Option A

4. Quick Check:

   Cache miss prints fetch from origin [OK]

Hint: If key missing in cache, else branch runs [OK]

Common Mistakes:

• Assuming cache returns default value automatically
• Expecting KeyError without else
• Confusing cache keys with values

4. A CDN is configured but users report slow content loading. Which of these is the most likely cause?

medium

A. The CDN is caching all content correctly

B. Users have slow internet unrelated to CDN

C. The origin server is down but CDN cache is fresh

D. The CDN edge servers are geographically far from users

Solution

1. Step 1: Analyze CDN slow delivery causes

   If CDN edge servers are far from users, latency increases, causing slow loading.

2. Step 2: Evaluate other options

   The CDN is caching all content correctly means caching works, so unlikely cause. The origin server is down but CDN cache is fresh means cache serves content fast. Users have slow internet unrelated to CDN is user-side, not CDN issue.

3. Final Answer:

   The CDN edge servers are geographically far from users -> Option D

4. Quick Check:

   Distance to CDN edge affects speed [OK]

Hint: Far CDN edges cause slow delivery [OK]

Common Mistakes:

• Blaming origin server when cache is fresh
• Ignoring CDN server location
• Assuming caching always fixes speed

5. You want to design a CDN system that handles sudden traffic spikes without overloading the origin server. Which combination of strategies is best?

hard

A. Use aggressive caching with long TTL and multiple CDN edge locations

B. Disable caching and let all requests go to origin server

C. Use a single CDN edge server with short TTL caching

D. Serve content only from origin server with load balancer

Solution

1. Step 1: Understand traffic spike handling

   Long TTL caching reduces origin hits; multiple edges distribute load geographically.

2. Step 2: Evaluate options for scalability

   Disable caching and let all requests go to origin server and D overload origin server. Use a single CDN edge server with short TTL caching limits caching benefits and single edge risks bottleneck.

3. Final Answer:

   Use aggressive caching with long TTL and multiple CDN edge locations -> Option A

4. Quick Check:

   Long TTL + many edges = scalable CDN [OK]

Hint: Long cache + many edges handle spikes best [OK]

Common Mistakes:

• Disabling caching under traffic spikes
• Relying on single edge server
• Ignoring TTL impact on origin load