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 en Azure Resource Manager mall (ARM-mall).

I de här självstudierna får du lära dig att:

Förutsättningar

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

• GitHub konto: Om du inte har ett konto kan du skapa ett GitHub konto kostnadsfritt

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

• Azure CLI eller Azure PowerShell: Distribution av ARM-mallar kräver ett kommandoradsverktyg. Installationsanvisningarna finns i:

  • Installera Azure CLI på Windows OPERATIVSYSTEM
  • 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 , som gör att ARM-distributionsprocessen kan interagera med GitHub-lagringsplatsen som innehåller källkoden repositoryToken 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.

3. Välj Personliga åtkomsttoken.

4. Välj Generera ny token.

5. Ange ett namn för denna token i fältet Anteckning, till exempel myfirstswadeployment.

6. Ange följande omfång: repo, workflow, write:packages

7. Välj Generera token.

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

Skapa en GitHub lagringsplatsen

I den här artikeln används GitHub en malldatabas 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. Ge lagringsplatsen namnet myfirstswadeployment

   Anteckning

   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 endaindex.html-fil.

3. Välj Create repository from template (Skapa lagringsplats från mall).

   

Skapa ARM-mallen

När förutsättningarna är uppfyllda är nästa steg att definiera mallfilen för ARM-distributionen.

1. Skapa en ny mapp för ARM-mallarna.

2. Skapa en ny fil och ge den namnetazuredeploy.jspå.

3. Klistra in följande ARM-mallfragment i azuredeploy.jspå.

       {
           "$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 namnetazuredeploy.parameters.jspå.

5. Klistra in följande ARM-mallfragment i azuredeploy.parameters.jspå.

       {
           "$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 din Static Web Apps GitHub lagringsplats.
   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 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-OR-SUBSCRIPTION-NAME> med din prenumerationsinformation:

az account set --subscription <SUBSCRIPTION-ID-OR-SUBSCRIPTION-NAME>

Set-AzContext <SUBSCRIPTION-ID-OR-SUBSCRIPTION-NAME>

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 av 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 distributions versionen först slutföras.

I fönstret Översikt över statisk Web Apps visas en serie länkar som hjälper dig att interagera med din webbapp.

1. Klicka här om du vill kontrol lera statusen för dina GitHub-åtgärder för att gå till de GitHub-åtgärder som körs mot din lagrings plats. När du har kontrollerat att distributions jobbet är klart kan du gå till webbplatsen via den genererade URL: en.

2. När GitHub-åtgärds arbets flödet är klart kan du klicka på URL -länken för att öppna webbplatsen på ny flik.

Rensa resurser

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

1. Från Azure Portal 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