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

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 handledningen får du lära dig att:

Förutsättningar

• Aktivt Azure-konto: Om du inte har ett konto kan du skapa ett konto kostnadsfritt.

• GitHub-konto: Om du inte har något kan du skapa ett GitHub-konto kostnadsfritt

• Redigerare för ARM-mallar: Granskning och redigering av mallar kräver en JSON-redigerare. Visual Studio Code med Azure Resource Manager Tools-tillägget passar bra för redigering av ARM-mallar. Anvisningar om hur du installerar och konfigurerar Visual Studio Code finns i Snabbstart: Skapa ARM-mallar med Visual Studio Code.

• Azure CLI eller Azure PowerShell: För att distribuera ARM-mallar krävs ett kommandoradsverktyg. Installationsanvisningarna finns i:

  • Installera Azure CLI på Windows OS
  • Installera Azure CLI på Linux OS
  • Installera Azure CLI på macOS
  • Installera Azure PowerShell

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 Utvecklarinstä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.

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

   Anmärkning

   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 Skapa lagringsplats.

   

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

Connect-AzAccount

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>

Set-AzContext <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.

resourceGroupName="myfirstswadeployRG"

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

$resourceGroupName = "myfirstswadeployRG"

New-AzResourceGroup `
  -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

$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

Visa webbplatsen

Det finns två aspekter för att distribuera en statisk app. Den första etablerar de underliggande Azure-resurser 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.

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. I Azure-portalen väljer du Resursgrupp på 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 på den översta menyn.

Nästa steg