Content Delivery Networks (CDNs) function through a distributed network of edge servers positioned strategically across geographical locations. When a user requests static content (like images, CSS, or JavaScript files), the CDN routes the request to the nearest edge server rather than the origin server. This proximity reduces latency through:
// Simplified CDN routing logic (pseudo-code)
function handleRequest(userRequest) {
const edgeServer = findNearestEdgeServer(userRequest.location);
if (edgeServer.hasCachedContent(userRequest.resource)) {
return edgeServer.serveFromCache(userRequest.resource);
} else {
const originResponse = fetchFromOriginServer(userRequest.resource);
edgeServer.cacheContent(userRequest.resource, originResponse);
return originResponse;
}
}
The typical HTTP request lifecycle through a CDN:
- DNS Resolution: User's DNS query is routed to CDN's DNS infrastructure
- Edge Selection: CDN identifies optimal edge server based on geolocation and load
- Cache Check: Edge server verifies if content exists in cache (with proper TTL)
- Origin Fetch: For cache misses, the edge server retrieves from origin and caches
- Response Delivery: Content served with CDN-specific headers (e.g., X-Cache: HIT/MISS)
CDNs implement various cache invalidation methods that developers should understand:
# Example: Using cache-control headers for CDN caching
HTTP/1.1 200 OK
Content-Type: text/css
Cache-Control: public, max-age=31536000
ETag: "xyz123"
Last-Modified: Wed, 21 Oct 2022 07:28:00 GMT
Common invalidation approaches include:
- Query string versioning (
style.css?v=2.1.4
) - Path-based versioning (
/v2/assets/logo.png
) - Manual purge through CDN API
Here's how to integrate Cloudflare CDN with a web application:
// Node.js example of cache-aware static file serving
const express = require('express');
const app = express();
app.use('/static', express.static('public', {
maxAge: '1y',
immutable: true,
setHeaders: (res, path) => {
if (path.endsWith('.js')) {
res.set('X-SourceMap', ${path}.map);
}
}
}));
app.listen(3000);
Modern CDNs offer developer-centric capabilities:
// Example: Using Cloudflare Workers for edge logic
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
// Modify request at edge
const url = new URL(request.url);
url.hostname = 'origin.example.com';
// Apply country-specific logic
const country = request.cf.country;
if (country === 'GB') {
// UK-specific content modification
}
return fetch(url, request);
}
Content Delivery Networks (CDNs) operate by distributing static content across a network of geographically dispersed servers. When a user makes an HTTP request, the CDN's edge server closest to the user responds, reducing latency. This is achieved through DNS resolution that directs requests to optimal servers.
Here's a typical request flow:
1. User requests example.com/image.jpg
2. DNS resolves to CDN's edge server (e.g., cloudfront.net)
3. Edge server checks cache:
- If cached: serves immediately (HTTP 200)
- If not: fetches from origin (HTTP 304)
4. Response includes caching headers:
Cache-Control: public, max-age=31536000
ETag: "xyz123"
CDNs use various methods to handle stale content:
- Time-based expiration (Cache-Control headers)
- Manual purging via API
- Versioned URLs (e.g., /v2/image.jpg)
Here's how to configure a CDN in AWS CloudFront:
// CloudFront Distribution Configuration
{
"DistributionConfig": {
"Origins": {
"Items": [
{
"DomainName": "your-s3-bucket.s3.amazonaws.com",
"Id": "S3-Origin",
"S3OriginConfig": {
"OriginAccessIdentity": ""
}
}
]
},
"DefaultCacheBehavior": {
"TargetOriginId": "S3-Origin",
"ViewerProtocolPolicy": "redirect-to-https",
"AllowedMethods": {
"Items": ["GET", "HEAD"],
"Quantity": 2
},
"CachedMethods": {
"Items": ["GET", "HEAD"],
"Quantity": 2
}
}
}
}
Modern CDNs offer powerful features:
// Edge Computing Example (Cloudflare Workers)
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
// Modify response at edge
const response = await fetch(request)
const modified = new Response(response.body, response)
modified.headers.set('X-Edge-Processed', 'true')
return modified
}
To maximize CDN benefits:
- Implement proper cache headers
- Use content hashing for immutable files
- Leverage HTTP/2 and Brotli compression
- Set optimal TTL values based on content type