CDN URL Optimizasyonu: Cloudflare ve AWS CloudFront Rehberi

CDN URL yapılandırması, cache invalidation ve edge location optimizasyonunu öğrenin. Cloudflare ve AWS CloudFront performans rehberi.

Content Delivery Network (CDN), içeriğinizi dünya genelindeki edge sunuculara dağıtarak kullanıcılara en yakın lokasyondan hızlı içerik sunumu sağlar. Bu rehberde, CDN URL yapılandırması ve optimizasyon stratejilerini inceleyeceğiz.

CDN URL Yapısı

Subdomain vs Path-based CDN

// Subdomain yaklaşımı
https://cdn.example.com/images/logo.png
https://static.example.com/js/app.js
https://assets.example.com/css/style.css

// Path-based yaklaşımı
https://example.com/cdn/images/logo.png
https://example.com/static/js/app.js

CDN Sağlayıcı URL Formatları

// Cloudflare
https://example.com/ (proxy modunda)
https://[zone-id].cloudflaressl.com/

// AWS CloudFront
https://d123456abcdef.cloudfront.net/
https://cdn.example.com/ (custom domain)

// Bunny CDN
https://[pullzone].b-cdn.net/

// Fastly
https://[service].global.ssl.fastly.net/

Cloudflare Yapılandırması

DNS ve Proxy Ayarları

// Cloudflare DNS kayıtları
Type: A
Name: @
Content: 123.456.789.012
Proxy: Proxied (turuncu bulut)

Type: CNAME
Name: cdn
Content: example.com
Proxy: Proxied

Page Rules ile URL Optimizasyonu

// Cache everything kuralı
URL: example.com/static/*
Setting: Cache Level → Cache Everything
Edge Cache TTL: 1 month

// Bypass cache kuralı
URL: example.com/api/*
Setting: Cache Level → Bypass

// Redirect kuralı
URL: http://example.com/*
Setting: Always Use HTTPS

Cache Key Optimization

// Query string handling
// Cloudflare Dashboard > Caching > Configuration

// Seçenekler:
1. Ignore Query String
2. Cache by Query String (whitelist)
3. Cache by Query String (all)

// Örnek URL'ler
https://cdn.example.com/image.jpg?v=123 (cache key: image.jpg)
https://cdn.example.com/image.jpg?v=456 (aynı cache)

AWS CloudFront Yapılandırması

Distribution Oluşturma

// CloudFront distribution ayarları
{
  "Origins": [{
    "DomainName": "example.com",
    "OriginPath": "",
    "CustomHeaders": [],
    "OriginProtocolPolicy": "https-only"
  }],
  "DefaultCacheBehavior": {
    "ViewerProtocolPolicy": "redirect-to-https",
    "CachePolicyId": "658327ea-f89d-4fab-a63d-7e88639e58f6",
    "Compress": true
  }
}

Cache Behaviors

// Path pattern'lere göre farklı cache davranışları

// Static assets
Path Pattern: /static/*
Cache Policy: CachingOptimized
TTL: 31536000 (1 yıl)

// Images
Path Pattern: /images/*
Cache Policy: CachingOptimized
TTL: 86400 (1 gün)

// API calls
Path Pattern: /api/*
Cache Policy: CachingDisabled

Cache Invalidation

URL Bazlı Invalidation

// Cloudflare Purge
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -H "Authorization: Bearer {api_token}" \
  -H "Content-Type: application/json" \
  --data '{"files":["https://example.com/logo.png"]}'

// AWS CloudFront Invalidation
aws cloudfront create-invalidation \
  --distribution-id E1234567890 \
  --paths "/images/logo.png" "/css/*"

Cache Busting Stratejileri

// Query string versioning
https://cdn.example.com/style.css?v=1.2.3
https://cdn.example.com/app.js?v=abc123

// Filename versioning (önerilen)
https://cdn.example.com/style.abc123.css
https://cdn.example.com/app.def456.js

// Content hash (en iyi)
https://cdn.example.com/style.8f3a2b1c.css

SEO için CDN URL Optimizasyonu

Canonical URL Yönetimi

// Aynı içerik farklı URL'lerde
https://example.com/image.jpg
https://cdn.example.com/image.jpg
https://d123.cloudfront.net/image.jpg

// Canonical header ile çözüm
Link: <https://example.com/image.jpg>; rel="canonical"

// robots.txt
User-agent: *
Disallow: /cdn/  (opsiyonel)

CORS Ayarları

// CloudFront CORS header'ları
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD
Access-Control-Max-Age: 86400

// Cloudflare Transform Rules
if (http.host eq "cdn.example.com") {
  set response header "Access-Control-Allow-Origin" "*"
}

Performance Optimizasyonu

Image Optimization

// Cloudflare Polish
Dashboard > Speed > Optimization > Polish
- Lossless: Meta data kaldırma
- Lossy: Görsel sıkıştırma

// CloudFront + Lambda@Edge
// Görüntü boyutlandırma ve format dönüşümü
https://cdn.example.com/image.jpg?width=300&format=webp

Compression

// Brotli compression (Cloudflare)
Dashboard > Speed > Optimization > Brotli

// CloudFront compression
"Compress": true
// Desteklenen formatlar: gzip, br

URL Rewrite ve Redirect

Cloudflare Workers

// URL rewrite örneği
addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  
  // /old-path → /new-path redirect
  if (url.pathname === '/old-path') {
    return Response.redirect('https://example.com/new-path', 301);
  }
  
  return fetch(event.request);
});

CloudFront Functions

// URL rewrite function
function handler(event) {
  var request = event.request;
  var uri = request.uri;
  
  // .html uzantısı ekleme
  if (!uri.includes('.') && !uri.endsWith('/')) {
    request.uri = uri + '.html';
  }
  
  return request;
}

CDN URL Best Practices

Sonuç

CDN URL optimizasyonu, web sitesi performansı ve kullanıcı deneyimi için kritik öneme sahiptir. Doğru cache stratejileri, URL yapılandırması ve invalidation yönetimi ile hem hız hem de SEO performansınızı artırabilirsiniz.