Web sitelerinin sorunsuz çalışmasını sağlamak, düzenli bakım ve güncellemeler gerektirir. Yazılım güncellemeleri, güvenlik yamaları, yeni özellik entegrasyonları, veritabanı optimizasyonları veya donanım yükseltmeleri gibi birçok nedenle bir web sitesi veya uygulamanın kısa süreliğine erişilemez olması gerekebilir. Bu planlı bakımlar, sistemin sağlığı ve güvenliği için elzemdir. Ancak bu süreçte kullanıcıların anlamsız bir hata sayfasıyla karşılaşması veya sitenin tamamen erişilemez olması, ciddi sorunlara yol açabilir. Kullanıcılar, sitenizin kalıcı olarak kapandığını düşünebilir, markanıza olan güvenleri sarsılabilir ve hatta arama motorları sitenizi “çalışmıyor” olarak algılayarak SEO sıralamanızı olumsuz etkileyebilir.

Geleneksel bakım sayfası yöntemleri genellikle iki ana yaklaşımla uygulanır. İlk olarak, web sunucusunda (Apache, Nginx gibi) bir yeniden yönlendirme veya yapılandırma yaparak tüm gelen istekleri statik bir HTML sayfasına yönlendirmektir. Bu yöntem, sunucunun her isteği işlemesini gerektirir, bu da sunucu yükünü artırabilir ve özellikle yoğun trafikli sitelerde performans sorunlarına yol açabilir. Ayrıca, sunucu yapılandırmasındaki hatalar, sitenin tamamen erişilemez kalmasına veya bakım sayfasının doğru görüntülenmemesine neden olabilir.

Diğer bir geleneksel yöntem ise, uygulama katmanında (örneğin, bir içerik yönetim sistemi veya framework içinde) bir bakım modu etkinleştirmektir. Bu yaklaşım, daha fazla esneklik sunar ancak uygulamanın kendisinin çalışır durumda olmasını gerektirir. Eğer uygulamanın kendisi bakıma ihtiyaç duyuyorsa veya bir hata nedeniyle çalışmıyorsa, bu yöntem etkisiz kalır. Örneğin, bir veritabanı sorunu nedeniyle uygulamanız başlayamıyorsa, bakım sayfasını sunacak kod da çalışmayacaktır. Dahası, bu tür bir çözüm genellikle uygulamanın kaynaklarını tüketmeye devam eder ve sunucu yükünü azaltmaz. Bu durum, özellikle yüksek erişilebilirlik gerektiren platformlar için kabul edilemez riskler barındırır.

Bu dezavantajlar göz önüne alındığında, daha hızlı, daha güvenilir ve daha esnek bir bakım sayfası çözümüne olan ihtiyaç belirginleşmektedir. İşte tam da bu noktada, Edge Computing teknolojisi ve Cloudflare Workers gibi sunucusuz mimariler devreye girer. Geleneksel sunucu merkezli yaklaşımların aksine, Edge Computing, içeriği ve işlevselliği kullanıcılara coğrafi olarak daha yakın olan ağ kenarlarına taşır. Bu sayede istekler daha hızlı işlenir ve yanıt süreleri kısalır. Bakım sayfası örneğinde, bu, sitenizin ana sunucusuna hiç ulaşmadan, dünyanın dört bir yanındaki Cloudflare sunucularından bakım mesajının anında yayınlanabilmesi anlamına gelir. Bu modern yaklaşım, sitenizin kesinti süresini minimize ederken, kullanıcılarınıza kesintisiz ve tutarlı bir deneyim sunma potansiyeli taşır.

Cloudflare Workers Nedir ve Bakım Sayfaları için Neden Bu Kadar İdealdir?

Cloudflare Workers, Cloudflare’ın küresel ağında, yani “Edge”de çalışan sunucusuz JavaScript ortamlarıdır. Geleneksel sunucu kurulumlarının aksine, Workers, geliştiricilerin kodlarını doğrudan Cloudflare’ın dünya genelindeki yüzlerce veri merkezine dağıtmasına olanak tanır. Bir kullanıcı web sitenize erişmeye çalıştığında, isteği ilk olarak Cloudflare’ın en yakın veri merkezine ulaşır ve Worker kodunuz burada devreye girerek isteği işler. Bu model, sunucuyu ortadan kaldırdığı için “sunucusuz” olarak adlandırılır, ancak aslında kodunuz, fiziksel sunucular üzerinde değil, Cloudflare’ın optimize edilmiş, hafif sanallaştırılmış ortamlarında çalışır. Bu esneklik ve hız, Cloudflare Workers’ı birçok farklı kullanım senaryosu için ideal kılar.

