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 do GitHub: Se você não tiver uma, você pode criar uma conta do 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:
Nomeie seu repositório myfirstswadeployment
Nota
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 .html índice.
Selecione Create repository (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 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 seguinte trecho de modelo ARM 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 seguintes parâmetros.
Parâmetro Valor esperado repositoryUrlForneça a URL para o repositório GitHub do Static Web Apps. repositoryTokenForneça o token PAT do GitHub. Salve as atualizações antes de executar a implantação na próxima etapa.
Executando a implantação
Você precisa da CLI do Azure ou do Azure PowerShell para implantar o modelo.
Iniciar sessão no Azure
Para implantar um modelo, entre na CLI do Azure ou no Azure PowerShell.
az login
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:
az account set --subscription <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.
Nota
Os exemplos de CLI neste artigo foram escritos para o shell Bash.
resourceGroupName="myfirstswadeployRG"
az group create \
--name $resourceGroupName \
--location "Central US"
Implementar o modelo
Use uma dessas opções de implantação para implantar o modelo.
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.
Ver o site
Há dois aspetos na implantação de um aplicativo estático. O primeiro aprovisiona os recursos subjacentes do Azure que compõem a sua aplicação. 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.
Clicar 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.
Clean up resources (Limpar recursos)
Limpe os recursos implantados excluindo o grupo de recursos.
- No portal do Azure, selecione Grupo de recursos no menu à esquerda.
- Introduza o nome do grupo de recursos no campo Filtrar por nome.
- Selecione o nome do grupo de recursos.
- Selecione Eliminar grupo de recursos no menu superior.