Samouczek: publikowanie usługi Azure Static Web Apps przy użyciu szablonu usługi ARM
W tym artykule pokazano, jak wdrożyć usługę Azure Static Web Apps przy użyciu szablonu usługi Azure Resource Manager (szablon usługi ARM).
Z tego samouczka dowiesz się, jak wykonywać następujące czynności:
- Tworzenie szablonu usługi ARM dla usługi Azure Static Web Apps
- Wdrażanie szablonu usługi ARM w celu utworzenia wystąpienia statycznej aplikacji internetowej platformy Azure
Wymagania wstępne
Aktywne konto platformy Azure: jeśli go nie masz, możesz bezpłatnie utworzyć konto.
Konto Usługi GitHub: jeśli go nie masz, możesz bezpłatnie utworzyć konto usługi GitHub
Edytor szablonów usługi ARM: przeglądanie i edytowanie szablonów wymaga edytora JSON. Program Visual Studio Code z rozszerzeniem Narzędzi usługi Azure Resource Manager doskonale nadaje się do edytowania szablonów usługi ARM. Aby uzyskać instrukcje dotyczące instalowania i konfigurowania programu Visual Studio Code, zobacz Szybki start: tworzenie szablonów usługi ARM przy użyciu programu Visual Studio Code.
Interfejs wiersza polecenia platformy Azure lub program Azure PowerShell: wdrażanie szablonów usługi ARM wymaga narzędzia wiersza polecenia. Aby uzyskać instrukcje dotyczące instalacji, zobacz:
Tworzenie osobistego tokenu dostępu GitHub
Jednym z parametrów w szablonie usługi ARM jest repositoryToken
, który umożliwia procesowi wdrażania usługi ARM interakcję z repozytorium GitHub zawierającym statyczny kod źródłowy witryny.
W profilu konta usługi GitHub (w prawym górnym rogu) wybierz pozycję Ustawienia.
Wybierz pozycję Ustawienia dla deweloperów.
Wybierz pozycję Osobiste tokeny dostępu.
Wybierz pozycję Generuj nowy token.
Podaj nazwę tego tokenu w polu Nazwa , na przykład myfirstswadeployment.
Wybierz wygaśnięcie tokenu. Wartość domyślna to 30 dni.
Określ następujące zakresy: repozytorium, przepływ pracy, zapis:packages
Wybierz pozycję Generuj token.
Skopiuj wartość tokenu i wklej ją do edytora tekstów do późniejszego użycia.
Ważne
Upewnij się, że skopiujesz ten token i zapisz go w bezpiecznym miejscu. Rozważ przechowywanie tego tokenu w usłudze Azure Key Vault i uzyskiwanie do niego dostępu w szablonie usługi ARM.
Tworzenie repozytorium GitHub
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:
Nadaj repozytorium nazwę myfirstswadeployment
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 .
Kliknij przycisk Create repository (Utwórz repozytorium).
Tworzenie szablonu usługi ARM
Po wdrożeniu wymagań wstępnych następnym krokiem jest zdefiniowanie pliku szablonu wdrożenia usługi ARM.
Utwórz nowy folder do przechowywania szablonów usługi ARM.
Utwórz nowy plik i nadaj mu nazwę azuredeploy.json.
Wklej poniższy fragment kodu szablonu usługi ARM do pliku azuredeploy.json.
{ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#", "contentVersion": "1.0.0.0", "parameters": { "name": { "type": "string" }, "location": { "type": "string" }, "sku": { "type": "string" }, "skucode": { "type": "string" }, "repositoryUrl": { "type": "string" }, "branch": { "type": "string" }, "repositoryToken": { "type": "securestring" }, "appLocation": { "type": "string" }, "apiLocation": { "type": "string" }, "appArtifactLocation": { "type": "string" }, "resourceTags": { "type": "object" }, "appSettings": { "type": "object" } }, "resources": [ { "apiVersion": "2021-01-15", "name": "[parameters('name')]", "type": "Microsoft.Web/staticSites", "location": "[parameters('location')]", "tags": "[parameters('resourceTags')]", "properties": { "repositoryUrl": "[parameters('repositoryUrl')]", "branch": "[parameters('branch')]", "repositoryToken": "[parameters('repositoryToken')]", "buildProperties": { "appLocation": "[parameters('appLocation')]", "apiLocation": "[parameters('apiLocation')]", "appArtifactLocation": "[parameters('appArtifactLocation')]" } }, "sku": { "Tier": "[parameters('sku')]", "Name": "[parameters('skuCode')]" }, "resources":[ { "apiVersion": "2021-01-15", "name": "appsettings", "type": "config", "location": "[parameters('location')]", "properties": "[parameters('appSettings')]", "dependsOn": [ "[resourceId('Microsoft.Web/staticSites', parameters('name'))]" ] } ] } ] }
Utwórz nowy plik i nadaj mu nazwę azuredeploy.parameters.json.
Wklej poniższy fragment kodu szablonu usługi ARM do pliku azuredeploy.parameters.json.
{ "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#", "contentVersion": "1.0.0.0", "parameters": { "name": { "value": "myfirstswadeployment" }, "location": { "value": "Central US" }, "sku": { "value": "Free" }, "skucode": { "value": "Free" }, "repositoryUrl": { "value": "https://github.com/<YOUR-GITHUB-USER-NAME>/<YOUR-GITHUB-REPOSITORY-NAME>" }, "branch": { "value": "main" }, "repositoryToken": { "value": "<YOUR-GITHUB-PAT>" }, "appLocation": { "value": "/" }, "apiLocation": { "value": "" }, "appArtifactLocation": { "value": "src" }, "resourceTags": { "value": { "Environment": "Development", "Project": "Testing SWA with ARM", "ApplicationName": "myfirstswadeployment" } }, "appSettings": { "value": { "MY_APP_SETTING1": "value 1", "MY_APP_SETTING2": "value 2" } } } }
Zaktualizuj następujące parametry.
Parametr Oczekiwana wartość repositoryUrl
Podaj adres URL repozytorium GitHub usługi Static Web Apps. repositoryToken
Podaj token PAT usługi GitHub. Zapisz aktualizacje przed uruchomieniem wdrożenia w następnym kroku.
Uruchamianie wdrożenia
Do wdrożenia szablonu potrzebny jest interfejs wiersza polecenia platformy Azure lub program Azure PowerShell.
Logowanie się do platformy Azure
Aby wdrożyć szablon, zaloguj się do interfejsu wiersza polecenia platformy Azure lub programu Azure PowerShell.
Jeśli masz wiele subskrypcji platformy Azure, wybierz subskrypcję, której chcesz użyć. Zastąp <SUBSCRIPTION-ID>
ciąg informacjami o subskrypcji:
az account set --subscription <SUBSCRIPTION-ID>
Tworzenie grupy zasobów
Podczas wdrażania szablonu należy określić grupę zasobów zawierającą powiązane zasoby. Przed uruchomieniem polecenia wdrożenia utwórz grupę zasobów przy użyciu interfejsu wiersza polecenia platformy Azure lub usługi Azure PowerShell.
Uwaga
Przykłady interfejsu wiersza polecenia w tym artykule są napisane dla powłoki Bash.
resourceGroupName="myfirstswadeployRG"
az group create \
--name $resourceGroupName \
--location "Central US"
Wdrażanie szablonu
Użyj jednej z tych opcji wdrażania, aby wdrożyć szablon.
az deployment group create \
--name DeployLocalTemplate \
--resource-group $resourceGroupName \
--template-file <PATH-TO-AZUREDEPLOY.JSON> \
--parameters <PATH-TO-AZUREDEPLOY.PARAMETERS.JSON> \
--verbose
Aby dowiedzieć się więcej na temat wdrażania szablonów przy użyciu interfejsu wiersza polecenia platformy Azure, zobacz Wdrażanie zasobów przy użyciu szablonów usługi ARM i interfejsu wiersza polecenia platformy Azure.
Wyświetlanie witryny internetowej
Istnieją dwa aspekty wdrażania aplikacji statycznej. Pierwszy ustanawia podstawowe zasoby platformy Azure tworzące aplikację. Drugi to przepływ pracy funkcji GitHub Actions, 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ądu usługi Static Web Apps zostanie wyświetlona seria linków, które ułatwiają interakcję z aplikacją internetową.
Kliknięcie baneru z napisem Kliknij 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.
Po zakończeniu przepływu pracy funkcji GitHub Actions możesz kliknąć link adresu URL , aby otworzyć witrynę internetową na nowej karcie.
Czyszczenie zasobów
Wyczyść wdrożone zasoby, usuwając grupę zasobów.
- W witrynie Azure Portal wybierz pozycję Grupa zasobów z menu po lewej stronie.
- Wprowadź nazwę grupy zasobów w polu Filtruj według nazwy.
- Wybierz nazwę grupy zasobów.
- Wybierz pozycję Usuń grupę zasobów z górnego menu.