CDN: Content Delivery Network'ün kısaltması ve İçerik Dağıtım Ağı olarak Türkçe'ye çevirebilecek bir kavram. CDN'ler, statik içeriklerinizin normalde daha hızlı tarayıcıya ulaştırılması için düşünülmüş bir dağıtım yapısıdır.

Statik içerik nedir?

Statik içerik grubuna, javascript, css, görseller, statik html dosyaları gibi, bir sunucu programlama dili ile dinamik şekilde oluşturulmayan tüm içerikleri dahil edebilirsiniz. Bir kere hazırlanıp sunucuya konduktan sonra değişmeyeceği planlanan içerikleri, farklı coğrafyalardaki veri merkezlerine dağıtarak, kullanıcılara daha hızlı iletmeyi amaçlayan içerik dağıtım ağları sadece bulut servis sağlayıcıları tarafından sağlanıyor.

Basitçe, iki tür CDN vardır, biri genel amaçlara yönelik tasarlanan, herkese açık ve dökümante edilmiş CDN'ler, diğeri de özel tasarlanmış ve genellikle kapalı kullanım için tasarlanmış olanlardır.

İkinci model, ileri aşamada yapacağınız bir geliştirme olacağı için şu an detaylarına girmeyeceğim. Size bu yazıda, özetle ilk model açıklayıp örnekleyeceğim. İlk modeli kullandığınız kütüphane bazlı projeler (örnegin jQuery, twitter bootstrap, angular, backbone...) kendi networkleri aracılığıyla sağlıyorlar veya google, microsoft gibi büyük bulut servis sağlayıcıları, birden fazla projeyi içeren herkese açık CDN servisleri sağlıyorlar.

Nasıl çalışıyor?

Bir websitesi hazırladınız; arayüzü twitter bootstrap ile şekillendirdiniz; jQuery kullanan birkaç kütüphane ile sitenizi interaktifleştirdiniz ve fontwesome kullanarak da elementlerinize semboller ekleyerek arayüzünüzü güçlendirdiniz. Bu kütüphanelerden bazısı sadece tek bir javascript dosyası, bazısı da css ve başka formatlarda dosyalar kullanmanızı gerektiriyor. Normalde, bütün bu dosyaları geliştirme ortamınızda sitenizin asıl dosyaları ile beraber sunmanız ve öyle kullanmanız gerekiyor.

Sitenize giren kullanıcı, tarayıcıda bir sayfa bile ziyaret etse hem sayfanızı istiyor hem de bütün javascriptleri, kütüphaneleri, görselleri, css stil dosyalarını istiyor. Sayfanızı her halükarda sunmak zorundasınız ancak sayfanızda kullandığınız statik dosyaları bu CDN servislerinden adresleyerek tarayıcıların o kütüphaneleri o servislerin domainlerinden indirmesini sağlayabilirsiniz. Bu servisler bu statik dosyaları olabilecek en hızlı şekilde sunmak üzere tasarlandıkları için her zaman sizden daha iyi çalışacaklardır. Ayrıca fakrlı bir domainde oldukları için daha önce yüklenmeye başlayacaklar (parallel download) ve muhtemelen başka bir sitede kullanıcı o dosyayı daha önce indirdiği ve uzun cache periyodlarıyla kullanıcının bilgisayarında saklandıkları için de muhtemelen tekrar indirilmeden doğrudan tarayıcıya yükleneceklerdir. Sitenizde belirli bir kutuphane icin CDN kullanmak için:
<script src="js/jquery-2.0.2.min.js"></script>
yerine
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
kullanmanız yeterli olacak. Gördüğünüz gibi bu jquery'e özel tanımlanmış bir CDN adresi. Herkese açık ve birden fazla kütühane içeren ortak CDN servislerini tercih etmeniz daha iyi performans almanızı sağlayabilir.

Sonuç olarak bu servisler sadece bu amaca hizmet etmek için çalıştıkları için siz sitenizi veya bu statik içeriklerinizi ne kadar optimize ederseniz edin en iyi ihtimalle onlara yakın, çoğu zaman daha düşük bir performansta çalışacağı için CDN'leri kullanarak zaman ve performans kazanabilirsiniz.

