Alıştırma - GitHub Actions ile API'yi yayımlama

  • 4 dakika

Web uygulamanız ve API'niz yerel olarak çalışıyor. Şimdi web uygulamanızı ve API'nizi Azure Static Web Apps'te yayımlamanın zamanı geldi.

Değişikliklerinizi GitHub'a gönderme

Önceki alıştırmada API'nizde değişiklikler yaptınız. Bu değişiklikleri api dalına işleyin ve şu adımları izleyerek GitHub'a gönderin:

  1. Visual Studio Code'da F1 basarak komut paletini açın
  2. Git: Tümünü İşleyazın ve seçin. Visual Studio Code tüm değişikliklerinizi otomatik olarak hazırlayıp doğrudan işlemenizi isterse, Evetseçin.
  3. gibi 'api değişiklikleri' şeklinde bir işleme iletisi girin
  4. F1 basarak komut paletini açın
  5. yazın ve Git: Push seçin
  6. 'api' dalının yukarı akış dalı yok iletisiyle karşılaşırsanız. Bu dalı yayımlamak istiyor musunuz?Tamam düğmesine basın

Çekme İsteği Oluştur

API'nizi dalınızı GitHub'a ilettiniz. Şimdi GitHub Eylemi'nin web uygulamanızı ve API'nizi bir önizleme URL'sinde yayımlamasını istiyorsunuz. Bu nedenle, sonraki adımınız asıl dalına karşı bir çekme talebi oluşturmaktır.

  1. Tarayıcıyı açma

  2. Depo dizinine gidin

    https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

  3. Çekme istekleri bağlantısını seçin

  4. Yeni çekme isteği düğmesini seçin

  5. temel açılan listeden ana dalı seçin

  6. karşılaştırma açılan menüsünden API dalını seçin

  7. Çekme isteği oluştur düğmesini seçin

  8. Yeniden, ikinci çekme isteği oluştur düğmesini seçin.

GitHub Eyleminiz artık tetikleniyor.

GitHub Action derleme ve yayımlama süreçlerini izleyin

Deponuzda tarayıcınızda kalabilir ve GitHub Action'ın ilerleme durumunu izleyebilirsiniz. Şu adımları izleyerek ilerleme durumunu görüntüleyin:

  1. Eylemler menüsünü seçin
  2. İş Akışları menüsünün altında Azure Static Web Apps CI/CD iş akışı öğesini seçin Doğru iş akışının nasıl bulunacaklarını gösteren ekran görüntüsü.
  3. Eylem çalıştırmaları listesinde en üstteki bağlantıyı seçin.
  4. Oluşturma ve Dağıtma İşi bağlantısını seçin.

İş akışı sayfasındaki derleme ve dağıtma düğmesini gösteren ekran görüntüsü.

Web uygulamanızı ve API'nizi derleyip yayımladıkça GitHub Action'ınızın ilerleme durumunu görebilirsiniz.

Önizleme URL'sine göz atın

GitHub Eylemi başarıyla tamamlandıktan sonra, çalışan uygulamanızı tarayıcıda görüntüleyebilirsiniz.

  1. Çekme İstekleri menüsünü seçin
  2. Pull isteğinizi seçin
  3. Şu iletiyi izleyen bağlantıyı seçin: Azure Static Web Apps Sahne siteniz hazır! Burada ziyaret edin

Önizleme URL'sinde kısa çizgi ve ardından bir sayı olduğuna dikkat edin. Numara, oluşturduğunuz çekme isteğinin çekme isteği numarasıyla eşleşir. Oluşturduğunuz her pull isteği için benzersiz ve tekrarlanabilir bir önizleme URL'si alırsınız. Bölge, önizleme URL'sini oluşturmak için de kullanılır.

Angular web uygulamanızı gösteren ekran görüntüsü.

React web uygulamanızı gösteren ekran görüntüsü.

Svelte web uygulamanızı gösteren ekran görüntüsü.

Web uygulamanızı gösteren ekran görüntüsü.

Sonraki adımlar

Tebrikler, bir web uygulaması ve API ile ilk Azure Static Web Apps örneğinizi oluşturdunuz!