Condividi tramite


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:

  • Creare un modello di Resource Manager per App Web statiche di Azure
  • Distribuire il modello di Resource Manager per creare un'istanza di App Web statica di Azure

Prerequisiti

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.

Importante

Assicurarsi di copiare questo token e archiviarlo in un luogo sicuro. Prendere in considerazione l'archiviazione di questo token in Azure Key Vault e accedervi nel modello di Resource Manager.

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.

    screenshot of the Create repository button.

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.

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>

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.

Nota

Gli esempi dell'interfaccia della riga di comando in questo articolo sono scritti per la shell Bash.

resourceGroupName="myfirstswadeployRG"

az group create \
  --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

Per altre informazioni sulla distribuzione di modelli tramite l'interfaccia della riga di comando di Azure, vedere Distribuire risorse con i modelli di Resource Manager e l'interfaccia della riga di comando di Azure.

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.

Overview window

  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