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

  • 4 min

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

Prześlij swoje zmiany do GitHub

W poprzednim ćwiczeniu wprowadzono zmiany w interfejsie API. Zatwierdź te zmiany w gałęzi interfejsu API i prześlij je do GitHub, wykonując następujące kroki:

  1. W programie Visual Studio Code otwórz paletę poleceń, naciskając F1
  2. Wpisz i wybierz opcję Git: Zatwierdź Wszystko. Jeśli program Visual Studio Code wyświetli monit o automatyczne przygotowanie wszystkich zmian i zatwierdzenie ich bezpośrednio, wybierz Tak.
  3. Wprowadź komunikat zatwierdzenia, taki jak zmiany interfejsu API
  4. Otwórz paletę poleceń, naciskając F1
  5. Wpisz i wybierz Git: wypchnij
  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

Tworzenie żądania ściągnięcia

Wypchnąłeś swoją gałąź interfejsu API do GitHub. Teraz chcesz, aby akcja usługi GitHub publikowała aplikację internetową i interfejs API w adresie URL w wersji zapoznawczej. Następnym krokiem jest utworzenie pull requesta w stosunku do głównej gałęzi .

  1. Otwieranie przeglądarki

  2. Przejdź do repozytorium

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

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

  4. Wybierz przycisk nowego żądania wciągnięcia

  5. Wybierz gałąź główną z listy rozwijanej podstawowej

  6. Wybierz gałąź interfejsu API z listy rozwijanej porównaj

  7. Wybierz przycisk Utwórz pull request

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

Akcja usługi GitHub jest teraz wyzwalana.

Obejrzyj kompilację i publikowanie akcji GitHub

Możesz pozostać w przeglądarce w swoim repozytorium i obserwować postęp działania 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 Azure Static Web Apps CI/CDzrzut ekranu przedstawiający sposób znajdowania prawidłowego przepływu pracy.
  3. Wybierz górny link na liście przebiegów akcji.
  4. Wybierz link Kompilowanie i wdrażanie zadania.

Zrzut ekranu przedstawiający przycisk kompilacji i wdrażania na stronie przepływu pracy.

Postęp akcji usługi GitHub można zobaczyć podczas 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 wnioski ściągnięcia
  2. Wybierz żądanie ściągnięcia
  3. Wybierz link po komunikacie Azure Static Web Apps: Twoja witryna tymczasowa jest gotowa! Odwiedź ją tutaj

Zwróć uwagę, że adres URL podglądu zawiera łącznik, po którym następuje liczba. Numer odpowiada numerowi żądania ściągnięcia, które utworzyłeś. Dla każdego pull requesta, który tworzysz, otrzymujesz unikalny i powtarzalny adres URL do podglądu. Region jest również używany do tworzenia adresu URL podglądu.

Zrzut ekranu przedstawiający aplikację Angular działającą w internecie.

Zrzut ekranu przedstawiający aplikację internetową react.

Zrzut ekranu przedstawiający aplikację internetową Svelte.

Zrzut ekranu przedstawiający aplikację internetową vue.

Następne kroki

Gratulacje, utworzyłeś swoją pierwszą instancję Azure Static Web Apps z aplikacją webową i interfejsem API!