Peki, hangi servis?

Ufak bir araştırma ile herkese açık bir çok CDN servisi bulabilirsiniz hem de kafanızı karıştıracak miktarda. Aralarından en çok kütüphaneyi bir arada bulabileceğiniz bir tanesini tavsiye edip bitireceğim. Cloudflare'in bir çok popüler kütüphaneyi içeren herkese açık CDN servisini kullanarak büyük dağıtma ağına sahip performansından yararlanabilirsiniz.

http://cdnjs.com adresinden kullanmak istediğiniz kütüphaneyi seçip kullandığınız sürümüne ait adresini kodunuzdaki adreslemeyle değiştirebilirsiniz.
mod_rewrite sayesinde sayfalarımızın adreslerini istediğimiz formda gösterebiliyoruz (İlgili makale için:http://mfyz.com/htaccess-yardimiyla-tum-trafigi-te......n-yonetmek). Kullanımı çok yaygınlaşsa da bu kullanımın bazı ufak problemleri beraberinde getirdiği göz önünde bulundurulmalı.

Bu yazıda iki çok açık problemden ve basit çözümlerinden bahsedeceğim.

İlk problemlerden birisi sayfanızda kullandığınız tüm medya veya eklentilerin yollarını domain seviyesinden belirtmek durumunda olmanızdır. Eğer htmlinizi yazarken sayfanızdaki görselleri, stilleri, scriptleri bu şekilde tanımlamadıysanız tüm sayfalarınızdaki yolları güncellemeniz gerekiyor.

Basit bir örnekle, ana dizinde duran bir index.php veya html dosyanızın olduğunuz varsayalım ve images, css ve js olarak 3 medya dizininiz olsun. html'inizi kodlarken yolları su şekilde belirtmeniz dogal:
<html>
	<head>
		<title>Blah blah</title>
		<link rel="stylesheet" href="css/style.css" />
		<script src="js/myscript.js"></script>
	</head>
	<body>
		<div>
			<h1>Test page</h1>
			
			<img src="images/cat.jpg" alt="Cat" />
		</div>
	</body>
</html>
Eğer bu uygulmanızda bu sayfayı sunan kodu domain.com/about/license gibi, birden fazla derinlikte bir url ile sunduğunuz zaman, tarayıcınız o sayfa kodunun /about/ dizininde çalıştığını varsayarak medya dosyalarınızı /about/js/, /about/images/ gibi dizinlerde arayacaktır.

Çözümü ise basit. İki seçeneğiniz var bu noktada. Her medya yolunu belirtirkenhttp://domain/images/cat.jpg şeklinde tam yolu belirtebilirsiniz veya dosya/dizin yollarını belirtirken "/" işareti ile başlayarak domain seviyesinden itibaren işaret edeceksiniz yollarınızı yani yukarıdaki html kodunda her yol tanımlamasını "/" işareti ile başlayarak (ekleyerek) düzeltebilirsiniz.

Başında bir protokol ile belirtilmemiş her url domain üstündeki bir yolu ifade eder. "/" işareti ile başlayan yollar ise domain seviyesini işaret eder. Yani sadece "/" şeklinde tanımlanmış bir link aslında domain ana dizinini işaret eder. Ama bizim amacımız domain seviyesinden itibaren bir dizini işaretlemek, dolayısıyla /images/icons/plus.png gibi bir yol sızı nerede olursanız olur her zamanhttp://domain.com/images/icons/plus.png'yi işaret ederek istediğiniz dosyaya ulaştıracaktır.

Cookie Problemi

Bir diğer problem ise çerez (cookie) problemidir. Çerezlerin tarayıcıda kaydedildiğini hatırlamakta fayda var. Sunucu tarafında dahi çerez kaydetmek isteseniz o çerez aslında o isteğin cevabında gelen headerlar'da olacak ve tarayıcı istek cevabındaki değerlere göre çerezleri kaydedecek, silecek veya güncelleyecektir. Yani tarayıcının çerezleri yönettiğini bilmeniz gerekiyor, ayrıca çerezlerin dizin bağımlı olduklarını da belirtmek gerek. Yani bir çerezi /A/B/C dizininde iken ayarlarsanız bu çerez sadece C dizini ve alt dizinlerinden erişilebilir olacaktır. C dizinindeyken aryıca ana dizin, A ve B dizininde kaydedilmiş çerezlere de erişebilirsiniz. Tarayıcı, alt dizinlerdeki bir çereze erişimi bir üst dizinden veya paraleldeki bir dizinden vermez.

Bu durumda url'lerinizi klasör şeklinde ayarladıktan sonra uygulamanızda nerelerde çerez kaydediyor, siliyor veya güncelliyor olduğunuzu hatırlamanız ve güncellemeniz gerekiyor. Bu güncellemeyi hem javascript'deki cookie kullanımınız için hem de sunucu tarafındaki çerez kullanımınız için güncellemeniz gerekiyor. Sunucu tarafında bütün dillerde çok bilinen bir problem olduğu için yazdığınız sunucu taraflı dile ilişkin çerez methodlarını inceleyin. Ben kısaca php'de nasıl yapacağınızı anlatacağım.

Önce javascript ile çerez işlemlerinizi güncellemek için, normalde kullandığınız:
document.cookie = "";
koduna ek olarak "path=/" eklemeniz gerekecektir (tabi ki ; ayracını kullanarak diğer çerez cümlenize ekleyebilirsiniz.

Bu size karışık gelmiş olabilir çünkü javascript ile çerez yönetimini herhangi bir kütüphane kullanmadan yapmanın yolu bu. Ancak muhtemelen jquery veya en azından çerezlerinizi okumak, silmek veya kaydetmek için bir kütüpahne kullanıyor iseniz kullandığınız kütüpahenin "path" yani çerez dizinini belirtebileceğiniz bir yöntemi vardır, bu yöntemi uygulayarak tüm çerezlerinizi ana dizininizde ayarlamalısınız, böylece çerezleriniz her yerden erişilebilir hale geleceklerdir.

PHP'de bu problemi çözmek için tüm "setcookie" fonksiyonunun (name, value, expire) standart kullanımına 4. parametre olarak "/" yani dizin parametresi eklemeniz yeterli olacaktır. Bu noktadan sonra kaydettiğiniz tüm çerezler ana dizine kaydedilecek, böylece her yerden erişilebilir hale geleceklerdir.


Bu konu, daha teknik noktalarda başka problemleri de beraberinde getiriyor fakat url'lerinizi klasör şeklinde ayarladıktan sonra ilk karşılaşacağınız iki büyük problemden ve çözümünden kısaca bahsetmiş oldum.


Hazırlayan: Mehmet Fatih YILDIZ

Popüler Etiketler

workspace mfyz design seo search optimization meta ie browser örnek kod form button jquery social facebook connect api login mysql session javascript js mobile startups htaccess url logo html5 html firefox download blog rss mootools google less css css3 subversion svn network app developer plugin media screen optimizasyon input table language development style editor coding newsletter mail sitemap ios apple itunes banner compile compiler macosx windows linux on-the-fly mod_rewrite cookie php assets link sql query injection gimp howto nasıl twitter portfolio dokuman subscription ajax xml http server wireless ubuntu ntfs fstab iphone bootstrap internet explorer widget osx player apache route router wanda proje kampanya kontrol yapıları if while spam music imza signature ui ux icons ipad app store store in-app purchase purchase verification integration storekit itunes connect nedir ruffles doritos ide phpstorm jetbrains deployment version control git webkit www subdomain redirect crossdomain job konsol pgsql mssql date diff zaman tarih wordpress cms open source lisans switch tytz export tool radio code internet statistics license parse ipucu oyun kurulum xmlhttprequest chart grafik notebook laptop support icon ikon calendar framework pharma hack digital medya iOS db terminal box object opengraph fql tebrik graph share service web app analyse procedure sosyal lifestream cache istatistik insanlar kitap mdb2 pear xhtml applications free regex textarea database browsers prepare execute generator auth select