Ćwiczenie — publikowanie interfejsu API za pomocą funkcji GitHub Actions

  • 4 min

Aplikacja internetowa i interfejs API działają lokalnie. Teraz nadszedł czas na opublikowanie aplikacji internetowej i interfejsu API w usłudze Azure Static Web Apps.

Wypychanie zmian do usługi GitHub

W poprzednim ćwiczeniu wprowadzono zmiany w interfejsie API. Zatwierdź te zmiany w gałęzi api i wypchnij je do usługi GitHub, wykonując następujące kroki:

  1. W programie Visual Studio Code naciśnij klawisz F1, aby otworzyć paletę poleceń.
  2. Wpisz i wybierz pozycję Git: Zatwierdź wszystko. Jeśli w programie Visual Studio Code zostanie wyświetlony komunikat z prośbą o automatyczne przygotowanie wszystkich zmian i zatwierdzenie ich bezpośrednio, wybierz opcję Yes (Tak).
  3. Wprowadź komunikat dotyczący zatwierdzenia, na przykład: zmiany interfejsu API
  4. Naciśnij klawisz F1, aby otworzyć paletę poleceń.
  5. Wpisz i wybierz pozycję Git: Wypychanie
  6. Jeśli zostanie wyświetlony monit z komunikatem Gałąź "api" nie ma gałęzi nadrzędnej. Czy chcesz opublikować tę gałąź? naciśnij przycisk OK

Utwórz żądanie ściągnięcia

Gałąź api została wypchnięta do usługi GitHub. Teraz chcesz, aby akcja usługi GitHub opublikowała aplikację internetową i interfejs API pod adresem URL podglądu. Dlatego następnym krokiem jest utworzenie żądania ściągnięcia względem gałęzi main.

  1. Otwórz przeglądarkę

  2. Nawiguj do repozytorium

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

  3. Wybierz link Żądania ściągnięcia

  4. Wybierz przycisk Nowe żądanie ściągnięcia

  5. Wybierz gałąź main z listy rozwijanej base

  6. Wybierz gałąź api z listy rozwijanej compare

  7. Wybierz przycisk Utwórz żądanie ściągnięcia

  8. Ponownie wybierz drugi przycisk Utwórz żądanie ściągnięcia

Akcja usługi GitHub jest teraz wyzwalana.

Obejrzyj kompilację i publikowanie akcji usługi GitHub

Możesz pozostać w przeglądarce w repozytorium i obserwować postęp akcji usługi GitHub. Wykonaj następujące kroki, aby wyświetlić postęp:

  1. Wybierz menu Akcje
  2. W menu Przepływy pracy wybierz element przepływu pracy ciągłej integracji/ciągłego wdrażania usługi Azure Static Web AppsScreenshot showing how to find the correct workflow.
  3. Wybierz górny link na liście przebiegów akcji.
  4. Wybierz link Kompiluj i wdróż zadanie .

Screenshot showing the build and deploy button on the workflow page.

Postęp akcji GitHub można zobaczyć w miarę kompilowania i publikowania aplikacji internetowej i interfejsu API.

Przejdź do adresu URL podglądu

Po pomyślnym zakończeniu działania usługi GitHub możesz wyświetlić uruchomioną aplikację w przeglądarce.

  1. Wybierz menu Żądania ściągnięcia
  2. Wybierz żądanie ściągnięcia
  3. Wybierz link po komunikacie Azure Static Web Apps: Twoja witryna etapu jest gotowa! Odwiedź go tutaj

Zwróć uwagę, że adres URL podglądu zawiera łącznik, po którym następuje liczba. Liczba jest zgodna z numerem utworzonego żądania ściągnięcia. Dla każdego tworzonego żądania ściągnięcia otrzymasz unikatowy i powtarzalny adres URL podglądu. Region jest również używany do tworzenia adresu URL podglądu.

Screenshot showing your angular web app.

Screenshot showing your react web app.

Screenshot showing your svelte web app.

Screenshot showing your vue web app.

Następne kroki

Gratulacje, utworzono swoje pierwsze wystąpienie usługi Azure Static Web Apps za pomocą aplikacji internetowej i interfejsu API!