Wdrażanie aplikacji Angular w usłudze Azure Static Web Apps

Z tego artykułu dowiesz się, jak wdrożyć aplikację Angular w usłudze Azure Static Web Apps przy użyciu witryny Azure Portal.

Wymagania wstępne

Zasób	Uwagi
Subskrypcja platformy Azure	Jeśli nie masz subskrypcji platformy Azure, utwórz bezpłatne konto próbne.
Konto usługi GitHub	Jeśli nie masz konta usługi GitHub, możesz go utworzyć bezpłatnie.

Zasób	Uwagi
Subskrypcja platformy Azure	Jeśli nie masz subskrypcji platformy Azure, utwórz bezpłatne konto próbne.
Konto usługi Azure DevOps	Jeśli nie masz konta usługi GitHub, możesz je utworzyć.

Tworzenie repozytorium

W tym artykule użyto repozytorium szablonów usługi GitHub, aby ułatwić rozpoczęcie pracy. Szablon zawiera początkową aplikację do wdrożenia w usłudze Azure Static Web Apps.

1. Przejdź do następującej lokalizacji, aby utworzyć nowe repozytorium:

   https://github.com/staticwebdev/angular-basic/generate

2. Nadaj repozytorium nazwę my-first-static-web-app

3. Wybierz pozycję Utwórz repozytorium na podstawie szablonu.

   

W tym artykule użyto repozytorium usługi Azure DevOps, aby ułatwić rozpoczęcie pracy. Repozytorium zawiera początkową aplikację używaną do wdrażania przy użyciu usługi Azure Static Web Apps.

1. Zaloguj się do usługi Azure DevOps.

2. Wybierz pozycję Nowe repozytorium.

3. W oknie Tworzenie nowego projektu rozwiń menu Zaawansowane i wybierz następujące opcje:

   Ustawienie	Wartość
   Project	Wprowadź ciąg my-first-web-static-app.
   Widoczność	Wybierz pozycję Prywatny.
   Kontrola wersji	Wybierz pozycję Git.
   Proces elementu roboczego	Wybierz opcję najlepiej dopasowaną do metod programowania.

4. Wybierz pozycję Utwórz.

5. Wybierz element menu Repozytoria.

6. Wybierz element menu Pliki.

7. Na karcie Importowanie repozytorium wybierz pozycję Importuj.

8. Skopiuj adres URL repozytorium dla wybranej struktury i wklej go w polu Klonuj adres URL .

   https://github.com/staticwebdev/angular-basic.git

9. Wybierz pozycję Importuj i poczekaj na zakończenie procesu importowania.

Tworzenie statycznej aplikacji internetowej

Po utworzeniu repozytorium możesz utworzyć statyczną aplikację internetową w witrynie Azure Portal.

1. Przejdź do portalu Azure Portal.
2. Wybierz pozycję Utwórz zasób.
3. Wyszukaj statyczną aplikację internetową.
4. Wybierz pozycję Statyczna aplikacja internetowa.
5. Wybierz pozycję Utwórz.

W sekcji Podstawy rozpocznij od skonfigurowania nowej aplikacji i połączenia jej z repozytorium GitHub.

Ustawienie	Wartość
Subskrypcja	Wybierz subskrypcję platformy Azure.
Grupa zasobów	Wybierz link Utwórz nowy i wprowadź ciąg static-web-apps-test w polu tekstowym.
Nazwisko	Wprowadź ciąg my-first-static-web-app w polu tekstowym.
Typ planu	Wybierz pozycję Bezpłatna.
Źródło	W razie potrzeby wybierz pozycję GitHub i zaloguj się do usługi GitHub.

Po zalogowaniu się przy użyciu usługi GitHub wprowadź informacje o repozytorium.

Ustawienie	Wartość
Organizacja	Wybierz organizację.
Repozytorium	Wybierz pozycję my-first-web-static-app.
Oddział	Wybierz pozycję main.

Uwaga

Jeśli nie widzisz żadnych repozytoriów:

