Statik dosyalar için CDN yapılandırma

Statik Dosyalar için CDN Kurulumu Neden Hayati Önem Taşır?

Web sitesi yükleme hızı söz konusu olduğunda, statik dosyalar (görseller, CSS, JavaScript, fontlar ve videolar) genellikle sayfanın toplam boyutunun %70'inden fazlasını oluşturur. Bu dosyaları doğrudan ana sunucudan sunarsanız, kullanıcı dünyanın diğer ucunda olsa bile her istek veri merkezinize gider. Sonuç? Yüksek gecikme, yüksek bant genişliği tüketimi ve zayıf kullanıcı deneyimi.

CDN (İçerik Dağıtım Ağı) kurulumu bu sorunu çözer: statik dosyalar dünyanın farklı noktalarındaki birden fazla sunucuya kopyalanır ve kullanıcı isteği en yakın sunucuya (PoP) yönlendirilir. Ancak önemli olan nokta, sadece CDN'yi etkinleştirmenin yeterli olmamasıdır; önbellek ve içerik temizleme ayarlarını doğru yapmazsanız, kullanıcılarınız dosyaların eski sürümlerini görür veya önbellek düzgün çalışmaz. Bu makalede, CDN kurulumunu sıfırdan sona, alan adı bağlantısı, önbellek ayarı ve eski içerik temizlemeye odaklanarak ele alıyoruz.

Adım 1: Mimari Seçimi ve Alan Adını CDN'ye Bağlama

Herhangi bir işlem yapmadan önce, ana alan adınızın (örneğin example.com) doğrudan CDN'ye mi işaret edeceğine yoksa ayrı bir alt alan adı mı (örn. cdn.example.com) kullanacağınıza karar vermelisiniz. Statik dosyalar için en iyi yöntem ayrı bir alt alan adı kullanmaktır; çünkü önbellek ayarlarını ana alan adından bağımsız olarak kontrol edebilir ve bir sorun durumunda CDN'yi hızla devre dışı bırakabilirsiniz.

CNAME Kaydı ile Alan Adı Bağlama

Bir CDN oluşturduktan sonra (örneğin Cloudflare, Fastly veya ServerNet CDN hizmeti), DNS'inize bir CNAME kaydı ekleyin:

cdn.example.com.  CNAME  your-cdn-endpoint.example.net.

CDN'niz sabit bir IP adresi veriyorsa (bazı hizmetlerde), CNAME yerine A kaydı kullanın:

cdn.example.com.  A  203.0.113.10

Önemli not: CNAME kaydı kullanıyorsanız, endpoint değişikliğinde hızlıca uygulanması için TTL'yi düşük bir değere (örneğin 300 saniye) ayarladığınızdan emin olun.

SSL ve HTTPS Ayarı

Mixed content hatasını önlemek için CDN alt alan adında SSL'i mutlaka etkinleştirin. CDN'niz otomatik sertifika veriyorsa (Let's Encrypt gibi), panelde SSL/TLS seçeneğini etkinleştirmeniz yeterlidir. Aksi takdirde, sertifikayı manuel olarak yükleyin. Etkinleştirdikten sonra https://cdn.example.com adresinin doğru yanıt verdiğini test edin.

Adım 2: Statik Dosyalar için Önbellek (Cache) Ayarı

Önbellek ayarı, CDN kurulumunun kalbidir. Önbelleği doğru yapılandırmazsanız, CDN sadece sıradan bir proxy olur ve hiçbir hız katmaz. İki önbellek seviyemiz var: tarayıcı önbelleği (HTTP başlıklarıyla) ve CDN önbelleği (PoP seviyesinde).

Cache-Control ve Expires Ayarı

Değişmeyen statik dosyalar için (logo, fontlar gibi) uzun süreli önbellek ayarlayabilirsiniz:

Cache-Control: public, max-age=31536000, immutable

Bu başlık, tarayıcıya ve CDN'ye dosyayı bir yıl boyunca önbelleğe almasını söyler ve immutable olduğu için tarayıcı yeniden doğrulama (revalidation) isteği bile göndermez. Değişebilecek dosyalar için (ana CSS veya JS gibi) daha kısa bir değer kullanın:

Cache-Control: public, max-age=3600, must-revalidate

Web sunucusunda (örneğin Nginx), bu başlıkları şu şekilde ayarlayabilirsiniz:

location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    add_header CDN-Cache-Control "public, max-age=31536000";
}

CDN-Cache-Control başlığının CDN'ye özel olduğunu ve CDN önbelleğini tarayıcı önbelleğinden bağımsız olarak ayarlamanıza izin verdiğini unutmayın. Bu çok kullanışlıdır; örneğin tarayıcının dosyayı 1 gün, CDN'nin ise 1 yıl önbelleğe almasını isteyebilirsiniz.

CDN Panelinde Önbellek Ayarı

CDN panelinizde, statik uzantılar için bir kural (Rule) oluşturun. Genellikle bu kurallar şu şekildedir:

