Esercitazione: Pubblicare App Web statiche di Azure usando un modello di Resource Manager

Questo articolo illustra come distribuire App Web statiche di Azure usando un modello di Azure Resource Manager (modello di Resource Manager).

Questa esercitazione apprendi come:

Prerequisiti

• Account Azure attivo: se non è disponibile, è possibile creare gratuitamente un account.

• Account GitHub: se non è disponibile, è possibile creare gratuitamente un account GitHub

• Editor per i modelli di Resource Manager: la revisione e la modifica dei modelli richiedono un editor JSON. Visual Studio Code con l'estensione Strumenti di Azure Resource Manager è ideale per la modifica dei modelli di Resource Manager. Per istruzioni su come installare e configurare Visual Studio Code, vedere Avvio rapido: Creare modelli arm con Visual Studio Code.

• Interfaccia della riga di comando di Azure o Azure PowerShell: la distribuzione di modelli arm richiede uno strumento da riga di comando. Per le istruzioni di installazione, vedere:

  • Installare l'interfaccia della riga di comando di Azure nel sistema operativo Windows
  • Installare l'interfaccia della riga di comando di Azure nel sistema operativo Linux
  • Installare l'interfaccia della riga di comando di Azure in macOS
  • Installare Azure PowerShell

Creare un token di accesso personale GitHub

Uno dei parametri nel modello di Resource Manager è repositoryToken, che consente al processo di distribuzione ARM di interagire con il repository GitHub che contiene il codice sorgente del sito statico.

1. Nell'angolo superiore destro del profilo dell'account GitHub selezionare Impostazioni.

2. Selezionare Developer Impostazioni.

3. Selezionare Token di accesso personali.

4. Selezionare Genera nuovo token.

5. Specificare un nome per questo token nel campo Nome , ad esempio myfirstswadeployment.

6. Selezionare una scadenza per il token, il valore predefinito è 30 giorni.

7. Specificare gli ambiti seguenti: repository, flusso di lavoro, scrittura:pacchetti

8. Selezionare Genera token.

9. Copiare il valore del token e incollarlo in un editor di testo per usarlo in un secondo momento.

Creare un repository GitHub

In questo articolo si usa un repository di modelli GitHub per semplificare le operazioni. Il modello include un'app di partenza usata per la distribuzione con App Web statiche di Azure.

1. Passare al percorso seguente per creare un nuovo repository:

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

2. Assegnare al repository il nome myfirstswadeployment

   Nota

   Con App Web statiche di Azure è necessario almeno un file HTML per creare un'app Web. Il repository creato in questo passaggio include un singolo file index.html.

3. Selezionare Create repository.

   

Creare il modello di Resource Manager

Con i prerequisiti necessari, il passaggio successivo consiste nel definire il file del modello di distribuzione arm.

1. Creare una nuova cartella per contenere i modelli di Resource Manager.

2. Creare un nuovo file e denominarlo azuredeploy.json.

3. Incollare il frammento di modello arm seguente in 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. Creare un nuovo file e denominarlo azuredeploy.parameters.json.

5. Incollare il frammento di modello arm seguente in 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. Aggiornare i parametri seguenti.

   Parametro	Valore previsto
   repositoryUrl	Specificare l'URL del repository GitHub App Web statiche.
   repositoryToken	Specificare il token PAT di GitHub.

7. Salvare gli aggiornamenti prima di eseguire la distribuzione nel passaggio successivo.

Esecuzione della distribuzione

Per distribuire il modello, è necessario usare l'interfaccia della riga di comando di Azure o Azure PowerShell.

Accedere ad Azure

Per distribuire un modello, accedere all'interfaccia della riga di comando di Azure o ad Azure PowerShell.

az login

Connect-AzAccount

Se si hanno più sottoscrizioni di Azure, selezionare quella da usare. Sostituire <SUBSCRIPTION-ID> con le informazioni sulla sottoscrizione:

az account set --subscription <SUBSCRIPTION-ID>

Set-AzContext <SUBSCRIPTION-ID>

Creare un gruppo di risorse

Quando si distribuisce un modello, si specifica un gruppo di risorse che contiene risorse correlate. Prima di eseguire il comando di distribuzione, creare il gruppo di risorse usando l'interfaccia della riga di comando di Azure oppure Azure PowerShell.

resourceGroupName="myfirstswadeployRG"

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

$resourceGroupName = "myfirstswadeployRG"

New-AzResourceGroup `
  -Name $resourceGroupName `
  -Location "Central US"

Distribuire un modello

Usare una di queste opzioni di distribuzione per distribuire il modello.

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

Visualizzare il sito Web

La distribuzione di un'app statica è un processo in due passaggi. Il primo è il provisioning delle risorse di Azure sottostanti che costituiscono l'app. Il secondo è un flusso di lavoro di GitHub Actions che compila e pubblica l'applicazione.

Prima di poter passare al nuovo sito statico, deve terminare l'esecuzione della compilazione di distribuzione.

La finestra della panoramica di App Web statiche visualizza una serie di collegamenti che consentono di interagire con l'app Web.

1. Facendo clic sul banner Click here to check the status of your GitHub Actions runs (Fare clic qui per controllare lo stato delle esecuzioni di GitHub Actions), vengono visualizzate le esecuzioni di GitHub Actions nel repository. Dopo aver verificato il completamento del processo di distribuzione, è possibile passare al sito Web tramite l'URL generato.

2. Al completamento del flusso di lavoro di GitHub Actions, è possibile fare clic sul collegamento URL per aprire il sito Web nella nuova scheda.

Pulire le risorse

Eliminare le risorse distribuite eliminando il gruppo di risorse.

1. Nel portale di Azure selezionare Gruppo di risorse nel menu a sinistra.
2. Immettere il nome del gruppo di risorse nel campo Filtra per nome.
3. Selezionare il nome del gruppo di risorse.
4. Selezionare Elimina gruppo di risorse nel menu in alto.

Passaggi successivi