Partilhar via


Guia de início rápido: crie seu primeiro aplicativo Web estático

Os Aplicativos Web Estáticos do Azure publicam um site em um ambiente de produção criando aplicativos a partir de um repositório do Azure DevOps ou GitHub. Neste início rápido, você implanta um aplicativo Web em aplicativos Web estáticos do Azure usando o portal do Azure.

Pré-requisitos

  • Se você não tiver uma assinatura do Azure, crie uma conta de avaliação gratuita.
  • Conta do GitHub

Criar um repositório

Este artigo usa um repositório de modelos do GitHub para facilitar os primeiros passos. O modelo apresenta um aplicativo inicial para implantar nos Aplicativos Web Estáticos do Azure.

  1. Navegue até o seguinte local para criar um novo repositório:
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. Nomeie seu repositório como my-first-static-web-app

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 index.html .

Selecione Create repository (Criar repositório).

Captura de tela do botão Criar repositório.

Criar um repositório

Este artigo usa um repositório do Azure DevOps para facilitar os primeiros passos. O repositório apresenta um aplicativo inicial usado para implantar usando os Aplicativos Web Estáticos do Azure.

  1. Iniciar sessão no Azure DevOps.

  2. Selecione Novo repositório.

  3. Na janela Criar novo projeto, expanda o menu Avançado e faça as seguintes seleções:

    Definição Value
    Project Digite my-first-web-static-app.
    Visibility Selecione Privado.
    Controlo de versões Selecione Git.
    Processo de item de trabalho Selecione a opção que melhor se adapta aos seus métodos de desenvolvimento.
  4. Selecione Criar.

  5. Selecione o item de menu Repositórios .

  6. Selecione o item de menu Arquivos.

  7. Em Importar cartão do repositório, selecione Importar.

  8. Copie um URL de repositório para a estrutura de sua escolha e cole-o na caixa URL de clonagem.

  9. Selecione Importar e aguarde a conclusão do processo de importação.

Criar uma aplicação Web estática

Agora que o repositório foi criado, você pode criar um aplicativo Web estático no portal do Azure.

  1. Aceda ao portal do Azure.
  2. Selecione Criar um Recurso.
  3. Pesquise por aplicativos Web estáticos.
  4. Selecione Aplicações Web Estáticas.
  5. Selecione Criar.

Na seção Noções básicas, comece configurando seu novo aplicativo e vinculando-o a um repositório do GitHub.

Definição Value
Subscrição Selecione a subscrição do Azure.
Grupo de Recursos Selecione o link Criar novo e insira static-web-apps-test na caixa de texto.
Nome Digite my-first-static-web-app na caixa de texto.
Tipo de plano Selecione Gratuito.
Origem Selecione GitHub e entre no GitHub, se necessário.

Se necessário, entre com o GitHub e insira as seguintes informações do repositório.

Definição Value
Organization Selecione a sua organização.
Repositório Selecione my-first-web-static-app.
Filial Selecione principal.

Detalhes do repositório

Nota

Se não vir uma lista de repositórios:

  • Talvez seja necessário autorizar os Aplicativos Web Estáticos do Azure no GitHub. Navegue até seu perfil do GitHub e vá para Configurações Aplicativos OAuth Autorizados, selecione Aplicativos Web Estáticos do Azure e selecione Conceder.> >

  • Talvez seja necessário autorizar os Aplicativos Web Estáticos do Azure em sua organização do Azure DevOps. Você deve ser um proprietário da organização para conceder as permissões. Solicite acesso a aplicativos de terceiros via OAuth. Para obter mais informações, consulte Autorizar acesso a APIs REST com OAuth 2.0.

Na seção Noções básicas, comece configurando seu novo aplicativo e vinculando-o a um repositório do Azure DevOps.

Definição Value
Subscrição Selecione a subscrição do Azure.
Grupo de Recursos Selecione o link Criar novo e insira static-web-apps-test na caixa de texto.
Nome Digite 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 si.
Origem Selecione Azure DevOps.
Organization Selecione a sua organização.
Project Selecione o seu projeto.
Repositório Selecione my-first-web-static-app.
Filial Selecione principal.

Nota

Verifique se a ramificação que você está usando não está protegida e se você tem permissões suficientes para emitir um push comando. Para verificar, navegue até seu repositório de DevOps e vá para Repos ->Branches e selecione Mais opções. Em seguida, selecione sua ramificação e, em seguida , Políticas de filial para garantir que as políticas necessárias não estejam habilitadas.

Na seção Detalhes da compilação, adicione detalhes de configuração específicos à sua estrutura de front-end preferida.

  1. No menu suspenso Predefinições de compilação, selecione Personalizado.
  2. Na caixa Localização da aplicação , introduza ./src.
  3. Deixe a caixa Localização da api vazia.
  4. Na caixa Local de saída , digite ./src.

Selecione Rever + criar.

Selecione Criar.

Revise e crie sua instância de Aplicativos Web Estáticos do Azure.

Nota

Você pode editar o arquivo de fluxo de trabalho para alterar esses valores depois de criar o aplicativo.

Selecione Criar.

Crie sua instância de Aplicativos Web Estáticos do Azure.

Selecione Ir para recurso.

Prossiga para ir para o recurso recém-criado.

Ver o site

Há dois aspetos 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 cria e publica seu aplicativo.

Antes de poder ir para o novo site estático, a compilação de implantação deve primeiro concluir a execução.

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

A janela de visão geral dos Aplicativos Web Estáticos do Azure.

  1. Selecionar no banner que diz, Selecione 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 acessar seu site por meio da URL gerada.

  2. Quando o fluxo de trabalho de Ações do GitHub estiver concluído, você poderá selecionar o link de URL para abrir o site em uma nova guia.

Quando o fluxo de trabalho estiver concluído, você poderá selecionar o link URL para abrir o site em uma nova guia.

Clean up resources (Limpar recursos)

Se não pretender continuar a utilizar esta aplicação, pode eliminar a instância das Aplicações Web Estáticas do Azure através dos seguintes passos:

  1. Abra o portal do Azure.
  2. Pesquise my-first-web-static-app na barra de pesquisa superior.
  3. Selecione o nome do aplicativo.
  4. Selecione Eliminar.
  5. Selecione Sim para confirmar a ação de exclusão (essa ação pode levar alguns minutos para ser concluída).

Próximos passos