Bakım sayfaları bağlamında Cloudflare Workers’ın bu kadar ideal olmasının temel nedenleri şunlardır:

• Hız ve Düşük Gecikme: İstekler, kullanıcıya en yakın Cloudflare Edge konumunda işlendiği için bakım sayfası yanıtları inanılmaz derecede hızlıdır. Ana sunucunuza bir istek bile gönderilmediği için sunucu yükü sıfıra iner ve gecikme minimuma iner.
• Yüksek Erişilebilirlik ve Güvenilirlik: Cloudflare’ın küresel ağı sayesinde, bir Worker herhangi bir veri merkezinde çalışabilir. Eğer bir veri merkezinde sorun yaşanırsa, Worker otomatik olarak başka bir konuma yönlendirilir. Bu durum, bakım sayfanızın kendisinin de son derece erişilebilir olmasını garanti eder.
• Maliyet Etkinliği: Cloudflare Workers genellikle istek başına ücretlendirilir ve çok uygun maliyetlidir. Basit bir bakım sayfası için milyonlarca isteği işlemek bile çok düşük maliyetlere denk gelir. Ayrıca, ayrı bir sunucu veya altyapı kiralamanıza gerek kalmaz.
• Kolay Dağıtım ve Yönetim: Worker kodunuzu yazıp Cloudflare kontrol paneli üzerinden veya bir CLI aracıyla dakikalar içinde dağıtabilirsiniz. Karmaşık sunucu yapılandırmalarıyla uğraşmanıza gerek kalmaz, sadece JavaScript kodu yazmanız yeterlidir.
• SEO Dostu: Workers, bakım sayfasına özel HTTP durum kodları (örneğin, 503 Service Unavailable) ve başlıkları ayarlamanıza olanak tanır. Bu, arama motorlarına sitenizin geçici olarak kullanılamaz olduğunu bildirir ve sıralamanızın olumsuz etkilenmesini engeller.
• Esneklik ve Özelleştirme: JavaScript ile yazıldığı için bakım sayfanızı dinamik hale getirebilirsiniz. Belirli IP adresleri için farklı sayfalar göstermek, belirli zaman aralıklarında bakım modunu otomatik etkinleştirmek veya A/B testi yapmak gibi gelişmiş senaryoları kolayca uygulayabilirsiniz.

Bir vaka analizi olarak, yüksek trafikli bir e-ticaret platformunun planlı bir veritabanı yükseltmesi yapması gerektiğini düşünelim. Geleneksel bir yaklaşımla, platform saatlerce kapalı kalabilir ve bu da milyonlarca dolarlık potansiyel gelir kaybına yol açabilir. Ancak Cloudflare Worker tabanlı bir bakım sayfasıyla, ziyaretçiler ana sunucuya yönlendirilmeden anında şık ve bilgilendirici bir bakım mesajıyla karşılaşır. Bu sayfa, beklenen bakım süresi, iletişim bilgileri ve hatta sosyal medya bağlantıları içerebilir. Platform ekibi, yükseltmeyi rahatça yaparken, kullanıcılar da bilgi sahibi oldukları için mağdur olmazlar. Bu, hem gelir kaybını minimize eder hem de marka sadakatini korur.

Adım Adım Kurulum: Basit Bir Cloudflare Worker Bakım Sayfası Nasıl Geliştirilir?

Cloudflare Worker ile bir bakım sayfası oluşturmak oldukça basit ve hızlı bir süreçtir. İlk olarak, Cloudflare hesabınızın olması ve alan adınızın Cloudflare’a bağlı olması gerekmektedir. Eğer henüz bir hesabınız yoksa, Cloudflare.com adresinden kolayca ücretsiz bir hesap oluşturabilirsiniz.

İşte adım adım bir bakım sayfası Worker’ı oluşturma süreci:

