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
Wdróż Szablon ARM, aby utworzyć wystąpienie statycznej aplikacji internetowej 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 ARM: Przegląd i edycja szablonów wymaga edytora JSON. Program Visual Studio Code z rozszerzeniem Narzędzia Azure Resource Manager idealnie nadaje się do edycji szablonów 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.
Azure CLI lub Azure PowerShell: Wdrażanie szablonów ARM wymaga narzędzia linii poleceń. Aby uzyskać instrukcje dotyczące instalacji, zobacz:

Tworzenie osobistego tokenu dostępu w usłudze 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 dewelopera.
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: repo, workflow, write: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:
1. https://github.com/staticwebdev/vanilla-basic/generate
Nadaj repozytorium nazwę myfirstswadeployment

Uwaga / Notatka

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.

Utwórz szablon ARM

Po wdrożeniu wymagań wstępnych następnym krokiem jest zdefiniowanie pliku szablonu wdrożenia usługi ARM.

Utwórz nowy folder na szablony ARM.
Utwórz nowy plik i nadaj mu nazwę azuredeploy.json.

Wklej poniższy fragment kodu szablonu usługi ARM do 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 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.

Parameter Oczekiwana wartość

repositoryUrl Podaj adres URL do swojego repozytorium GitHub usługi Static Web Apps.

repositoryToken Podaj token PAT dla GitHub.
Zapisz aktualizacje przed uruchomieniem wdrożenia w następnym kroku.

Parameter	Oczekiwana wartość
`repositoryUrl`	Podaj adres URL do swojego repozytorium GitHub usługi Static Web Apps.
`repositoryToken`	Podaj token PAT dla GitHub.

Uruchamianie wdrożenia

Do wdrożenia szablonu potrzebny jest interfejs wiersza polecenia platformy Azure lub program Azure PowerShell.

Aby wdrożyć szablon, zaloguj się do interfejsu wiersza polecenia platformy Azure lub programu Azure PowerShell.

"Azure CLI"
PowerShell

az login

Connect-AzAccount

Jeśli masz wiele subskrypcji platformy Azure, wybierz subskrypcję, której chcesz użyć. Zastąp <SUBSCRIPTION-ID> ciąg informacjami o subskrypcji:

"Azure CLI"
PowerShell

az account set --subscription <SUBSCRIPTION-ID>

Set-AzContext <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 / Notatka

Przykłady CLI w tym artykule są napisane dla powłoki Bash.

"Azure CLI"
PowerShell

resourceGroupName="myfirstswadeployRG"

az group create \
  --name $resourceGroupName \
  --location "Central US"

$resourceGroupName = "myfirstswadeployRG"

New-AzResourceGroup `
  -Name $resourceGroupName `
  -Location "Central US"

Wdrażanie szablonu

Użyj jednej z tych opcji wdrażania, aby wdrożyć szablon.

"Azure CLI"
PowerShell


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.

$templateFile = Read-Host -Prompt "Enter the template file path and file name"
$templateparameterFile = Read-Host -Prompt "Enter the template parameter file path and file name"

New-AzResourceGroupDeployment `
  -Name DeployLocalTemplate `
  -ResourceGroupName $resourceGroupName `
  -TemplateFile $templateFile `
  -TemplateParameterFile $templateparameterfile `
  -verbose

Aby dowiedzieć się więcej na temat wdrażania szablonów przy użyciu programu Azure PowerShell, zobacz Wdrażanie zasobów przy użyciu szablonów usługi ARM i programu Azure PowerShell.

Wyświetlanie witryny internetowej

Istnieją dwa aspekty wdrażania aplikacji statycznej. Pierwsza udostępnia bazowe zasoby platformy Azure, które tworzą Twoją 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ą.

Okno Przegląd

Kliknięcie baneru z napisem Kliknij tutaj, aby sprawdzić stan działań GitHub Actions, powoduje przejście do działań GitHub Actions w Twoim 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 procesu GitHub Actions możesz kliknąć link URL, aby otworzyć witrynę internetową na nowej karcie.

Uprzątnij zasoby

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.

Dalsze kroki

Konfigurowanie statycznej aplikacji internetowej

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-10-08