Azure Static Web Apps, Azure Functions entegrasyonu sayesinde bize serverless API endpoint hizmeti de sağlıyor. Burada 2 farklı konfigurasyon mevcut:
- Managed functions: İlk bölümden hatırlarsanız statik web uygulamasında API ile ilgili bir kısım vardı, işte bu kısımda bir Azure Function yazarak belirli kısıtlamalar dahilinde statik web uygulaması ile birlikte deploy edebiliyoruz.
- Bring your own functions: Mevcut Azure Function’larınızı kullanabiliyorsunuz.
Aradaki farkları Resim-1‘deki tablo üzerinden görebilirsiniz.
Resim-1
Bu makalede 2. tip üzerinden bir örnek yapacağım.
İkinci bölümde Azure DevOps üzerinden publish ettiğim Blazor uygulamasına, bu bölümde Azure Functions entegre edeceğim. Öncelikle Resim-2‘de göreceğiniz özelliklerde yeni bir Azure Function oluşturacağım. İşletim sistemi olarak özellikle Windows seçtim çünkü portal üzerinde geliştirme yapacağım ve Linux’ta bu özellik henüz desteklenmiyor. Örnek olarak da Azure Tips & Tricks sitesinde yer alan Blazor and Azure Functions for Serverless Websites makalesindeki HTTP Trigger örneğini uygulamak istiyorum.
Resim-2
Azure Function oluştuktan sonra Functions sekmesine gelerek yeni bir fonksiyon oluşturacağım. HTTP trigger seçerek devam ediyorum (Resim-3).
Resim-3
Code + Test sayfasında aşağıda göreceğiniz şekilde geriye tarih dönecek şekilde değiştiriyorum. İlgili kod bloğunu Azure Tips and Tricks sitesindeki makaleden alabilirsiniz (Resim-4).
Resim-4
Kodu ekledikten sonra, Save butonu ile kaydedip, ne olur ne olmaz diyerek test de edebilirsiniz (Resim-5).
Resim-5
Şimdi de ekleyeceğim bu fonksiyonun url bilgisine ihtiyacım var. Bunu da Overview sekmesinde yer alan Get Function Url butonu ile alabiliyorum (Resim-6).
Resim-6
Fonksiyon hazır, şimdi de kod üzerinde bu fonksiyonu çağırmak için gerekli güncellemeyi yapacağım. Azure Tips and Tricks üzerindeki makalede yer alan örnek kodu, Pages altında yer alan Index.razor dosyasına ekliyorum. Ek olarak da function url olarak da az önce kopyaladığım function url’i Resim-7‘da göreceğiniz şekilde yapıştırıyorum.
Resim-7
Fonksiyonu bu şekilde çağırabilirsiniz. Ama CORS konusunda sorun yaşar mıyım diye düşünerek bu şekilde kullanmak istemiyorum. Bu durumda bu fonksiyonu Azure Static Web App’e bağlayarak “kendi üzerinden” kullanmayı deneyeceğim (Resim-8).
Resim-8
Index.razor sayfasında da Azure Function url’inden domain bilgisini siliyorum (Resim-9).
Resim-9
Commit butonuna tıkladıktan sonra pipeline çalışmaya başlayacak (Resim-10) ve tamamlandığında ana sayfada tarih ve saat bilgisini görmeyi bekleyeceğim.
Resim-10
Sayfayı açtığımda değişikliğin yansıdığını ve fonksiyonun çalıştığını gördüm (Resim-11).
Resim-11
Azure Static Web Apps henüz yeni bir servis ve şu anda çok fazla özelliği bulunmuyor, ama özellikle Azure Functions entegrasyonu oldukça başarılı. İleride yeni entegrasyon ve farklı seçenekler de gelecektir diye düşünüyorum.
Referanslar
https://docs.microsoft.com/en-gb/azure/static-web-apps/overview
https://microsoft.github.io/AzureTipsAndTricks/blog/tip286.html
https://docs.microsoft.com/en-gb/azure/static-web-apps/apis
TAGs: Azure, Azure DevOps, Azure Repos, Azure Pipelines, Azure Functions, Git, Azure Static Web Apps, Static Web App, Development, Blazor, CI/CD, Visual Studio Code, VSCode