• Może być konieczne autoryzowanie usługi Azure Static Web Apps w usłudze GitHub. Przejdź do repozytorium GitHub i przejdź do pozycji Ustawienia > Aplikacje > autoryzowane przez OAuth, wybierz pozycję Azure Static Web Apps, a następnie wybierz pozycję Udziel.
• Może być konieczne autoryzowanie usługi Azure Static Web Apps w organizacji usługi Azure DevOps. Aby przyznać uprawnienia, musisz być właścicielem organizacji. Zażądaj dostępu do aplikacji innej firmy za pośrednictwem protokołu OAuth. Aby uzyskać więcej informacji, zobacz Autoryzowanie dostępu do interfejsów API REST za pomocą protokołu OAuth 2.0.

W sekcji Podstawy rozpocznij od skonfigurowania nowej aplikacji i połączenia jej z repozytorium usługi Azure DevOps.

Ustawienie	Wartość
Subskrypcja	Wybierz subskrypcję platformy Azure.
Grupa zasobów	Wybierz link Utwórz nowy i wprowadź ciąg static-web-apps-test w polu tekstowym.
Nazwisko	Wprowadź ciąg my-first-static-web-app w polu tekstowym.
Typ planu	Wybierz pozycję Bezpłatna.
Źródło	Wybierz pozycję DevOps.
Organizacja	Wybierz organizację.
Project	Wybierz projekt.
Repozytorium	Wybierz pozycję my-first-web-static-app.
Oddział	Wybierz pozycję main.

Uwaga

Upewnij się, że używana gałąź nie jest chroniona i że masz wystarczające uprawnienia do wystawienia push polecenia. Aby sprawdzić, przejdź do repozytorium DevOps i przejdź do pozycji Repozytoria —> Gałęzie i wybierz pozycję Więcej opcji. Następnie wybierz gałąź, a następnie pozycję Zasady gałęzi, aby upewnić się, że wymagane zasady nie są włączone.

W sekcji Szczegóły kompilacji dodaj szczegóły konfiguracji specyficzne dla preferowanej struktury frontonu.

1. Wybierz pozycję Angular z listy rozwijanej Ustawienia wstępne kompilacji .

2. Pozostaw wartość domyślną w polu Lokalizacja aplikacji.

3. Pozostaw puste pole Lokalizacja interfejsu API.

4. W polu Lokalizacja wyjściowa wpisz dist/angular-basic.

Uwaga

Jeśli używasz tych instrukcji z własnym kodem i rozwiązaniem Angular 17 lub nowszym, wartość lokalizacji wyjściowej musi kończyć się ciągiem /browser.

Wybierz pozycję Przejrzyj i utwórz.

Uwaga

Możesz edytować plik przepływu pracy, aby zmienić te wartości po utworzeniu aplikacji.

Wybierz pozycję Utwórz.

Wybierz pozycję Przejdź do zasobu.

Wyświetlanie witryny internetowej

Istnieją dwa aspekty wdrażania aplikacji statycznej. Pierwszy tworzy bazowe zasoby platformy Azure tworzące aplikację. Drugi to przepływ pracy, który kompiluje i publikuje aplikację.

Przed przejściem do nowej witryny statycznej kompilacja wdrożenia musi najpierw zakończyć działanie.

W oknie Przegląd usługi Static Web Apps zostanie wyświetlona seria linków, które ułatwiają interakcję z aplikacją internetową.

1. Wybranie pozycji Akcja usługi GitHub jest uruchamiane w obszarze Przegląd powoduje przejście do funkcji GitHub Actions uruchomionej względem repozytorium. Przed kontynuowaniem sprawdź, czy akcja wdrożenia została ukończona.

2. Po zakończeniu przepływu pracy funkcji GitHub Actions możesz wybrać link adresu URL , aby otworzyć witrynę internetową na nowej karcie.

Po zakończeniu przepływu pracy możesz wybrać link adresu URL , aby otworzyć witrynę internetową na nowej karcie.

Czyszczenie zasobów

Jeśli nie zamierzasz nadal korzystać z tej aplikacji, możesz usunąć wystąpienie usługi Azure Static Web Apps, wykonując następujące czynności:

1. Otwórz portal Azure Portal.
2. Wyszukaj ciąg my-first-web-static-app na górnym pasku wyszukiwania.
3. Wybierz nazwę aplikacji.
4. Wybierz Usuń.
5. Wybierz pozycję Tak , aby potwierdzić akcję usuwania (wykonanie tej akcji może potrwać kilka chwil).

Następne kroki

Dodawanie interfejsu API do aplikacji