Udostępnij za pośrednictwem


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

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.

  1. W profilu konta usługi GitHub (w prawym górnym rogu) wybierz pozycję Ustawienia.

  2. Wybierz pozycję Ustawienia dla deweloperów.

  3. Wybierz pozycję Osobiste tokeny dostępu.

  4. Wybierz pozycję Generuj nowy token.

  5. Podaj nazwę tego tokenu w polu Nazwa , na przykład myfirstswadeployment.

  6. Wybierz wygaśnięcie tokenu. Wartość domyślna to 30 dni.

  7. Określ następujące zakresy: repozytorium, przepływ pracy, zapis:packages

  8. Wybierz pozycję Generuj token.

  9. 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.

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

    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. 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 .

  3. Kliknij przycisk Create repository (Utwórz repozytorium).

    screenshot of the Create repository button.

Tworzenie szablonu usługi ARM

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

  1. Utwórz nowy folder do przechowywania szablonów usługi ARM.

  2. Utwórz nowy plik i nadaj mu nazwę azuredeploy.json.

  3. 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'))]"
                            ]
                        }
                    ]
                }
            ]
        }
    
    
  4. Utwórz nowy plik i nadaj mu nazwę azuredeploy.parameters.json.

  5. 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"
                    }
                }
            }
        }
    
  6. 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.
  7. 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ą.

Overview window

  1. 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.

  2. 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.

  1. W witrynie Azure Portal wybierz pozycję Grupa zasobów z menu po lewej stronie.
  2. Wprowadź nazwę grupy zasobów w polu Filtruj według nazwy.
  3. Wybierz nazwę grupy zasobów.
  4. Wybierz pozycję Usuń grupę zasobów z górnego menu.

Następne kroki