Modern web geliştirme dünyasında statik site oluşturucular ve tek sayfa uygulamaları (SPA) giderek daha popüler hale geliyor. React, Angular, Vue.js veya Svelte ile geliştirilmiş frontend uygulamalarını barındırmak, CDN üzerinden sunmak, HTTPS sağlamak ve backend API’leri ile entegre etmek için eskiden birden fazla hizmeti birleşik biçimde yapılandırmanız gerekirdi. Azure Static Web Apps tüm bu ihtiyaçları tek bir platform altında toplar ve geliştirici deneyimini önemli ölçüde basitleştirir.
Azure Static Web Apps Nedir?
Azure Static Web Apps, statik içerik (HTML, CSS, JavaScript, görsel dosyalar) ve isteğe bağlı sunucusuz API’ler (Azure Functions) sunan tam yönetimli bir barındırma hizmetidir. GitHub veya Azure DevOps reposuyla doğrudan entegre çalışır: kodu push ettiğinizde otomatik olarak build ve deploy süreci başlar. CDN üzerinden küresel dağıtım, ücretsiz SSL sertifikası, özel alan adı desteği ve yerleşik kimlik doğrulama gibi özellikler kutudan çıkar.
Hizmetin en çekici yönlerinden biri sadeliğidir. Bir staticwebapp.config.json dosyasıyla yönlendirme kuralları, güvenlik başlıkları, kimlik doğrulama ve yetkilendirme ayarları, fallback rotaları ve API entegrasyonu tanımlanır. Framework’ünüz ne olursa olsun (Gatsby, Next.js static export, Hugo, Jekyll, Blazor WASM) aynı platform üzerinde çalışır.
Mimari ve Dağıtım Akışı
Dağıtım süreci şöyle çalışır: GitHub veya Azure DevOps’ta bir repo oluşturursunuz. Azure Portal’dan Static Web App kaynağı oluştururken repoyu bağlarsınız ve build yapılandırmasını belirtirsiniz (app location, API location, output location). Portal otomatik olarak reponuza bir GitHub Actions workflow dosyası ekler. Bu noktadan itibaren her push veya pull request otomatik build ve deploy tetikler.
Pull request’ler için staging environment özelliği önemli bir kolaylıktır. Her pull request için geçici bir URL oluşturulur ve değişiklikler production’a merge edilmeden önce bu URL üzerinde test edilebilir. PR kapatıldığında staging ortam otomatik olarak silinir. Bu özellik özellikle ekip halinde çalışırken code review sürecini güçlendirir.
API Entegrasyonu
Statik frontend’in yanı sıra sunucusuz (serverless) API’ler ekleyerek tam stack uygulamalar oluşturabilirsiniz. İki seçenek mevcuttur: Managed Functions ve Linked Backend.
Managed Functions, projenizin /api klasöründeki Azure Functions kodunu otomatik olarak deploy eder. Node.js, Python ve .NET desteklenir. Function kodu frontend ile aynı repoda tutulur ve birlikte dağıtılır. Bu yaklaşım basit API ihtiyaçları için idealdir: form submission, veritabanı sorguları, üçüncü parti API çağrıları gibi.
Linked Backend ise mevcut bir Azure Functions uygulamasını, App Service’i veya Container App’i Static Web App’e bağlamanıza olanak tanır. Bu seçenek daha karmaşık backend gereksinimleri olan projeler için uygundur çünkü backend’in kendi ölçekleme, yapılandırma ve yaşam döngüsü olur.
Kimlik Doğrulama ve Yetkilendirme
Azure Static Web Apps yerleşik kimlik doğrulama desteği sunar. Azure Active Directory, GitHub ve Twitter kimlik sağlayıcıları kutudan çıkar. Ek yapılandırmayla herhangi bir OpenID Connect sağlayıcısını (Google, Facebook, Okta vb.) ekleyebilirsiniz. Kimlik doğrulama altyapısı tamamen platform tarafından yönetilir, MSAL kütüphanesi veya OAuth akışlarını kendiniz kurgulamanız gerekmez.
Yetkilendirme, staticwebapp.config.json dosyasında rol bazlı olarak tanımlanır. Belirli rotaları yalnızca giriş yapmış kullanıcılara veya belirli rollere sahip kullanıcılara açabilirsiniz. Örneğin /admin/* yolunu sadece admin rolüne sahip kullanıcılara, /dashboard/* yolunu giriş yapmış tüm kullanıcılara, geri kalanını herkese açık tutabilirsiniz. Bu yapılandırma backend kodu gerektirmez, tamamen deklaratif biçimde çalışır.
Performans ve CDN
Statik içerik otomatik olarak Azure’un küresel CDN ağı üzerinden dağıtılır. Bu sayede kullanıcılar dünya genelinde en yakın uç noktadan (edge node) içeriğe erişir ve gecikme süresi minimum düzeyde kalır. HTTP/2 ve Brotli sıkıştırma varsayılan olarak etkindir. Özel domain için ücretsiz SSL sertifikası otomatik oluşturulur ve yenilenir.
Performance budgeting açısından statik siteler doğal olarak avantajlıdır. Sunucu tarafında rendering olmadığından Time to First Byte (TTFB) çok düşüktür. Ancak SPA uygulamalarında JavaScript paket boyutu hala kritik bir faktördür. Code splitting, lazy loading ve tree shaking gibi optimizasyonlarla ilk yükleme süresini minimize etmeniz önerilir.
Ortam Yönetimi
Azure Static Web Apps birden fazla ortam (environment) destekler. Production ortamı main branch’ten deploy edilir. Preview ortamları pull request’lerle otomatik oluşturulur. Named environment’lar ile staging, testing gibi kalıcı ortamlar tanımlayabilirsiniz. Her ortam kendi URL’sine ve yapılandırmasına sahiptir. Ortamlar arası environment variable farklılıkları Azure Portal veya CLI üzerinden tanımlanır.
Fiyatlandırma
Azure Static Web Apps iki katmanlı fiyatlandırma sunar. Ücretsiz (Free) tier bireysel projeler ve hobi uygulamaları için yeterlidir: 2 özel domain, 0,5 GB bant genişliği, 250 MB depolama ve yerleşik kimlik doğrulama dahildir. Standard tier (aylık yaklaşık 9 USD per app) ücretli tier’dir ve SLA garantisi, 5 staging ortam, 100 GB bant genişliği, özel kimlik sağlayıcıları ve gelişmiş yapılandırma seçenekleri sunar. Karmaşık kurumsal projeler için Standard tier kesinlikle önerilir.
Kullanım Senaryoları
Azure Static Web Apps şu senaryolarda özellikle etkilidir: şirket web sitesi ve blog (Hugo, Gatsby, Astro), dahili araç panelleri (React/Vue SPA + Functions API), dokümantasyon siteleri (Docusaurus, MkDocs), pazarlama kampanya sayfaları (hızlı oluşturma, yüksek performans), prototipler ve MVP’ler (hızlı deploy, düşük maliyet), Blazor WebAssembly uygulamaları (.NET ekosistemi). Tam sunucu tarafı rendering gerektiren uygulamalar (Next.js SSR, Nuxt.js SSR) için ise Azure App Service veya Container Apps daha uygun alternatiflerdir.
staticwebapp.config.json Detaylı Yapılandırma
Azure Static Web Apps’in davranışını kontrol eden merkezi yapılandırma dosyası staticwebapp.config.json‘dur. Bu dosyada yönlendirme kuralları, güvenlik başlıkları, kısıtlamalar ve platform ayarları tanımlanır.
Yönlendirme kurallarıyla belirli URL kalıplarını farklı hedeflere yönlendirebilirsiniz. SPA fallback tanımı ile 404 hatalarını /index.html‘e yönlendirerek client-side routing’in düzgün çalışmasını sağlarsınız. Wildcard route patterns ile /api/* yolunu backend API’ye, /admin/* yolunu kimlik doğrulama gerektiren alana yönlendirirsiniz. Response override’lar ile 404 sayfasını özelleştirebilir, 401 hatalarını login sayfasına yönlendirebilirsiniz.
Güvenlik başlıkları (security headers) yapılandırması modern web güvenliğinin temellerinden biridir. Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, Referrer-Policy ve Permissions-Policy başlıklarını globalHeaders bölümünde tanımlayarak uygulamanızı XSS, clickjacking ve diğer yaygın saldırılara karşı korursunuz.
CI/CD Pipeline Detayları
GitHub Actions workflow dosyası .github/workflows/azure-static-web-apps-*.yml adıyla otomatik oluşturulur. Bu workflow’u ihtiyacınıza göre özelleştirebilirsiniz: Node.js versiyonunu belirleyin, build öncesi veya sonrası adımlar ekleyin (test çalıştırma, lint kontrolü, environment variable enjeksiyonu), caching ile build süresini hızlandırın.
Azure DevOps ile de entegrasyon mümkündür. Azure DevOps pipeline YAML dosyasında AzureStaticWebApp@0 task’ını kullanarak aynı deploy sürecini DevOps tarafında yönetebilirsiniz. Bu seçenek GitHub kullanmayan ekipler için geçerlidir.
Sık Sorulan Sorular
Next.js SSR uygulamasını Static Web Apps’te çalıştırabilir miyim?
Kısıtlı olarak evet. Static Web Apps, Next.js’in static export modunu (next export) tam destekler. Hybrid rendering (SSR + SSG) için ise preview aşamasında destek bulunmaktadır. Ancak tam SSR ihtiyacı için Azure App Service veya Container Apps daha uygun seçeneklerdir. Gatsby, Astro static build ve Nuxt.js generate modu gibi tamamen statik build üreten framework’ler ideal uyum sağlar.
Ücretsiz tier gerçekten production kullanımına uygun mu?
Kişisel projeler ve düşük trafikli siteler için yeterlidir. Ancak ücretsiz tier’da SLA garantisi yoktur, bant genişliği 100 MB/ay ile sınırlıdır ve staging ortamları yalnızca PR bazlıdır. Ticari projeler için Standard tier önerilir: %99.95 SLA, 100 GB/ay bant genişliği ve 5 kalıcı staging ortam dahildir.
Custom domain’de wildcard subdomain kullanabilir miyim?
Evet, Standard tier’da wildcard SSL sertifikası ile *.example.com biçiminde wildcard subdomain kullanabilirsiniz. DNS yapılandırmasında CNAME kaydı ekleyerek alt alan adlarını Static Web App’e yönlendirirsiniz.
Sonuç
Azure Static Web Apps, modern web uygulamalarını hızlı, güvenli ve ekonomik biçimde yayınlamak için tasarlanmış zarif bir çözümdür. GitHub entegrasyonu, otomatik CI/CD, yerleşik kimlik doğrulama, küresel CDN ve sunucusuz API desteğiyle geliştirici deneyimini üst düzeye taşır.
Cloudspark modern web geliştirme hizmetlerimizle Static Web Apps projelerinizin tasarımı ve dağıtımında destek sağlıyoruz.
