Tutorial: 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 ( 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 do Aplicativo Web Estático do Azure

Pré-requisitos

Conta ativa do Azure: Se você não tiver uma, poderá criar uma conta gratuitamente.
Conta do GitHub: Se você não tiver uma, poderá criar uma conta do GitHub gratuitamente
Editor de Modelos do ARM: Examinar e editar modelos requer um editor JSON. O Visual Studio Code com a extensão Azure Resource Manager Tools é muito adequado para editar Templates ARM. Para obter instruções sobre como instalar e configurar o Visual Studio Code, consulte Início Rápido: Criar modelos do ARM com o Visual Studio Code.
CLI do Azure ou Azure PowerShell: implantar modelos do ARM requer uma ferramenta de linha de comando. Para obter as instruções de instalação, confira:

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 GitHub que contém o código-fonte do site estático.

No perfil de conta do GitHub (no canto superior direito), selecione Configurações.
Selecione Configurações do Desenvolvedor.
Selecione Tokens de Acesso Pessoal.
Selecione Gerar Novo Token.
Forneça um nome para esse token no campo Nome , por exemplo , myfirstswadeployment.
Selecione uma Expiração para o token, o padrão é 30 dias.
Especifique os seguintes escopos: repo, workflow, write:packages
Selecione Gerar token.
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 implantar usando Aplicativos Web Estáticos do Azure.

Vá para o seguinte local para criar um novo repositório:
1. https://github.com/staticwebdev/vanilla-basic/generate
Nomeie seu repositório myfirstswadeployment

Observação

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

Criar o modelo do ARM

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

Crie uma nova pasta para manter os modelos do ARM.
Crie um novo arquivo e nomeie-o azuredeploy.json.

Cole o seguinte fragmento de modelo ARM em 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'))]"
                        ]
                    }
                ]
            }
        ]
    }

Crie um novo arquivo e nomeie-o azuredeploy.parameters.json.

Cole o trecho do modelo 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"
                }
            }
        }
    }

Atualize os parâmetros a seguir.

Parâmetro Valor esperado

repositoryUrl Forneça a URL para seu repositório GitHub de Aplicativos Web Estáticos.

repositoryToken Forneça o token do GitHub PAT.
Salve as atualizações antes de executar a implantação na próxima etapa.

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

Executando a implantação

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

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

Azure CLI
PowerShell

az login

Connect-AzAccount

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

Azure CLI
PowerShell

az account set --subscription <SUBSCRIPTION-ID>

Set-AzContext <SUBSCRIPTION-ID>

Criar um grupo de recursos

Ao implantar um modelo, você especifica um grupo de recursos que contém 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 da CLI neste artigo são escritos para o shell do Bash.

Azure CLI
PowerShell

resourceGroupName="myfirstswadeployRG"

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

$resourceGroupName = "myfirstswadeployRG"

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

Implantar modelo

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

Azure CLI
PowerShell


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 modelos usando a CLI do Azure, consulte Implantar recursos com modelos do ARM e a CLI do Azure.

$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, consulte Implantar recursos com modelos do ARM e o Azure PowerShell.

Exibir o site

Há dois aspectos para implantar 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.

Janela de Visão Geral

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. Depois de verificar se o trabalho de implantação está concluído, você pode navegar até o site por meio da URL gerada.
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.

No portal do Azure, selecione Grupo de recursos no menu à esquerda.
Insira o nome do grupo de recursos no campo Filtrar por nome .
Selecione o nome do grupo de recursos.
Escolha Excluir grupo de recursos no menu superior.

Próximas etapas

Configurar seu aplicativo Web estático

Comentários

Esta página foi útil?

Last updated on 2025-10-09