Guia de Início Rápido: Criar seu primeiro aplicativo Web estático
Artigo
Os Aplicativos Web Estáticos do Azure publicam um site em um ambiente de produção por meio da criação de aplicativos em um Azure DevOps ou repositório GitHub. Neste guia de início rápido, você implantará um aplicativo Web nos Aplicativos Web Estáticos do Azure usando o portal do Azure.
Este artigo usa um repositório de modelos do GitHub para facilitar a introdução. O modelo apresenta um aplicativo inicial para implantar nos Aplicativos Web Estáticos do Azure.
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.
Navegue até a seguinte localização para criar um repositório:
Este artigo usa um repositório do Azure DevOps para facilitar a introdução. O repositório apresenta um aplicativo inicial usado para implantação por meio dos Aplicativos Web Estáticos do Azure.
Entre no Azure DevOps.
Selecione Novo repositório.
Na janela Criar projeto, expanda o menu Avançado e faça as seguintes seleções:
Configuração
Valor
Project
Insira my-first-web-static-app.
Visibilidade
Selecionar Privada.
Controle de versão
Selecione Git.
Processo do item de trabalho
Selecione a opção que melhor se adequa aos métodos de desenvolvimento.
Selecione Criar.
Selecione o item de menu Repos.
Selecione o item de menu Arquivos.
No cartão Importar repositório, selecione Importar.
Copie uma URL do repositório para a estrutura de sua escolha e cole-a na caixa Clonar URL.
Na seção Informações Básicas, comece configurando seu novo aplicativo e vinculando-o a um repositório GitHub.
Configuração
Valor
Subscription
Selecione sua assinatura do Azure.
Grupo de recursos
Selecione o link Criar novo e insira static-web-apps-bitbucket na caixa de texto.
Nome
Insira my-first-static-web-app na caixa de texto.
Tipo de plano
Selecione Gratuito.
Origem
Selecione o GitHub e entre no GitHub, se necessário.
Se necessário, entre no GitHub e insira as seguintes informações do repositório.
Configuração
Valor
Organização
Selecione sua organização.
Repositório
Escolha my-first-web-static-app.
Branch
Selecione main.
Observação
Se você não vir uma lista de repositórios:
Talvez seja necessário autorizar os Aplicativos Web Estáticos do Azure no GitHub. Navegue até o seu perfil do GitHub e vá para Configurações > Aplicativos > Aplicativos OAuth autorizados, selecione Aplicativos Web Estáticos do Azure e selecione Concessão.
Talvez seja necessário autorizar os Aplicativos Web Estáticos do Azure na sua organização do Azure DevOps. Você precisa ser um proprietário da organização para conceder as permissões. Solicite o acesso a aplicativos de terceiros por meio do OAuth. Para obter mais informações, confira Autorizar o acesso às APIs REST com o OAuth 2.0.
Na seção Informações Básicas, comece configurando o novo aplicativo e vinculando-o a um repositório do Azure DevOps.
Configuração
Valor
Subscription
Selecione sua assinatura do Azure.
Grupo de recursos
Selecione o link Criar novo e insira static-web-apps-bitbucket na caixa de texto.
Nome
Insira my-first-static-web-app na caixa de texto.
Tipo de plano
Selecione Gratuito.
Azure Functions e detalhes de preparo
Selecione a região mais próxima de você.
Origem
Escolha Azure DevOps.
Organização
Selecione sua organização.
Project
Selecione o projeto.
Repositório
Escolha my-first-web-static-app.
Branch
Selecione main.
Observação
Verifique se o branch que está sendo usando não está protegido e se você tem permissões suficientes para emitir um comando push. Para verificar, navegue até o repositório DevOps e acesse Repos –>Branches e selecione Mais opções. Em seguida, selecione seu branch e, em seguida, Políticas de branch para garantir que as políticas necessárias não estejam habilitadas.
Na seção Detalhes do Build, adicione detalhes de configuração específicos à sua estrutura de front-end preferida.
Há dois aspectos na implantação de um aplicativo estático. O primeiro cria os recursos subjacentes do Azure que compõem seu aplicativo. O segundo é um fluxo de trabalho que compila e publica seu aplicativo.
Para você acessar o novo site estático, primeiro, o build de implantação precisa 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.
Se você escolher a barra de notificação que indica Clique aqui para verificar o status das suas execuções do GitHub Actions, será levado ao GitHub Actions em execução no repositório. Depois de verificar se o trabalho de implantação foi concluído, acesse o site por meio da URL gerada.
Depois que o fluxo de trabalho do GitHub Actions for concluído, selecione o link URL para abrir o site na nova guia.
Depois que o fluxo de trabalho for concluído, selecione o link da URL para abrir o site na nova guia.
Limpar os recursos
Se você não quiser continuar usando esse aplicativo, poderá excluir a instância do Aplicativo Web Estático do Azure com as seguintes etapas:
Publique um aplicativo JavaScript do Angular, do React, do Svelte ou do Vue com os Aplicativos Web Estáticos do Azure. Use o Visual Studio Code para criar e executar o aplicativo Web localmente.
Crie soluções de ponta a ponta no Microsoft Azure para criar Funções do Azure, implementar e gerenciar aplicativos Web, desenvolver soluções utilizando o Armazenamento do Microsoft Azure e muito mais.