GITHub Actions ile API'yi yayımlama
API'nizi web uygulamanıza eklediniz ve ikisi de yerel olarak çalışıyor. Şimdi API'nizi ve uygulamanızı Azure Static Web Apps'te yayımlamanın zamanı geldi.
Azure Static Web Apps örneğini oluşturduğunuzda ve ana dalınızı izlemesini istediğinizde, sizin için bir GitHub Eylemi oluşturuldu. GitHub Eylemi, deponuzun ana dalında yapılan değişiklikleri dinler ve main'a yönelik bir işleme veya çekme isteği algıladığında uygulamanızı derleyip yayımlar.
API'niz için klasör konumunu sağladığınız Azure Static Web Apps kaynağını ne zaman oluşturduğunuzu hatırlayabilirsiniz. varsayılan değerini sağladınız api. Ancak, o sırada klasörde bir API'niz api olmadığından Azure Static Web Apps bir API yayımlamayı denemedi.
Şimdi, her şey değişiyor.
GitHub Eylem yapılandırması
.github/workflows klasörü GitHub Action dosyanızı içerir. Dosya, web uygulamanızın, API'nizin ve derleme yapıtlarınızın konumları için ayarları içerir. Azure Static Web Apps kaynağınızı oluştururken seçtiğiniz konumlar artık burada gösterildiği gibi bu dosyada bulunur:
app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional
app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional
app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional
app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional
değeriniz api_location , klasörünüzdeki api API'nize işaret etmek için doğru değere ayarlanmıştır.
GitHub Eylemini Tetikleme
GitHub Eylemi, ana dalınızda bir değişiklik algıladıktan sonra web uygulamanızı ve API'nizi derlemeye ve yayımlamaya hazırdır. GitHub Eylemini tetikleyebilmek için doğrudan taahhüt edebilir veya ana dalı için bir çekme isteği oluşturabilirsiniz. Ana dalda algılanan değişiklikler, github eylemini tetikler ve uygulamayı canlı web siteniz için aynı URL'de yayımlar.
Önizleme URL'leri
Bazen değişikliklerinizi canlı web sitesinde yayımlamadan önce bir hazırlama sitesinde görmek istersiniz. Azure Static Web Apps, önizleme URL'leri aracılığıyla değişikliklerinizin önizlemesini görmenizi sağlar. GitHub Action'ınızın izlemekte olduğu dala karşı bir çekme isteği oluşturarak bir önizleme URL'si oluşturabilirsiniz. Canlı web siteniz etkilenmez. Bunun yerine, uygulamanızın yeni bir hazırlama sürümü oluşturulur. GitHub'da geri dönüp pull request'inizi denetlerseniz, Konuşma sekmesinde bulunan aşama sürümünün bağlantısını görmeniz gerekir.
Aşağıdaki tablo, Azure Static Web Apps'in uygulamanızı farklı URL'lerde nasıl yayımladığını gösterir. Uygulamanız bir URL'ye yayımlanırken, aynı daldaki bir çekme isteği farklı bir URL'ye yayımlanır.
| Kaynak | Açıklama | URL |
|---|---|---|
| ana dalı | Canlı web sitesi URL'si | https://purple-rain-062d03304.azurestaticapps.net/ |
| Çekme İsteği #5 | Önizleme URL'si | https://purple-rain-062d03304-5.azurestaticapps.net/ |
Şu anda api dalında çalışıyorsunuz. API dalınızdan ana dala pull isteği gönderin. ana dalında çekme isteği oluşturduğunuzda GitHub Eylemi uygulamayı bir önizleme URL'sinde yayımlar.
İş akışı uygulamanızı derlemeyi ve dağıtmayı tamamladıktan sonra GitHub botu, çekme isteğinize üretim öncesi ortamın URL'sini içeren bir açıklama ekler. Hazırlanan değişikliklerinizi görmek için bu bağlantıyı seçebilirsiniz.
Ardından bir pull isteği oluşturup uygulamanızın hazır durumda olan sürümünü ziyaret edin.