Szybki start: tworzenie pierwszej statycznej aplikacji internetowej

Usługa Azure Static Web Apps publikuje witrynę internetową w środowisku produkcyjnym, tworząc aplikacje z repozytorium Azure DevOps lub GitHub. W tym przewodniku Szybki start wdrożysz aplikację internetową w usłudze Azure Static Web Apps przy użyciu witryny Azure Portal.

Wymagania wstępne

• Jeśli nie masz subskrypcji platformy Azure, utwórz bezpłatne konto próbne.
• Konto usługi GitHub

• Jeśli nie masz subskrypcji platformy Azure, utwórz bezpłatne konto próbne.
• Organizacja usługi Azure DevOps

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.

Brak struktury

1. Przejdź do następującej lokalizacji, aby utworzyć nowe repozytorium:
   1. https://github.com/staticwebdev/vanilla-basic/generate
2. Nadaj repozytorium nazwę my-first-static-web-app

Uwaga

Usługa Azure Static Web Apps wymaga co najmniej jednego pliku HTML do utworzenia aplikacji internetowej. Repozytorium utworzone w tym kroku zawiera pojedynczy plik index.html .

Angular

1. Przejdź do następującej lokalizacji, aby utworzyć nowe repozytorium:
   1. https://github.com/staticwebdev/angular-basic/generate
2. Nadaj repozytorium nazwę my-first-static-web-app

Blazor

1. Przejdź do następującej lokalizacji, aby utworzyć nowe repozytorium:
   1. https://github.com/staticwebdev/blazor-basic/generate
2. Nadaj repozytorium nazwę my-first-static-web-app

React

1. Przejdź do następującej lokalizacji, aby utworzyć nowe repozytorium:
   1. https://github.com/staticwebdev/react-basic/generate
2. Nadaj repozytorium nazwę my-first-static-web-app

Vue

1. Przejdź do następującej lokalizacji, aby utworzyć nowe repozytorium:
   1. https://github.com/staticwebdev/vue-basic/generate
2. Nadaj repozytorium nazwę my-first-static-web-app

Kliknij przycisk Create repository (Utwórz repozytorium).

Tworzenie repozytorium

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ść
   Projekt	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 .

   Brak struktury

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

   Angular

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

   Blazor

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

   React

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

   Vue

   https://github.com/staticwebdev/vue-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 pozycję Static Web Apps.
4. Wybierz pozycję Azure Static Web Apps.
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.
Azure Functions i szczegóły przejściowe	Wybierz region najbliżej Ciebie.
Lokalizacja źródłowa	Wybierz pozycję GitHub.

Wybierz pozycję Zaloguj się przy użyciu usługi GitHub i uwierzytelnij się przy użyciu usługi GitHub.

Po zalogowaniu się w usłudze GitHub wprowadź informacje o repozytorium.

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

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 profilu usługi GitHub i przejdź do pozycji aplikacje Ustawienia > Autoryzowane aplikacje> 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.
Azure Functions i szczegóły przejściowe	Wybierz region najbliżej Ciebie.
Lokalizacja źródłowa	Wybierz pozycję DevOps.
Organizacja	Wybierz organizację.
Projekt	Wybierz projekt.
Repozytorium	Wybierz pozycję my-first-web-static-app.
Oddział	Wybierz pozycję branch_name>.<

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.

Brak struktury

1. Wybierz pozycję Niestandardowe z listy rozwijanej Ustawienia wstępne kompilacji .
2. Wpisz ciąg ./src w polu Lokalizacja aplikacji.
3. Pozostaw puste pole Lokalizacja interfejsu API.
4. Wpisz pole Lokalizacja artefaktu aplikacji ./src.

Angular

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. Wpisz dist/angular-basic w polu Lokalizacja artefaktu aplikacji.

Blazor

1. Wybierz pozycję Blazor z listy rozwijanej Ustawienia wstępne kompilacji .
2. Zachowaj wartość domyślną klienta w polu Lokalizacja aplikacji.
3. Pozostaw puste pole Lokalizacja interfejsu API.
4. Pozostaw wartość domyślną wwwroot w polu Lokalizacja artefaktu aplikacji.

React

1. Wybierz pozycję React z listy rozwijanej Ustawienia wstępne kompilacji .
2. Pozostaw wartość domyślną w polu Lokalizacja aplikacji.
3. Pozostaw puste pole Lokalizacja interfejsu API.
4. Wpisz kompilacjęw polu Lokalizacja artefaktu aplikacji.

Vue

1. Wybierz pozycję Vue.js z listy rozwijanej Ustawienia wstępne kompilacji .
2. Pozostaw wartość domyślną w polu Lokalizacja aplikacji.
3. Pozostaw puste pole Lokalizacja interfejsu API.
4. Zachowaj wartość domyślną w polu Lokalizacja artefaktu aplikacji.

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 baneru z napisem Wybierz tutaj, aby sprawdzić stan przebiegów funkcji GitHub Actions powoduje przejście do funkcji GitHub Actions uruchomionej względem repozytorium. Po upewnieniu się, że zadanie wdrożenia zostanie ukończone, możesz przejść do witryny internetowej za pośrednictwem wygenerowanego adresu URL.

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