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

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