Tutorial: Publicar aplicativos Web estáticos do Azure usando um modelo ARM

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

Neste tutorial, irá aprender a:

Criar um modelo ARM para aplicativos Web estáticos do Azure
Implantar o Modelo ARM para criar uma instância do Aplicativo Web Estático do Azure

Pré-requisitos

Conta ativa do Azure: Se não tiver uma, pode criar uma conta gratuitamente.
Conta GitHub: Se você não tiver uma, você pode criar uma conta GitHub gratuitamente
Editor para modelos ARM: A revisão e edição de modelos requer um editor JSON. O Visual Studio Code com a extensão Azure Resource Manager Tools é adequado para editar modelos ARM. Para obter instruções sobre como instalar e configurar o Visual Studio Code, consulte Guia de início rápido: criar modelos ARM com o Visual Studio Code.
Azure CLI ou Azure PowerShell: a implantação de modelos ARM requer uma ferramenta de linha de comando. Para obter instruções de instalação, consulte:

Criar um token de acesso pessoal do GitHub

Um dos parâmetros no modelo 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 estático do site.

No seu 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

Certifique-se de copiar este token e armazená-lo em algum lugar seguro. Considere armazenar esse token no Cofre da Chave do Azure e acessá-lo em seu Modelo ARM.

Criar um repositório GitHub

Este artigo usa um repositório de modelos do GitHub para facilitar os primeiros passos. O modelo apresenta um aplicativo inicial usado para implantar usando os 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 ARM

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

Crie uma nova pasta para armazenar os Modelos ARM.
Crie um novo arquivo e nomeie-o azuredeploy.json.

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

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

Cole o seguinte trecho de modelo ARM no 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 seguintes parâmetros.

Parâmetro Valor esperado

repositoryUrl Forneça a URL para o repositório GitHub do Static Web Apps.

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

Parâmetro	Valor esperado
`repositoryUrl`	Forneça a URL para o repositório GitHub do Static Web Apps.
`repositoryToken`	Forneça o token PAT do GitHub.

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.

da CLI do Azure
PowerShell

az login

Connect-AzAccount

Se tiver várias subscrições do Azure, selecione a subscrição que pretende utilizar. Substitua <SUBSCRIPTION-ID> pelas informações da sua subscrição:

da CLI do Azure
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 implementação, crie o grupo de recursos com a CLI do Azure ou o Azure PowerShell.

Observação

Os exemplos de CLI neste artigo foram escritos para o shell Bash.

da CLI do Azure
PowerShell

resourceGroupName="myfirstswadeployRG"

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

$resourceGroupName = "myfirstswadeployRG"

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

Implementar o modelo

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

da CLI do Azure
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 ARM e 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 ARM e Azure PowerShell.

Ver o site

Há dois aspetos 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 compila e publica a sua aplicação.

Antes de navegar até o novo site estático, a compilação de implantação deve primeiro 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

Clicando no banner que diz, Clique aqui para verificar o status de suas execuções de Ações do GitHub leva você para as Ações do GitHub em execução no seu repositório. Depois de verificar se o trabalho de implantação está concluído, você pode navegar até seu site por meio da URL gerada.
Quando o fluxo de trabalho do GitHub Actions estiver concluído, você poderá clicar no link URL para abrir o site em uma nova guia.

Limpeza de recursos

Limpe os recursos implantados 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.
Selecione Excluir grupo de recursos no menu superior.

Próximos passos

Configurar seu aplicativo Web estático

Feedback

Esta página foi útil?

Last updated on 2025-10-09