Geçen hafta bir yatırım danışmanlık firması için kampanya sayfası yayına aldık. Hedef tarih: 5 gün. Frontend stack: Next.js 15. Backend: tek bir REST endpoint. Trafik tahmini: kampanya açılış günü dakikada 4000 ziyaret, 3 saat sonra normalleşir. Geleneksel App Service ile yapsak: provision et, autoscale ayarla, CDN entegre et, deployment slot kur, key vault bağla — 2 gün gider. Azure Static Web Apps ile: 90 dakika.
Static Web Apps (SWA) Azure’un “frontend için doğmuş” hizmeti. App Service ile karıştırılır ama aslında çok farklı bir şey. Bu yazıda hangi senaryoda SWA gerçekten doğru tercih, hangisinde başka bir hizmete yönelmeniz gerektiğini, fiyatlama gerçeklerini ve sahada en sık karşılaştığımız üç tuzağı aktarıyorum.
SWA tam olarak ne?
Üç parçalı bir hizmet:
- Statik içerik dağıtımı: Build çıktısı (HTML, CSS, JS bundle, image) global CDN’e basılır. 100+ edge location’dan servis edilir.
- Serverless API: Aynı projede /api klasörüne attığınız Azure Functions endpoint’leri otomatik deploy olur. Ayrı bir Function App’e gerek kalmaz.
- CI/CD entegrasyonu: GitHub veya Azure DevOps repo’suna her commit otomatik deploy. Pull request başına önizleme ortamı (staging URL) otomatik üretilir.
Diğer paket içi özellikler: Free SSL sertifika, custom domain, kimlik doğrulama (Microsoft, GitHub, Twitter, Apple Sign-In) entegrasyonu, role-based authorization. Bunların her biri ayrı ayrı kurulduğunda 4-5 saatlik konfigürasyon işidir; SWA’da ücretsiz ve önceden ayarlı geliyor.
Saha kuralı: SWA frontend-first uygulamalar için. Eğer projeniz API ağırlıklı veya backend süreçleri uzun ise SWA değil, App Service veya Container Apps’e bakın. SWA’nın güçlü yanı static + serverless API kombinasyonu.
Tipik Türkiye senaryoları
Senaryo 1: Marketing/landing page
Kampanya sitesi, ürün sayfası, etkinlik mikro sitesi. Next.js veya Astro ile inşa edilmiş, statik export. Ayda binlerce ziyaret, ani spike’lar (TV reklamı, e-mail patlaması, lansman). SWA Free tier’ı bunun için biçilmiş kaftan. CDN ücretsiz, 100 GB bandwidth dahil.
Senaryo 2: Admin paneli + REST API
React tabanlı bir iç yönetim paneli, Auth ile korumalı, /api altında 10-15 endpoint. SWA Standard tier’da hem JWT validation hem rol bazlı erişim hem custom auth. Ekstra kimlik servisi kurmaya gerek yok.
Senaryo 3: SaaS landing + dokümantasyon
Ürün ana sayfası + Docusaurus tabanlı doc site + blog. Çok dilli (Türkçe, İngilizce). Ana site SWA, dokümantasyon başka SWA, ortak custom domain altında /docs path. Tek subscription, kontrol kolay.
SWA vs App Service vs Container Apps
| Özellik | SWA | App Service | Container Apps |
|---|---|---|---|
| Statik dağıtım | Native, CDN dahil | Mümkün ama ekstra CDN gerek | Container içinde, CDN ekstra |
| Serverless API | /api klasöründe Functions | Var ama tam Function değil | KEDA-based scaling |
| CI/CD | Otomatik, sıfır config | Manuel veya pipeline | Manuel veya pipeline |
| PR preview | Native, otomatik | Slot ile, manuel | Manuel revisions |
| Maliyet (düşük trafik) | Free tier var | Min B1 ~280 TL/ay | Tüketim bazlı |
| Backend uzun süreli işlem | Hayır (Functions limiti) | Evet | Evet |
| WebSocket | Sınırlı | Tam destek | Tam destek |
Karar sırası: Frontend ağırlıklı + API kısa → SWA. Backend ağırlıklı + farklı runtime → Container Apps. Geleneksel monolit web app → App Service.
Maliyet: Sahadan üç gerçek hesap
| Senaryo | Aylık trafik | SWA tier | Aylık fatura (TL) |
|---|---|---|---|
| Kampanya sayfası | 50K ziyaret | Free | 0 TL |
| Kurumsal blog | 200K ziyaret | Free (sınırı zorlar) | 0-200 TL |
| SaaS web app | 5M API call | Standard | ~3.500 TL |
Free tier limitleri: 100 GB bandwidth, 0.5 GB max app size, 100 isteğe kadar Functions çağrısı/saat. Çoğu KOBİ ve startup için yeterli. Standard tier $9/ay sabit + bandwidth aşımı + Functions kullanım. Çıkış maliyeti çok düşük.
Hızlı başlangıç: 15 dakika
Bir Next.js projesini SWA üzerine yayınlamak gerçekten 15 dakikada bitiyor:
# 1. Repo hazır (örn. github.com/cloudspark/landing)
# 2. Azure CLI ile SWA oluştur
az staticwebapp create
--name swa-landing-prod
--resource-group rg-web-prod
--location 'westeurope'
--source 'https://github.com/cloudspark/landing'
--branch 'main'
--app-location '/'
--output-location 'out'
--login-with-github
# 3. CLI GitHub Actions workflow'u otomatik üretir
# 4. İlk deploy 3-5 dakikada biter
# 5. URL: https://swa-landing-prod.azurestaticapps.net
Custom domain eklemek (örn. cloudspark.com.tr):
az staticwebapp hostname set
--name swa-landing-prod
--resource-group rg-web-prod
--hostname 'kampanya.cloudspark.com.tr'
# CNAME kaydı ekle, SSL otomatik gelir
Sahada en sık üç hata
1. Backend Function’ları SWA içinde değil ayrı Function App’te tutmak
SWA’nın değer önerisi /api klasöründeki Functions’ı otomatik deploy etmesi. “Biz zaten bir Function App’imiz vardı” diye dışarıdan bağlamak SWA’nın yarısını kaybetmek. CI/CD entegrasyonu, auth otomatiği, route eşleme — hepsi bütünleşik /api ile çalışır.
2. Auth provider seçimini son ana bırakmak
SWA’nın built-in auth’u var (Microsoft, GitHub, Twitter). Eğer Auth0, Cognito, Firebase gibi 3rd party kullanacaksanız, o entegrasyonu projenin başında planlayın. SWA custom auth API’sini destekler ama doğru config yapmadan deploy ederseniz auth flow patlar.
3. staticwebapp.config.json dosyasını es geçmek
Bu dosya SWA’nın “router”ı. Routing kuralları, auth kuralları, response header’lar, MIME type’lar burada tanımlanır. Yoksa: 404 sayfası generic, security header’lar yok, SPA fallback çalışmaz.
{
"routes": [
{ "route": "/admin/*", "allowedRoles": ["admin"] },
{ "route": "/api/health", "allowedRoles": ["anonymous"] }
],
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/api/*", "/images/*"]
},
"globalHeaders": {
"strict-transport-security": "max-age=63072000; includeSubDomains",
"x-frame-options": "DENY",
"x-content-type-options": "nosniff"
},
"responseOverrides": {
"404": { "rewrite": "/404.html" }
}
}
Pull Request preview: Ekibin en sevdiği özellik
Her PR otomatik bir staging URL’ye deploy oluyor. URL: https://swa-landing-prod-{pr-number}.westeurope.azurestaticapps.net. Reviewer linke tıklar, gerçek ortamda test eder, onaylar veya yorum bırakır.
Bu özellik özellikle pazarlama-mühendislik işbirliğinde altın değerinde. “Yeni hero section’ı görelim” diye lokal kurulum yapmak yerine staging URL paylaşılıyor. Ürün ekibi mobilden de kontrol ediyor.
Türkiye için latency notu
SWA içeriği global CDN’den servis edildiği için Türkiye’den gelen kullanıcı için latency 25-50 ms aralığında. Karşılaştırma: standart App Service West Europe’tan ~80 ms. Bu fark first-paint metriklerinde görünür hale geliyor; özellikle mobil deneyim için anlamlı.
Sık Sorulan Sorular
SWA’da Node.js, Python, .NET hangi runtime’lar destekleniyor?
API tarafında Functions destekleyen tüm runtime’lar: Node.js 18/20, Python 3.10/3.11, .NET 8, Java 17. Frontend tarafı runtime-agnostic; herhangi bir build çıktısı (statik HTML/JS) çalışır.
Database connection nasıl yapılır?
Functions içinde standart connection string’lerle. Cosmos DB, Azure SQL, PostgreSQL, MongoDB — hepsi çalışır. SWA’nın built-in Database Connections özelliği var (preview), Cosmos veya SQL’i kod yazmadan REST endpoint’e dönüştürür.
Custom WAF veya gelişmiş DDoS koruma var mı?
Yok, default DDoS koruma var ama Front Door + WAF gerekirse SWA’yı arkasına alabilirsiniz. Standard tier’da Enterprise edge entegrasyonu var, bazı gelişmiş güvenlik özellikleri açılır.
Multi-region deployment mümkün mü?
SWA içeriği zaten global CDN üzerinden dağılır. Kontrol düzlemi tek region’da. Multi-region API failover ihtiyacınız varsa Front Door + iki ayrı SWA backend pattern’i tercih edilir.
SWA Free tier limitleri yetmezse upgrade etmek otomatik mi?
Hayır, manuel upgrade. Free → Standard geçiş Azure Portal’dan birkaç tıkla yapılır, kesintisiz. Bandwidth aşımında uyarı gelir, otomatik kapanma olmaz.
Sonuç
Azure Static Web Apps frontend-first projeler için Azure’un en hızlı dağıtım mekanizması. Free tier’la başlayıp Standard’a geçmek opsiyonel; çoğu KOBİ ve startup Free tier’da aylarca yaşıyor. Asıl güzelliği geliştirici deneyiminde — PR preview, otomatik CI/CD, built-in auth, /api klasörüyle entegre Functions — bunlar bir araya geldiğinde sayfa yayınlama hızı dramatik artıyor.
SWA kurulumu, mimari tasarımı veya migration danışmanlığı için CloudSpark olarak sabit fiyat paketler sunuyoruz. Detaylı görüşme için iletişim sayfasından ulaşabilirsiniz.
