Share via

Självstudie: Publicera Azure Static Web Apps med hjälp av en ARM-mall

  • Artikel

Den här artikeln visar hur du distribuerar Azure Static Web Apps med hjälp av en Azure Resource Manager-mall (ARM-mall).

I den här självstudien får du lära dig att:

  • Skapa en ARM-mall för Azure Static Web Apps
  • Distribuera ARM-mallen för att skapa en Azure Static Web App-instans

Förutsättningar

Skapa en personlig åtkomsttoken för GitHub

En av parametrarna i ARM-mallen är repositoryToken, som gör att ARM-distributionsprocessen kan interagera med GitHub-lagringsplatsen som innehåller källkoden för den statiska platsen.

  1. Från din GitHub-kontoprofil (i det övre högra hörnet) väljer du Inställningar.

  2. Välj Developer Inställningar (Utvecklare Inställningar).

  3. Välj Personliga åtkomsttoken.

  4. Välj Generera ny token.

  5. Ange ett namn för den här token i fältet Namn , till exempel myfirstswadeployment.

  6. Välj förfallodatum för token, standardvärdet är 30 dagar.

  7. Ange följande omfång: lagringsplats, arbetsflöde, skriv:paket

  8. Välj Generera token.

  9. Kopiera tokenvärdet och klistra in det i en textredigerare för senare användning.

Viktigt!

Se till att du kopierar den här token och lagrar den på ett säkert ställe. Överväg att lagra den här token i Azure Key Vault och komma åt den i ARM-mallen.

Skapa en GitHub-lagringsplats

Den här artikeln använder en GitHub-malllagringsplats för att göra det enkelt för dig att komma igång. Mallen innehåller en startapp som används för att distribuera med Hjälp av Azure Static Web Apps.

  1. Gå till följande plats för att skapa en ny lagringsplats:

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

  2. Namnge lagringsplatsen myfirstswadeployment

    Kommentar

    Azure Static Web Apps kräver minst en HTML-fil för att skapa en webbapp. Lagringsplatsen som du skapar i det här steget innehåller en enda index.html-fil .

  3. Välj Create repository (Skapa lagringsplats).

    screenshot of the Create repository button.

Skapa ARM-mallen

Med förutsättningarna på plats är nästa steg att definiera ARM-distributionsmallfilen.

  1. Skapa en ny mapp som ska innehålla ARM-mallarna.

  2. Skapa en ny fil och ge den namnet azuredeploy.json.

  3. Klistra in följande ARM-mallfragment i 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. Skapa en ny fil och ge den namnet azuredeploy.parameters.json.

  5. Klistra in följande ARM-mallfragment i 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. Uppdatera följande parametrar.

    Parameter Förväntat värde
    repositoryUrl Ange URL:en till GitHub-lagringsplatsen för Static Web Apps.
    repositoryToken Ange GitHub PAT-token.

  7. Spara uppdateringarna innan du kör distributionen i nästa steg.

Köra distributionen

Du behöver antingen Azure CLI eller Azure PowerShell för att distribuera mallen.

Logga in på Azure

Om du vill distribuera en mall loggar du in på Antingen Azure CLI eller Azure PowerShell.

az login

Om du har flera Azure-prenumerationer väljer du den prenumeration som du vill använda. Ersätt <SUBSCRIPTION-ID> med din prenumerationsinformation:

az account set --subscription <SUBSCRIPTION-ID>

Skapa en resursgrupp

När du distribuerar en mall anger du en resursgrupp som innehåller relaterade resurser. Innan du kör distributionskommandot skapar du resursgruppen med antingen Azure CLI eller Azure PowerShell.

Kommentar

CLI-exemplen i den här artikeln är skrivna för Bash-gränssnittet.

resourceGroupName="myfirstswadeployRG"

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

Distribuera mallen

Använd något av dessa distributionsalternativ för att distribuera mallen.


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

Mer information om hur du distribuerar mallar med hjälp av Azure CLI finns i Distribuera resurser med ARM-mallar och Azure CLI.

Visa webbplatsen

Det finns två aspekter för att distribuera en statisk app. Den första etablerar de underliggande Azure-resurserna som utgör din app. Den andra är ett GitHub Actions-arbetsflöde som bygger och publicerar din app.

Innan du kan navigera till den nya statiska platsen måste distributionsversionen först köras.

Översiktsfönstret för Static Web Apps visar en serie länkar som hjälper dig att interagera med din webbapp.

Overview window

  1. Klicka på banderollen som säger, Klicka här för att kontrollera statusen för dina GitHub Actions-körningar tar dig till GitHub Actions som körs mot din lagringsplats. När du har kontrollerat att distributionsjobbet är klart kan du navigera till din webbplats via den genererade URL:en.

  2. När GitHub Actions-arbetsflödet är klart kan du klicka på URL-länken för att öppna webbplatsen på den nya fliken.

Rensa resurser

Rensa de resurser som du har distribuerat genom att ta bort resursgruppen.

  1. Från Azure-portalen väljer du Resursgrupp från den vänstra menyn.
  2. Ange resursgruppens namn i fältet Filtrera efter namn.
  3. Välj resursgruppens namn.
  4. Välj Ta bort resursgrupp från menyn längst upp.

Nästa steg

Konfigurera din statiska webbapp