• Path pattern: /*.css, /*.js, /*.png
• Cache TTL: 30 gün veya 1 yıl
• Cache behavior: Cache everything (sorgu dizesi olsa bile)

Yaygın bir hata, önbelleği Cache only if query string is empty olarak ayarlamaktır. Bu, ?v=2 ile istenen bir dosyanın önbelleğe alınmamasına ve tekrar ana sunucuya dönülmesine neden olur. Statik dosyalar için Ignore query string seçeneğini etkinleştirmek daha iyidir.

Adım 3: Eski İçerik Temizleme (Cache Purge)

CDN kurulumundan sonraki en önemli zorluk önbellek temizlemedir. Bir CSS dosyasını değiştirdiğinizde, eski önbellek hâlâ PoP'larda mevcutsa, kullanıcılar önceki sürümü görür. Bunun için üç ana yöntem vardır:

Yöntem 1: Panelden Manuel Purge

Çoğu CDN'nin panelinde bir Purge veya Clear Cache düğmesi vardır. Belirli bir URL'yi veya tüm alan adını temizleyebilirsiniz. Bu yöntem acil durumlar için iyidir, ancak sık dağıtımlar (Deployment) için uygun değildir.

Yöntem 2: API ile Purge

Otomasyon için en iyi yöntem API kullanmaktır. Örneğin Cloudflare'da şu isteği gönderirsiniz:

curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
     -H "Authorization: Bearer YOUR_API_TOKEN" \
     -H "Content-Type: application/json" \
     --data '{"files":["https://cdn.example.com/css/style.css"]}'

Bu istek yalnızca belirtilen dosyayı temizler. Her şeyi temizlemek istiyorsanız {"purge_everything":true} kullanın. Dağıtım betiğinizde (örneğin CI/CD'de), yeni dosyaları yükledikten sonra bu API'yi çağırın.

Yöntem 3: Cache Busting Kullanımı (Dosya Adını Değiştirme)

Önbellek temizlemek yerine dosya adını değiştirebilirsiniz. Örneğin style.css yerine style.abc123.css kullanın. Bu işlem Webpack veya Vite gibi araçlarla otomatik olarak yapılır. Bu yöntemin avantajı, Purge ihtiyacının olmaması ve eski dosyaların zamanla önbellekten çıkmasıdır. Ancak dezavantajları: CDN'de kaplanan alan artar ve eski dosyaları sunucudan silerseniz, indekslenmiş sayfalardaki eski bağlantılar 404 hatası verebilir.

Yaygın Hata: HTML'de Sürümlemeyi Unutmak

Birçok geliştirici sadece önbelleği temizler, ancak kullanıcının tarayıcısında hâlâ eski dosyaya bağlantı veren eski HTML sürümü olduğunu unutur. Çözüm: HTML'inizde dosya sürümünü manuel veya otomatik olarak ekleyin:

<link rel="stylesheet" href="https://cdn.example.com/css/style.css?v=20250601">

Dosya hash'i ile Cache Busting yöntemini kullanıyorsanız, bu sorun kendiliğinden çözülür.

Adım 4: İzleme ve Sorun Giderme

CDN kurulumundan sonra her şeyin doğru çalıştığından emin olmalısınız. Bunun için birkaç araç ve teknik:

Yanıt Başlıklarını Kontrol Etme

Bir dosyanın başlıklarını şu komutla kontrol edebilirsiniz:

curl -I https://cdn.example.com/css/style.css

Çıktıda şu öğelere bakın:

• cache-status: HIT (dosyanın CDN önbelleğinden sunulduğu anlamına gelir)
• age: 12345 (dosyanın önbellekte kaldığı süre)
• x-cache: HIT (bazı CDN'lerde)

MISS görüyorsanız, dosya ana sunucudan gelmiş ve önbelleğe alınmamıştır. Bu genellikle önbellek başlıklarının doğru ayarlanmadığı anlamına gelir.

Farklı Noktalardan Test Etme

ping gibi araçlar veya çevrimiçi hizmetler (örn. check-host.net) kullanarak dünyanın farklı noktalarından isteklerin en yakın PoP'a gittiğinden emin olun. Tüm istekler tek bir IP'ye gidiyorsa, DNS'iniz doğru ayarlanmamış veya CDN'niz yeterli PoP'a sahip değil demektir.

502 ve 504 Hatalarını Giderme

CDN kurulumundan sonra 502 veya 504 hatası görüyorsanız, genellikle sorun CDN'nin ana sunucuyla iletişimindedir. Şunları kontrol edin:

• Ana sunucu yalnızca belirli IP'lerden bağlantıya izin mi veriyor? (Güvenlik duvarını kontrol edin)
• Ana sunucunun SSL sertifikası geçerli mi? (CDN SSL'i doğrulayamazsa hata verir)
• Hosting'iniz eşzamanlı bağlantı sayısında bir sınırlama var mı? (CDN'ler çok sayıda bağlantı açar)

Özet ve En İyi Uygulamalar

Statik dosyalar için CDN kurulumu sadece basit bir ayar değildir; alan adı bağlantısı, hassas önbellek ayarı ve temizleme yönetimini içeren bir süreçtir. Anahtar noktaların özeti:

1. Ayrı bir alt alan adı (cdn.example.com) kullanın.
2. Değişmeyen dosyalar için Cache-Control başlığını immutable ile ayarlayın.
3. Tarayıcı ve CDN önbelleğini ayırmak için CDN-Cache-Control kullanın.
4. Sık dağıtımlar için CI/CD'nize API üzerinden Purge entegre edin.
5. Purge ihtiyacını azaltmak için dosya hash'i ile Cache Busting kullanın.
6. Değişikliklerden sonra her zaman curl -I ile yanıt başlıklarını kontrol edin.

Entegre bir çözüm arıyorsanız, ServerNet gibi bulut hosting sağlayıcılarının sunduğu CDN hizmetleri genellikle bu özellikleri hazır olarak içerir ve altyapı zahmeti olmadan aynı ayarları kullanabilirsiniz. Ancak bu makaledeki kavramları anlamanız, herhangi bir CDN'yi doğru şekilde yönetebilmeniz için önemlidir.

Son olarak, CDN kurulumunun tek seferlik bir iş olmadığını unutmayın; kullanıcı davranışlarına ve site değişikliklerine göre sürekli izleme ve yeniden ayar gerektirir. Yukarıdaki noktalara dikkat ederek, sitenizin hızını önemli ölçüde artırabilir ve kullanıcılarınız için daha iyi bir deneyim oluşturabilirsiniz.