DEV Community

ahmet gedik
ahmet gedik

Posted on

Cloudflare Page Rules for Multi-Region Content Delivery

#webdev #cloudflare #performance #tutorial

Cloudflare's free tier is remarkably powerful for multi-region content delivery. Here's how I configured it for TopVideoHub, serving users across 9 Asia-Pacific regions.

The Setup

TopVideoHub serves trending video content from US, GB, JP, KR, TW, SG, VN, TH, and HK. Users are distributed across these regions, so we need:

  • Low latency to Asian cities (Tokyo, Seoul, Singapore, Hong Kong)
  • SSL without origin certificates
  • DDoS protection on a budget

Cloudflare's free tier provides all of this.

SSL Configuration: Flexible Mode

Our origin server (shared hosting) doesn't have a Let's Encrypt certificate. We use Cloudflare's Flexible SSL mode:

Client <--HTTPS--> Cloudflare <--HTTP--> Origin
Enter fullscreen mode Exit fullscreen mode

This gives users HTTPS without requiring any SSL setup on the origin server.

The gotcha: you must handle the redirect loop. Without special handling, your server sees HTTP requests and tries to redirect to HTTPS, which goes through Cloudflare, which sends HTTP to origin, which redirects again... infinite loop.

Fix in .htaccess:

# Prevent redirect loop with Cloudflare Flexible SSL
RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
Enter fullscreen mode Exit fullscreen mode

The key is checking X-Forwarded-Proto (set by Cloudflare) instead of HTTPS (which is always off with Flexible mode).

Cache Configuration

Static assets should be cached at Cloudflare's edge. HTML pages should not be edge-cached (we let LiteSpeed handle that).

# Cache static assets for 30 days
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpeg "access plus 30 days"
    ExpiresByType image/png "access plus 30 days"
    ExpiresByType image/webp "access plus 30 days"
    ExpiresByType text/css "access plus 7 days"
    ExpiresByType application/javascript "access plus 7 days"
</IfModule>
Enter fullscreen mode Exit fullscreen mode

For HTML responses, we set Cache-Control headers from PHP:

// HTML pages: cache at browser level but not Cloudflare edge
header('Cache-Control: public, max-age=10800, stale-while-revalidate=7200');
// LiteSpeed handles server-side caching
header('X-LiteSpeed-Cache-Control: public, max-age=10800');
Enter fullscreen mode Exit fullscreen mode

Security Headers

Cloudflare makes it easy to add security headers without touching server config:

// Set from PHP for consistency
header('X-Content-Type-Options: nosniff');
header('X-Frame-Options: SAMEORIGIN');
header('Referrer-Policy: strict-origin-when-cross-origin');
header('Permissions-Policy: camera=(), microphone=(), geolocation=()');
Enter fullscreen mode Exit fullscreen mode

Performance Features (Free Tier)

These Cloudflare features are available free and worth enabling:

  1. Brotli compression — Smaller than gzip, supported by all modern browsers
  2. HTTP/2 — Multiplexed connections, header compression
  3. HTTP/3 (QUIC) — Better performance on lossy mobile connections (important for SEA markets)
  4. Early Hints — Send 103 status code to preload critical resources
  5. Rocket Loader — Async JavaScript loading (test carefully, can break some scripts)

Regional Edge Locations

Cloudflare has PoPs in all the cities that matter for TopVideoHub:

  • Tokyo (JP users)
  • Seoul (KR users)
  • Taipei (TW users)
  • Singapore (SG users)
  • Hong Kong (HK users)
  • Ho Chi Minh City (VN users)
  • Bangkok (TH users)

This means static assets are served from local edge locations, reducing latency from 200-300ms (origin round-trip) to 5-20ms (edge).

DNS Configuration

Use Cloudflare as your authoritative DNS (not just a proxy) for best performance:

A    topvideohub.com    → origin IP (proxied, orange cloud)
AAAA topvideohub.com    → origin IPv6 (proxied, orange cloud)
CNAME www              → topvideohub.com (proxied)
Enter fullscreen mode Exit fullscreen mode

The orange cloud icon means traffic goes through Cloudflare's network. Grey cloud means direct connection (no CDN, no protection).

Cost Summary

Feature Plan Cost
CDN Free $0
SSL Free $0
DDoS Protection Free $0
DNS Free $0
Analytics Free $0

Total: $0/month for enterprise-grade CDN and security across Asia-Pacific.

Cloudflare's free tier is one of the best deals in web infrastructure. For a multi-region content platform like TopVideoHub, it provides the global delivery network we need at zero cost.

Top comments (0)