Szybki start: tworzenie pierwszej witryny statycznej przy użyciu interfejsu wiersza polecenia platformy Azure

Artykuł
07/27/2022
Czas czytania: 3 min

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

Jeśli nie masz subskrypcji platformy Azure, utwórz bezpłatne konto próbne.

Wymagania wstępne

Konto usługi GitHub
Konto platformy Azure
Zainstalowany interfejs wiersza polecenia platformy Azure (wersja 2.29.0 lub nowsza)

Tworzenie repozytorium

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

Przejdź do następującej lokalizacji, aby utworzyć nowe repozytorium:
1. https://github.com/staticwebdev/vanilla-basic/generate
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 jeden plik index.html .

Wybierz pozycję Utwórz repozytorium na podstawie szablonu.

Create repository from template

Tworzenie statycznej aplikacji internetowej

Po utworzeniu repozytorium możesz utworzyć statyczną aplikację internetową za pomocą interfejsu wiersza polecenia platformy Azure.

Zaloguj się do interfejsu wiersza polecenia platformy Azure przy użyciu następującego polecenia.
```
az login
```

Utwórz grupę zasobów.

az group create \
  --name my-swa-group \
  --location "eastus2"

Utwórz zmienną do przechowywania nazwy użytkownika usługi GitHub.
```
GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
```
Zastąp symbol zastępczy <YOUR_GITHUB_USER_NAME> nazwą użytkownika usługi GitHub.

Utwórz nową statyczną aplikację internetową z repozytorium.

az staticwebapp create \
    --name my-first-static-web-app \
    --resource-group my-swa-group \
    --source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
    --location "eastus2" \
    --branch main \
    --app-location "src" \
    --login-with-github

az staticwebapp create \
    --name my-first-static-web-app \
    --resource-group my-swa-group \
    --source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
    --location "eastus2" \
    --branch main \
    --app-location "/" \
    --output-location "dist/angular-basic" \
    --login-with-github

az staticwebapp create \
    --name my-first-static-web-app \
    --resource-group my-swa-group \
    --source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
    --location "eastus2" \
    --branch main \
    --app-location "Client" \
    --output-location "wwwroot"  \
    --login-with-github

az staticwebapp create \
    --name my-first-static-web-app \
    --resource-group my-swa-group \
    --source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
    --location "eastus2" \
    --branch main \
    --app-location "/"  \
    --output-location "build"  \
    --login-with-github

az staticwebapp create \
    --name my-first-static-web-app \
    --resource-group my-swa-group \
    --source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
    --location "eastus2" \
    --branch main \
    --app-location "/" \
    --output-location "dist"  \
    --login-with-github

Ważne

Adres URL przekazany do parametru --source nie może zawierać sufiksu .git .

Podczas wykonywania tego polecenia interfejs wiersza polecenia uruchamia interaktywne środowisko logowania w usłudze GitHub. Poszukaj wiersza w konsoli, który przypomina następujący komunikat.

Przejdź do https://github.com/login/device adresu i wprowadź kod użytkownika 329B-3945, aby aktywować i pobrać osobisty token dostępu usługi GitHub.

Przejdź do adresu https://github.com/login/device.
Wprowadź kod użytkownika wyświetlany w komunikacie konsoli.
Naciśnij przycisk Continue (Kontynuuj).
Wybierz przycisk Authorize AzureAppServiceCLI (Autoryzuj usługę AzureAppServiceCLI ).

Wyświetl witrynę internetową

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

Zanim będzie można przejść do nowej witryny statycznej, kompilacja wdrożenia musi najpierw zakończyć działanie.

Wróć do okna konsoli i uruchom następujące polecenie, aby wyświetlić listę adresów URL skojarzonych z aplikacją.
```
az staticwebapp show \
  --name  my-first-static-web-app \
  --query "repositoryUrl"
```
Dane wyjściowe tego polecenia zwracają adres URL do repozytorium GitHub.
Skopiuj adres URL repozytorium i wklej go w przeglądarce.
Kliknij kartę Actions (Akcje).

W tym momencie platforma Azure tworzy zasoby do obsługi statycznej aplikacji internetowej. Poczekaj, aż ikona obok uruchomionego przepływu pracy zmieni się w znacznik wyboru z zielonym tłem ( ). Wykonanie tej operacji może potrwać kilka minut.

Po pojawieniu się ikony powodzenia przepływ pracy zostanie ukończony i możesz wrócić do okna konsoli.
Uruchom następujące polecenie, aby wykonać zapytanie dotyczące adresu URL witryny internetowej.
```
az staticwebapp show \
  --name my-first-static-web-app \
  --query "defaultHostname"
```
Skopiuj adres URL do przeglądarki i przejdź do witryny internetowej.

Czyszczenie zasobów

Jeśli nie zamierzasz nadal korzystać z tej aplikacji, możesz usunąć grupę zasobów i statyczną aplikację internetową, uruchamiając następujące polecenie:

az group delete \
  --name my-swa-group

Następne kroki

Dodawanie interfejsu API