1. Cloudflare Paneline Giriş Yapın: Tarayıcınızdan Cloudflare hesabınıza giriş yapın.
2. Workers & Pages Bölümüne Gidin: Sol menüde “Workers & Pages” seçeneğine tıklayın.
3. Worker Oluşturun: “Create Application” butonuna tıklayın ve ardından “Create Worker” seçeneğini seçin. Worker’ınıza bir isim verin (örneğin, maintenance-page-worker).
4. Worker Kodunu Yazın: Oluşturduğunuz Worker’ın düzenleme ekranına yönlendirileceksiniz. Varsayılan kodu silin ve aşağıdaki basit JavaScript kodunu yapıştırın. Bu kod, gelen tüm isteklere özel bir HTML sayfası ile yanıt verecektir.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const maintenancePageHtml = 
    
    
      
      
      
      
    
    
      

        
Bakım Çalışması Devam Ediyor!
        
Değerli ziyaretçimiz,
        
Sitemizde planlı bakım ve güncellemeler yapmaktayız. Daha iyi bir deneyim sunabilmek için yoğun bir şekilde çalışıyoruz.
        
En kısa sürede tekrar yayında olmak için sabırsızlanıyoruz.
        
Tahmini geri dönüş: [Tarih/Saat]
        

          
Acil durumlar için bize destek@example.com adresinden ulaşabilirsiniz.
          
Güncellemeler için bizi sosyal medyadan takip edin: Twitter | Facebook
        
      
    
    ;

  return new Response(maintenancePageHtml, {
    headers: {
      'content-type': 'text/html;charset=UTF-8',
      'Retry-After': '3600' // Arama motorlarına 1 saat sonra tekrar denemelerini söyler
    },
    status: 503, // HTTP 503 Service Unavailable kodu
    statusText: 'Service Unavailable'
  });
}
        

Yukarıdaki kodda dikkat etmeniz gereken bazı önemli noktalar var:

