Tutorial: Como publicar Aplicativos Web Estáticos do Azure usando um modelo do ARM

Este artigo demonstra como implantar Aplicativos Web Estáticos do Azure usando um modelo do ARM (modelo do Azure Resource Manager).

Neste tutorial, você aprenderá a:

• Criar um modelo do ARM para Aplicativos Web Estáticos do Azure
• Implantar o modelo do ARM para criar uma instância de Aplicativo Web Estático do Azure

Pré-requisitos

• Conta ativa do Azure: caso não tenha uma, crie uma conta gratuitamente.

• Conta do GitHub: caso ainda não tenha uma, crie uma conta gratuitamente

• Editor de modelos do ARM: o exame e a edição de modelos exigem um editor de JSON. O Visual Studio Code com a extensão Ferramentas do Azure Resource Manager é adequado para a edição de modelos do ARM. Para obter instruções de como instalar e configurar o Visual Studio Code, confira o Guia de início rápido: Criar modelos do ARM com o Visual Studio Code.

• CLI do Azure ou Azure PowerShell: a implantação de modelos do ARM exige uma ferramenta de linha de comando. Para obter as instruções de instalação, confira:

  • Instalar a CLI do Azure no SO Windows
  • Instalar a CLI do Azure no SO Linux
  • Instalar a CLI do Azure no macOS
  • Instale o Azure PowerShell

Criar um token de acesso pessoal do GitHub

Um dos parâmetros no modelo do ARM é repositoryToken, que permite que o processo de implantação do ARM interaja com o repositório do GitHub que contém o código-fonte do site estático.

1. No perfil da sua conta do GitHub (no canto superior direito), selecione Configurações.

2. Selecione Configurações do Desenvolvedor.

3. Selecione Tokens de Acesso Pessoal.

4. Selecione Gerar Novo Token.

5. Forneça um nome para esse token no campo Nome, por exemplo, myfirstswadeployment.

6. Selecione uma Expiração para o token. O padrão é 30 dias.

7. Especifique os seguintes escopos: repositório, fluxo de trabalho, gravação: pacotes

8. Selecione Gerar token.

9. Copie o valor do token e cole-o em um editor de texto para uso posterior.

Importante

Copie esse token e armazene-o em algum lugar seguro. Considere armazenar esse token no Azure Key Vault e acessá-lo no modelo do ARM.

Criar um repositório do GitHub

Este artigo usa um repositório de modelos do GitHub para facilitar a introdução. O modelo apresenta um aplicativo inicial usado para implantação por meio dos Aplicativos Web Estáticos do Azure.

1. Navegue até a seguinte localização para criar um repositório:

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

2. Nomeie o repositório como myfirstswadeployment

   Observação

   Os Aplicativos Web Estáticos do Azure requerem pelo menos um arquivo HTML para criar um aplicativo Web. O repositório criado nesta etapa inclui um único arquivo index.html.

3. Selecione Criar repositório.

   

Criar um modelo do ARM

Com os pré-requisitos em vigor, a próxima etapa é definir o arquivo de modelo de implantação do ARM.

1. Crie uma pasta para conter os modelos do ARM.

2. Crie um arquivo e nomeie-o como azuredeploy.json.

3. Cole o snippet do modelo do ARM a seguir no 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. Crie um arquivo e nomeie-o como azuredeploy.parameters.json.

5. Cole o snippet do modelo do ARM a seguir em 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. Atualize os parâmetros a seguir.

   Parâmetro	Valor esperado
   repositoryUrl	Forneça a URL do repositório do GitHub dos Aplicativos Web Estáticos.
   repositoryToken	Forneça o token PAT do GitHub.

7. Salve as atualizações antes de executar a implantação na próxima etapa.

Como executar a implantação

Você precisa da CLI do Azure ou do Azure PowerShell para implantar o modelo.

Entrar no Azure

Para implantar um modelo, entre na CLI do Azure ou no Azure PowerShell.

CLI do Azure

az login

PowerShell

Connect-AzAccount

Se tiver várias assinaturas do Azure, selecione a que deseja usar. Substitua <SUBSCRIPTION-ID> pelas informações da sua assinatura:

CLI do Azure

az account set --subscription <SUBSCRIPTION-ID>

PowerShell

Set-AzContext <SUBSCRIPTION-ID>

Criar um grupo de recursos

Ao implantar um modelo, você especifica um grupo de recursos que contém os recursos relacionados. Antes de executar o comando de implantação, crie o grupo de recursos com a CLI do Azure ou o Azure PowerShell.

Observação

Os exemplos de CLI neste artigo são escritos para o shell do Bash.

CLI do Azure

resourceGroupName="myfirstswadeployRG"

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

PowerShell

$resourceGroupName = "myfirstswadeployRG"

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

Implantar modelo

Use uma dessas opções de implantação para implantar o modelo.

CLI do Azure

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

Para saber mais sobre como implantar o modelo usando a CLI do Azure, confira Implantar recursos com modelos do ARM e a CLI do Azure.

PowerShell

$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

Para saber mais sobre como implantar modelos usando o Azure PowerShell, confira Implantar recursos com modelos do ARM e o Azure PowerShell.

Exibir o site

Há dois aspectos na implantação de um aplicativo estático. O primeiro provisiona os recursos subjacentes do Azure que compõem seu aplicativo. O segundo é um fluxo de trabalho do GitHub Actions que cria e publica seu aplicativo.

Antes de navegar até o novo site estático, primeiro a compilação de implantação deve concluir a execução.

A janela de visão geral de Aplicativos Web Estáticos exibe uma série de links que ajudam você a interagir com seu aplicativo Web.

1. Ao clicar na barra de notificação que indica Clique aqui para verificar o status das suas execuções do GitHub Actions, você será levado ao GitHub Actions em execução no repositório. Quando você verificar se o trabalho de implantação foi concluído, poderá navegar para seu site por meio da URL gerada.

2. Depois que o fluxo de trabalho do GitHub Actions for concluído, você poderá clicar no link da URL para abrir o site na nova guia.

Limpar os recursos

Limpe os recursos que você implantou excluindo o grupo de recursos.

1. No portal do Azure, escolha Grupos de recursos do menu à esquerda.
2. No campo Filtrar por nome, insira o nome do grupo de recursos.
3. Selecione o nome do grupo de recursos.
4. Escolha Excluir grupo de recursos no menu superior.

Próximas etapas

Configurar o aplicativo Web estático