Azure Static Web Apps, GitHub ya da Azure Repos üzerinde yer alan full stack web uygulamalarınızın Continous Delivery (CD) sürecini otomatikleştiren bir servis olarak özetlenebilir. Servisi oluşturduğunuz zaman, GitHub ya da Azure Repos üzerindeki değişiklikleri monitör ederek otomatik olarak deployment işlemini gerçekleştirdiği için, ekstra bir konfigürasyon ya da işlem yapmaya gerek kalmamaktadır.
Resim-1
Statik web uygulamaları Angular, React, Svelte, Vue ve Blazor gibi teknolojilerle geliştirilmekte ve server tarafında herhangi bir render işlemine ihtiyaç duymamaktadır. Burada da “Azure Static Web Apps’in geleneksel web server’dan farkı nedir?” sorusuna cevap için de bir giriş yapmış oldum. Statik web uygulamaları HTML, CSS, JavaScript ve imaj dosyalarından oluştuğu için geleneksel yöntemde bir sunucudan yayınlanırken, Azure Static Web Apps ile coğrafi olarak dağıtık bir yapı ile sunulmaktadır. Özetle istek yapan kullanıcının lokasyonuna en yakın bölgeden erişilebilmektedir.
Azure Static Web Apps, ayrıca Azure Functions desteği de sunmakta ve bunları da serverless bir yapıda entegre etmenize olanak sağlanamaktadır. Ücretsiz olarak SSL sertifikası sunmasının yanında, custom domain ve staging gibi özellikleri de desteklemektedir.
Gatsby, Hugo, VuePress gibi static web uygulama framework’lerini kullanabileceğiniz gibi Next.js ve Nuxt.js ile yazdığınız web uygulamalarını da kullanabilirsiniz.
Azure Static Web Apps’i, Blazor ve GitHub Actions kullanarak test edelim. Öncelikle terminal ekranından Resim-2’de göreceğiniz gibi dotnet new blazorwasm -o myblazorapp komutu kullanarak yeni bir blazor uygulaması oluşturarak başlamak istiyorum. Sonrasında da uygulama klasörü içerisine girip VS Code’u code . komutu ile açıyorum.
Resim-2
GitHub’a publish etmeden önce gereksiz dosyaların publish edilmesini engellemek için bir gitignore dosyasına ihtiyacım var. Bunun için de isteseniz terminal ekranından, isterseniz de VS Code terminali kullanarak, uygulama klasörü içerisinde dotnet new gitignore komutu ile gitignore dosyasını oluşturabilirsiniz (Resim-3). Sonrasında da Publish to GitHub butonuna tıklıyorum. Burada private ya da public bir repo mu oluşturmak istediğinizi soracak, örnekte private repo seçerek kodları GitHub’a publish ediyorum.
Resim-3
Sonrasında da GitHub hesabına giderek, publish ettiğim yeni repoyu kontrol ediyorum (Resim-4).
Resim-4
GitHub repomuz da hazır olduğuna göre artık Azure Static Web Apps servisini oluşturabiliriz. Bu işlem için de Azure Portal üzerinden ilerleyelim. Web sekmesi altında ya da arama çubuğundan da Azure Static Web Apps’e ulaşabilirsiniz. Standart olarak resource group seçimi ve bir isim belirledikten sonra sonra, hosting plan seçmemiz gerekiyor. Burada da ücretsiz ve standart plan seçeneklerimiz var. İki plan arasındaki farklara Resim-5’ten ulaşabilirsiniz.
Resim-5
Sonrasında da Azure Functions API ve staging ortamları için region seçimini yapmamız gerekiyor. Bütün bu klasik seçimlerden sonra ise Azure Static Web Apps’i entegre edeceğimiz kısıma geldik. GitHub ve “Diğer“ seçenekleri ile karşı karşıya kalıyorum, burada “Diğer” dediği seçenek ise aslında Azure DevOps (Resim-6)
Resim-6
Sign in with GitHub butonuna bastıktan sonra GitHub hesabınıza giriş yapmanızı ve Azure Static Web Apps’e yetki vermenizi isteyecek. Sonrasında da Resim-7’de göreceğiniz gibi sizden organizasyon, repo ve branch seçmenizi isteyecek. Build Preset olarak da Blazor seçtikten sonra, 3 seçenek daha gelecek. Burada da uygulama yapınıza uygun değerleri girmeniz gerekiyor. Uygulama Client klasörü altında değil direkt olarak root altında olduğu için “/” , bir Api olmadığı için de Api location’ı boş bıraktım. Output location değerini de Blazor için varsayılan değer olan wwwroot olarak bırakıyorum.
Resim-7
Azure Static Web Apps servisini oluşturduktan sonra, GitHub reponuza bakarsanız, bir workflow dosyasının eklenmiş olduğunu göreceksiniz (Resim-8).
Resim-8
GitHub reponuza ait Actions’a giderseniz de worflow’un başladığını görebilirsiniz (Resim-9).
Resim-9
Detayları görmek için de workflow üzerine tıklayabilirsiniz (Resim-10 ve 11)
Resim-10
Resim-11
Azure Portal üzerinden Static Web App servisine ait Overview sekmesine geldiğinizde ise web uygulamamıza ait otomatik bir domain adı ile üretilmiş bir url bulabilirsiniz (Resim-12).
Resim-12
Bu url’e tıkladığımızda ise Resim-13’de göreceğiniz gibi Blazor uygulamamın çalıştığını görebiliyorum.
Resim-13
Sol menüdeki seçeneklere de kısaca bahsetmek gerekirse:
Configuration: İsim/Değer şeklinde ve ortama özel ayarları girebildiğiniz kısım (application settings).
Application Insights: Neredeyse bütün Azure servislerinde gelen Application Insights seçeneği, eğer Azure Function kullanmıyorsanız bu özelliği kullanamıyorsunuz.
Custom Domains: Buradan otomatik oluşturulmuş alan adı yerine kendi alan adınızı kullanabilirsiniz.
Functions: Azure Functions entegrasyonu ile ilgili ayarların olduğu kısım. Buradan mevcuttaki bir Azure Function’ı uygulamaya bağlayabilirsiniz.
Environments: Staging ortamlarını görebileceğiniz kısım.
Hosting Plan: Servisi oluştururken seçtiğiniz hosting plan detaylarını görebilir ve planı değiştirebilirsiniz (Resim-5).
Bu konuyla ilgili sorularınızı alt kısımda bulunan yorumlar alanını kullanarak sorabilirsiniz.
Referanslar
https://docs.microsoft.com/en-gb/azure/static-web-apps/overview
TAGs: GitHub, GitHub Actions, Development, Azure, Azure Static Web Apps, Static Web App, Blazor, CI/CD, Visual Studio Code, VSCode
