İlk bölümde Azure Static Web Apps üzerine GitHub üzerinde bulunan bir Blazor uygulamasını GitHub actions ile deploy etmiştim. Bu bölümde ise GitHub yerine Azure DevOps kullanarak, Azure Repos üzerinde bulunan bir Blazor uygulamasını Azure Pipelines ile Azure Static Web Apps’e deploy edeceğim. Aynı Azure Static Web Apps servisini kullanmak yerine onu silerek yeni bir tane oluşturuyorum. Bu kez Deployment details altında Other seçerek devam ediyorum (Resim-1).
Resim-1
Şimdi sırada yeni bir Azure DevOps projesi oluşturmaya geldi, myblazorapp adında yeni bir proje oluşturuyorum (Resim-2)
Resim-2
Repos-Files altında ise Clone ve mevcut repoyu push etmek için gerekli komutlar var. Local’de bir repo oluşturup onu push ederek devam edelim.
Resim-3
İlk bölümdeki gibi yeni bir Blazor app oluşturduktan sonra, bu kez source control altında Initialize Repository seçeneği ile local bir repo oluşturacağım (Resim-4).
Resim-4
Sonrasında da commit işlemini gerçekleştiriyorum (Resim-5).
Resim-5
Resim-3’te yer alan git remote add ve git push komutlarını terminal üzerinde çalıştırarak local commit’i Azure Repos’a push ediyorum (Resim-6).
Resim-6
Azure Repos altında kaynak kodlar hazır, sırada bu kodları Azure Static Web Apps’a deploy edeceğim bir pipeline oluşturma işlemi var. Bunun için de Set up build butonuna tıklıyorum (Resim-7).
Resim-7
Configure your pipeline ekranında, Starter pipeline seçeneği ile devam edeceğim (Resim-8).
Resim-8
Sağ tarafta yer alan Show assistant butonuna tıklayarak mevcut tasklara bakalım (Resim-9).
Resim-9
Çıkan arama çubuğuna “static” yazdığımda henüz preview da olsa Deploy Azure Static Web App task’ını buldum. Eklemeden önce steps altındaki kısımları da siliyorum (Resim-10).
Resim-10
Eklemeden önce doldurmam gereken alanlar var. İlk bölümden de hatırlayacağınız App Location ve Output Location ‘a ek olarak bir de Azure Static Web Apps Api Token bilgisine ihtiyacım var. Hangi servise bağlanacağı ve gerekli yetkilendirme işlemleri bu değer altında yer alıyor (Resim-11).
Resim-11
Deployment token bilgisini almak için Azure Portal üzerinden Static Web App servisinin Overview sekmesine geliyorum ve burada yer alan Manage deployment token butonuna tıklıyorum ve token’ı kopyalıyorum (Resim-12).
Resim-12
Artık her şey hazır, Save and run butonuna tıklıyorum (Resim-13).
Resim-13
Pipeline çalışmaya başladı, buradan hangi işlemlerin gerçekleştiğini detayı bir şekilde takip edebilirsiniz (Resim-14).
Resim-14
Pipeline bittikten sonra da Static Web App url’e tıklayarak uygulamanın çalıştığını görebilirsiniz. Burada Settings altında yer alan Environments sekmesinin disabled olduğunu farketmişsinizdir. Azure DevOps seçeneğinde Environments kullanılmıyor.
Resim-15
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: Azure, Azure DevOps, Azure Repos, Azure Pipelines, Git, Azure Static Web Apps, Static Web App, Development, Blazor, CI/CD, Visual Studio Code, VSCode
