Tutorial: Veröffentlichen von Azure Static Web Apps mithilfe einer ARM-Vorlage

  • Artikel

Dieser Artikel beschreibt die Bereitstellung von Azure Static Web Apps mithilfe einer Azure Resource Manager-Vorlage (ARM-Vorlage).

In diesem Tutorial lernen Sie Folgendes:

  • Erstellen einer ARM-Vorlage für Azure Static Web Apps
  • Bereitstellen der ARM-Vorlage zum Erstellen einer Azure Static Web App-Instanz

Voraussetzungen

Erstellen eines persönlichen GitHub-Zugriffstokens

Einer der Parameter in der ARM-Vorlage ist repositoryToken. Dadurch kann der ARM-Bereitstellungsprozess mit dem GitHub-Repository interagieren, das den Quellcode der statischen Website enthält.

  1. Wählen Sie in Ihrem GitHub-Kontoprofil (in der oberen rechten Ecke) die Option Settings (Einstellungen) aus.

  2. Wählen Sie Developer Settings (Entwicklereinstellungen) aus.

  3. Wählen Sie Personal Access Tokens (Persönliche Zugriffstoken) aus.

  4. Wählen Sie Generate New Token (Neues Token generieren) aus.

  5. Geben Sie im Feld Name einen Namen für dieses Token an, z. B. myfirstswadeployment.

  6. Wählen Sie ein Ablaufdatum für das Token aus, der Standardwert ist 30 Tage.

  7. Geben Sie die folgenden Bereiche an: repo, workflow, write:packages.

  8. Wählen Sie Generate token (Token generieren) aus.

  9. Kopieren Sie den Tokenwert, und fügen Sie ihn zur späteren Verwendung in einen Text-Editor ein.

Wichtig

Stellen Sie sicher, dass Sie dieses Token kopieren und an einem sicheren Ort speichern. Speichern Sie dieses Token in Azure Key Vault, und greifen Sie in Ihrer ARM-Vorlage darauf zu.

Erstellen eines GitHub-Repositorys

In diesem Artikel wird ein GitHub-Vorlagenrepository verwendet, um Ihnen den Einstieg zu erleichtern. Die Vorlage enthält eine Starter-App, die für die Bereitstellung mit Azure Static Web Apps verwendet wird.

  1. Wechseln Sie zum folgenden Speicherort, um ein neues Repository zu erstellen:

    1. https://github.com/staticwebdev/vanilla-basic/generate

  2. Nennen Sie Ihr Repository myfirstswadeployment.

    Hinweis

    Für Azure Static Web Apps wird mindestens eine HTML-Datei benötigt, um eine Web-App zu erstellen. Das in diesem Schritt erstellte Repository enthält nur eine Datei vom Typ index.html.

  3. Klicken Sie auf Create repository (Repository erstellen).

    screenshot of the Create repository button.

Erstellen der ARM-Vorlage

Wenn die Voraussetzungen erfüllt sind, besteht der nächste Schritt darin, die ARM-Bereitstellungsvorlagendatei zu definieren.

  1. Erstellen Sie einen neuen Ordner für die ARM-Vorlagen.

  2. Erstellen Sie eine neue Datei, und geben Sie ihr den Namen azuredeploy.json.

  3. Fügen Sie den folgenden ARM-Vorlagenausschnitt in azuredeploy.json ein:

        {
        "$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. Erstellen Sie eine neue Datei, und geben Sie ihr den Namen azuredeploy.parameters.json.

  5. Fügen Sie den folgenden ARM-Vorlagenausschnitt in azuredeploy.parameters.json ein:

        {
        "$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. Aktualisieren Sie die folgenden Parameter:

    Parameter Erwarteter Wert
    repositoryUrl Geben Sie die URL zu Ihrem Static Web Apps GitHub-Repository an.
    repositoryToken Geben Sie das persönliche GitHub-Zugriffstoken an.

  7. Speichern Sie die Updates, bevor Sie die Bereitstellung im nächsten Schritt ausführen.

Ausführen der Bereitstellung

Zum Bereitstellen der Vorlage benötigen Sie entweder die Azure CLI oder Azure PowerShell.

Anmelden bei Azure

Melden Sie sich entweder bei der Azure CLI oder bei Azure PowerShell an, um eine Vorlage bereitzustellen.

az login

Wenn Sie über mehrere Azure-Abonnements verfügen, wählen Sie das Abonnement aus, das Sie verwenden möchten. Ersetzen Sie <SUBSCRIPTION-ID> durch Ihre Abonnementinformationen:

az account set --subscription <SUBSCRIPTION-ID>

Erstellen einer Ressourcengruppe

Beim Bereitstellen einer Vorlage geben Sie eine Ressourcengruppe an, die die bereitgestellten Ressourcen enthält. Erstellen Sie die Ressourcengruppe vor dem Ausführen des Bereitstellungsbefehls entweder mit der Azure CLI oder Azure PowerShell.

Hinweis

Die CLI-Beispiele in diesem Artikel sind für die Bash-Shell geschrieben.

resourceGroupName="myfirstswadeployRG"

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

Bereitstellen der Vorlage

Verwenden Sie eine der folgenden Bereitstellungsoptionen, um die Vorlage bereitzustellen:


az deployment group create \
  --name DeployLocalTemplate \
  --resource-group $resourceGroupName \
  --template-file <PATH-TO-AZUREDEPLOY.JSON> \
  --parameters <PATH-TO-AZUREDEPLOY.PARAMETERS.JSON> \
  --verbose

Weitere Informationen zum Bereitstellen von Vorlagen mithilfe der Azure CLI finden Sie unter Bereitstellen von Ressourcen mit ARM-Vorlagen und der Azure CLI.

Anzeigen der Website

Für die Bereitstellung einer statischen App gelten zwei Aspekte. Der erste Aspekt ist die Bereitstellung der zugrunde liegenden Azure-Ressourcen, aus denen Ihre App besteht. Der zweite Aspekt ist ein GitHub Actions-Workflow, mit dem Ihre Anwendung erstellt und veröffentlicht wird.

Bevor Sie zu Ihrer neuen statischen Website navigieren können, muss zuerst die Ausführung des Buildvorgangs für die Bereitstellung abgeschlossen sein.

Im Übersichtsfenster von Azure Static Web Apps werden einige Links angezeigt, die Ihnen als Hilfe bei der Interaktion mit Ihrer Web-App dienen.

Overview window

  1. Wenn Sie auf das Banner Click here to check the status of your GitHub Actions runs (Hier klicken, um den Status Ihrer GitHub Actions-Ausführungen zu überprüfen) klicken, gelangen Sie zu den GitHub Actions-Instanzen, die für Ihr Repository ausgeführt werden. Nachdem Sie sich vergewissert haben, dass der Bereitstellungsauftrag abgeschlossen ist, können Sie über die generierte URL zu Ihrer Website navigieren.

  2. Nachdem der GitHub Actions-Workflow abgeschlossen ist, können Sie auf den Link URL klicken, um die Website in einer neuen Registerkarte zu öffnen.

Bereinigen von Ressourcen

Löschen Sie die Ressourcengruppe, um die bereitgestellten Ressourcen zu bereinigen.

  1. Wählen Sie im Azure-Portal im linken Menü die Option Ressourcengruppe aus.
  2. Geben Sie den Namen der Ressourcengruppe in das Feld Nach Name filtern ein.
  3. Klicken Sie auf den Namen der Ressourcengruppe.
  4. Wählen Sie Ressourcengruppe löschen aus dem Menü ganz oben aus.

Nächste Schritte

Konfigurieren Ihrer statischen Web-App