• addEventListener('fetch', ...): Cloudflare Worker'ın temel yapısı olup, gelen her "fetch" (istek) olayını dinler.
• handleRequest(event.request): Gelen isteği işleyen asenkron bir fonksiyondur.
• maintenancePageHtml: Kullanıcıya göstereceğimiz statik HTML içeriğini barındırır. CSS kodunu
  

  Sitemiz Geçici Olarak Bakımda

  Daha iyi hizmet verebilmek için altyapımızda planlı güncellemeler yapmaktayız.

  Tahmini geri dönüş: 2 Saat Sonra

  Lütfen daha sonra tekrar deneyin.

  ; return new Response(maintenancePageHtml, { headers: { 'content-type': 'text/html;charset=UTF-8', 'Retry-After': '3600' }, status: 503, statusText: 'Service Unavailable' }); } else { // Bakım modu kapalıysa VEYA IP izin verilenler listesindeyse orijinal siteye yönlendir return fetch(request); // Orijinal isteği sunucuya iletir } }

  Bu kod bloğunda, maintenanceMode değişkeni ile bakım modunu açıp kapatabilir, allowedIps dizisine de izin vermek istediğiniz IP adreslerini ekleyebilirsiniz. Cloudflare, gerçek istemci IP adresini CF-Connecting-IP başlığında sağlar. Eğer gelen istek bu IP adreslerinden birinden gelmiyorsa ve bakım modu aktifse, bakım sayfası gösterilir; aksi takdirde istek orijinal sunucuya iletilir (fetch(request)).

  Zaman Tabanlı Otomatik Bakım Modu Nasıl Etkinleştirilir?

  Planlı bakımlar genellikle belirli bir saat aralığında yapılır. Worker'ınızı, bu zaman aralığında otomatik olarak bakım moduna geçecek ve ardından normal siteyi sunmaya devam edecek şekilde yapılandırabilirsiniz. Bu, manuel müdahaleye olan ihtiyacı azaltır.

  
  addEventListener('fetch', event => {
    event.respondWith(handleTimeBasedRequest(event.request));
  });
  
  async function handleTimeBasedRequest(request) {
    const now = new Date();
    const maintenanceStartTime = new Date('2024-03-15T02:00:00Z'); // UTC
    const maintenanceEndTime = new Date('2024-03-15T04:00:00Z'); // UTC
  
    const isMaintenanceActive = now >= maintenanceStartTime && now < maintenanceEndTime;
  
    if (isMaintenanceActive) {
      // Bakım sayfası HTML içeriği (önceki örnekteki gibi)
      const maintenancePageHtml = ...; // HTML içeriğini buraya ekleyin
      return new Response(maintenancePageHtml, {
        headers: { 'content-type': 'text/html;charset=UTF-8', 'Retry-After': '1200' }, // 20 dakika sonra dene
        status: 503,
        statusText: 'Service Unavailable'
      });
    } else {
      return fetch(request); // Bakım dışındaysa orijinal siteye yönlendir
    }
  }
          

  Bu örnekte, maintenanceStartTime ve maintenanceEndTime değişkenlerini bakımınızın başlangıç ve bitiş zamanlarına göre ayarlayarak Worker'ın otomatik olarak bakım modunu yönetmesini sağlayabilirsiniz. Zamanları UTC (Coordinated Universal Time) formatında belirtmek, farklı coğrafi konumlardaki kullanıcılar için tutarlılık sağlar.

  A/B Testi veya Farklı Kullanıcı Gruplarına Özel Bakım Sayfaları Nasıl Sunulur?

  Belirli kullanıcı gruplarına (örneğin, test kullanıcıları, yeni ziyaretçiler) farklı bakım sayfası versiyonları göstermek veya hata mesajlarını özelleştirmek isteyebilirsiniz. Cloudflare Workers, çerezler, URL parametreleri veya HTTP başlıkları gibi kriterlere göre istekleri manipüle etmenize olanak tanır. Örneğin, bir e-ticaret sitesi, belirli bir ürün lansmanı öncesinde kısa süreli bir bakım yaparken, bazı premium müşterilerine özel bir ön izleme bağlantısı sunmak isteyebilir. Worker, kullanıcının bir çerez değerini veya özel bir HTTP başlığını kontrol ederek bu ayrımı yapabilir. Eğer kullanıcıda özel bir "premium_user" çerezi varsa, onu doğrudan ön izleme sayfasına yönlendirebilirken, diğer tüm kullanıcılara standart bakım sayfasını gösterebilir.

  Bu senaryolar, Cloudflare Workers'ın sadece basit bir bakım sayfasından çok daha fazlasını yapabileceğini gösteriyor. Dinamik ve koşullu mantık ekleyerek, sitenizin çevrimdışı olduğu durumlarda bile kullanıcı deneyimini kontrol altında tutabilir, hatta bu süreci pazarlama stratejilerinizle entegre edebilirsiniz.

  Mobil Uyumlu Bakım Sayfası Tasarımı ve En İyi Uygulamalar Nelerdir?

  Günümüzde internet trafiğinin büyük bir kısmı mobil cihazlardan gelmektedir. Bu nedenle, bir bakım sayfası tasarlarken mobil uyumluluğu göz ardı etmek, kullanıcı deneyimini ciddi şekilde zedeleyebilir. Mobil uyumlu bir bakım sayfası, ziyaretçilerinizin hangi cihazdan erişirse erişsin, bilgiyi kolayca okuyabilmesini ve sayfayı rahatça gezinebilmesini sağlar. Cloudflare Worker ile sunduğunuz HTML içeriğinin responsive (duyarlı) olması, modern web standartlarının temel bir gerekliliğidir.

  Mobil Uyumlu Bakım Sayfası Tasarımı İçin Temel İlkeler:

  • Meta Viewport Etiketi: HTML'inizin bölümünde aşağıdaki meta etiketini mutlaka bulundurun:

    
    Bu etiket, tarayıcıya sayfanın cihazın genişliğine göre ölçeklenmesi gerektiğini bildirir.

  • Esnek Düzenler: CSS kullanarak genişlikleri piksel yerine yüzde (%) veya vw (viewport width) gibi göreceli birimlerle belirtin. Bu, içeriğinizin farklı ekran boyutlarına dinamik olarak uyum sağlamasına yardımcı olur. Örneğin, max-width: 600px; width: 90%; kullanımı, küçük ekranlarda daralmayı, büyük ekranlarda ise belirli bir boyutu aşmamayı sağlar.
  • Medya Sorguları (Media Queries): CSS Medya Sorguları, belirli ekran genişliklerine, yüksekliklere veya cihaz özelliklerine göre farklı stil kuralları uygulamanızı sağlar. Makalenin başında eklediğimiz