Azure Frontend Geliştirme Rehberi: Azure Static Web Apps

## Azure Static Web Apps Nedir ve Frontend Dünyasındaki Yeri **Azure Static Web Apps (SWA)**, modern frontend geliştirme iş akışlarını otomatize etmek ve ölçeklenebilir web uygulamalarını bulut üzerinde barındırmak için tasarlanmış bir Microsoft hizmetidir. Geleneksel sunucu tabanlı barındırma çözümlerinin aksine, SWA; statik içerikleri (HTML, CSS, JavaScript) global bir içerik dağıtım ağından (**CDN**) sunarken, dinamik arka uç gereksinimlerini **Azure Functions** aracılığıyla sunucusuz (serverless) bir mimariyle yönetir. Modern web ekosisteminde hız ve güvenlik kritik öneme sahiptir. Azure, geliştiricilere GitHub veya Azure DevOps depolarıyla tam entegre bir yapı sunarak, her kod itildiğinde otomatik derleme ve dağıtım (CI/CD) süreçlerini başlatır. Bu yaklaşım, altyapı yönetimini ortadan kaldırarak geliştiricilerin sadece kullanıcı deneyimine odaklanmasını sağlar. ## Azure vs. AWS Amplify vs. Vercel: Karşılaştırmalı Analiz Frontend projeleri için bulut sağlayıcısı seçerken performans, maliyet ve ekosistem entegrasyonu belirleyici faktörlerdir. Aşağıdaki tablo, Azure Static Web Apps'i en yakın rakipleriyle karşılaştırmaktadır: | Özellik | Azure Static Web Apps | Vercel | AWS Amplify | | :--- | :--- | :--- | :--- | | **Entegrasyon** | GitHub, Azure DevOps | GitHub, GitLab, Bitbucket | AWS Ecosystem, GitHub | | **Serverless Desteği** | Azure Functions (Yerleşik) | Vercel Functions | AWS Lambda | | **Global Dağıtım** | Microsoft Global Network | Edge Network | Amazon CloudFront | | **Ücretsiz Katman** | Oldukça geniş (Kişisel kullanım) | Mevcut (Hobi projeleri) | Sınırlı (12 ay) | | **Kurumsal Güvenlik** | Azure Active Directory | SSO (Enterprise) | AWS IAM | > **Not:** Kurumsal projelerde Azure Active Directory entegrasyonu ve Microsoft'un global veri merkezi ağı, Azure'u güvenlik ve uyumluluk açısından bir adım öne çıkarmaktadır. ## Azure Static Web Apps Kurulumu ve İlk Proje Dağıtımı Azure üzerinde bir frontend projesi başlatmak için öncelikle yerel ortamınızda **Azure Static Web Apps CLI** aracını kurmanız önerilir. Bu araç, bulut ortamını yerelinizde simüle etmenize olanak tanır. ```bash npm install -g @azure/static-web-apps-cli ``` Projenizi oluşturduktan sonra, Azure portalı veya CLI üzerinden dağıtım sürecini başlatabilirsiniz. Aşağıdaki komut, yerel geliştirme sunucusunu başlatır: ```bash swa start http://localhost:3000 ``` ## GitHub Actions ile Otomatik CI/CD Entegrasyonu Azure SWA'nın en güçlü yönlerinden biri, GitHub depolarıyla olan derin entegrasyonudur. Bir SWA kaynağı oluşturduğunuzda, Azure otomatik olarak `.github/workflows` dizini altına bir YAML dosyası ekler. ```yaml # .github/workflows/azure-static-web-apps.yml name: Azure Static Web Apps CI/CD on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main jobs: build_and_deploy_job: if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Build And Deploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: "upload" app_location: "/" # Uygulama kaynak kodu api_location: "api" # Azure Functions kodu output_location: "build" # Derleme sonrası oluşan klasör ``` ## API Yönetimi: Azure Functions ile Sunucusuz Mimari Frontend uygulamalarınızın bir veritabanına veya harici bir servise erişmesi gerektiğinde, Azure Functions devreye girer. SWA, `/api` rotası altındaki tüm istekleri otomatik olarak ilgili fonksiyonlara yönlendirir. ```javascript // api/GetProducts/index.js module.exports = async function (context, req) { context.res = { status: 200, body: [ { id: 1, name: "Azure Cloud Services" }, { id: 2, name: "Static Web Apps" } ] }; }; ``` Frontend tarafından bu API'ye erişim oldukça basittir: ```javascript async function fetchProducts() { const response = await fetch('/api/GetProducts'); const data = await response.json(); console.log(data); } ``` ## Azure Üzerinde Modern Framework Konfigürasyonu React, Vue veya Angular gibi SPA (Single Page Application) frameworkleri kullanırken, yönlendirme (routing) ayarlarının doğru yapılması gerekir. Azure SWA, `staticwebapp.config.json` dosyası üzerinden bu yapılandırmayı yönetir. ```json { "navigationFallback": { "rewrite": "index.html", "exclude": ["/images/*.{png,jpg,gif}", "/css/*"] } } ``` ## Güvenlik ve Kimlik Doğrulama Entegrasyonu Azure SWA, yerleşik bir kimlik doğrulama mekanizması sunar. Azure Active Directory, GitHub ve Twitter gibi sağlayıcılar varsayılan olarak desteklenir. Kullanıcının oturum açıp açmadığını kontrol etmek için aşağıdaki gibi bir yapı kullanılabilir: ```javascript async function getUserInfo() { const response = await fetch('/.auth/me'); const payload = await response.json(); const { clientPrincipal } = payload; return clientPrincipal; } ``` Rol tabanlı erişim kontrolü (RBAC) için ise yapılandırma dosyasına kurallar eklenebilir: ```json { "routes": [ { "route": "/admin/*", "allowedRoles": ["administrator"] } ] } ``` ## Özel Alan Adı ve SSL Yönetimi Azure, özel alan adlarınızı (custom domains) kolayca bağlamanıza ve SSL sertifikalarını ücretsiz olarak yönetmenize olanak tanır. CNAME kayıtlarını Azure portalındaki değerlerle eşleştirmeniz yeterlidir. ```bash # Azure CLI ile alan adı ekleme örneği az staticwebapp hostname set -n my-app-name --hostname-name www.example.com ``` ## Azure CDN ve Edge Computing ile Performans Optimizasyonu Azure SWA, içerikleri varsayılan olarak Microsoft'un global **Edge** noktalarında önbelleğe alır. Ancak daha agresif bir performans için `staticwebapp.config.json` içinde cache header'ları tanımlanabilir. ```json { "mimeTypes": { ".json": "application/json; charset=utf-8" }, "globalHeaders": { "Cache-Control": "public, max-age=31536000, immutable" } } ``` ## Frontend Geliştiriciler İçin Best Practices 1. **Çevre Değişkenleri:** Hassas verileri asla koda gömmeyin. Azure Portal üzerinden 'Application Settings' kısmını kullanın. 2. **Staging Ortamları:** Pull Request (PR) açıldığında Azure otomatik olarak geçici bir staging URL'i oluşturur. Canlıya almadan önce burada test yapın. 3. **Küçük Fonksiyonlar:** API tarafında karmaşık yapılar yerine, tek işi yapan küçük Azure Functions tercih edin. 4. **Lighthouse Entegrasyonu:** CI/CD süreçlerine Lighthouse denetimlerini ekleyerek performans düşüşlerini engelleyin. ## Sık Yapılan Hatalar ve Sorun Giderme * **404 Hatası (Refresh sonrası):** SPA yönlendirmesi yapılandırılmadığında oluşur. `navigationFallback` ayarını kontrol edin. * **CORS Sorunları:** API ve Frontend aynı domain altında çalıştığı için normalde CORS hatası alınmaz. Eğer harici bir API kullanıyorsanız, Azure Portal'dan CORS ayarlarını yapın. * **Build Hataları:** `output_location` klasörünün (dist, build, out vb.) framework'ünüzle eşleştiğinden emin olun. ## Sık Sorulan Sorular (SSS) 1. **Azure Static Web Apps tamamen ücretsiz mi?** Kişisel projeler ve hobi amaçlı kullanım için oldukça geniş bir ücretsiz katman sunar. Kurumsal özellikler (SLA, özel kimlik doğrulama) için standart paket gereklidir. 2. **Hangi frameworkleri destekliyor?** React, Angular, Vue, Svelte, Next.js (Static Export), Nuxt.js ve Hugo gibi tüm popüler statik site oluşturucuları destekler. 3. **Veritabanı bağlantısı nasıl yapılır?** Azure Functions üzerinden Azure Cosmos DB veya Azure SQL Database gibi servislere güvenli bir şekilde bağlanabilirsiniz. 4. **Kendi SSL sertifikamı kullanabilir miyim?** Evet, ancak Azure zaten ücretsiz ve otomatik yenilenen SSL sertifikası sağladığı için genellikle buna gerek kalmaz. 5. **Cold Start sorunu var mı?** Azure Functions tüketim planında cold start görülebilir; ancak SWA ile entegre yapıda bu süre optimize edilmiştir. ## Özet ve Sonuç Azure Static Web Apps, modern frontend geliştirme süreçlerini kurumsal düzeyde bir altyapıyla birleştirir. CI/CD entegrasyonu, sunucusuz API desteği ve global CDN dağıtımı sayesinde, geliştiricilerin altyapı karmaşıklığından kurtulmasını sağlar. Özellikle Microsoft ekosistemini kullanan şirketler için hem maliyet hem de güvenlik açısından en mantıklı tercihtir.