Implantar um aplicativo React no Aplicativos Web Estáticos do Azure

Neste artigo, você aprenderá a implantar um aplicativo React para Aplicativos Web Estáticos do Azure usando o portal Azure.

Pré-requisitos

Resource Observações
Assinatura do Azure Se você não tiver uma assinatura do Azure, crie uma conta de avaliação gratuita.
Conta do GitHub Se você não tiver uma conta GitHub, poderá criar uma gratuitamente.
Resource Observações
Assinatura do Azure Se você não tiver uma assinatura do Azure, crie uma conta de avaliação gratuita.
Azure DevOps conta Se você não tiver uma conta GitHub, poderá criar uma.

Criar um repositório

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.

  1. Navegue até o seguinte local para criar um novo repositório:

    https://github.com/staticwebdev/react-basic/generate

  2. Nomeie seu repositório como meu primeiro aplicativo Web estático.

  3. Selecione Criar repositório com base no modelo.

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

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.

  1. Faça login 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:

    Setting Valor
    Projeto 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.

  4. Selecione Criar.

  5. Selecione o item de menu Repos.

  6. Selecione o item de menu Arquivos.

  7. No cartão Importar repositório, selecione Importar.

  8. Copie a URL de um repositório para o framework de sua escolha e cole na caixa Clone URL.

    https://github.com/staticwebdev/react-basic.git

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

Criar um aplicativo Web estático

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

  1. Acesse o portal Azure.
  2. Selecione Criar um Recurso.
  3. Procure por Static Web App.
  4. Selecione Aplicativo Web Estático.
  5. Selecione Criar.

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

Captura de tela da seção básica no portal do Azure.

Setting Valor
Subscription Selecione sua assinatura do Azure.
Grupo de Recursos Selecione o link Criar novo e insira static-web-apps-test na caixa de texto.
Nome Insira my-first-static-web-app na caixa de texto.
Tipo de plano Selecione Gratuito.
Fonte Selecione o GitHub e entre no GitHub, se necessário.

Depois de entrar com GitHub, insira as informações do repositório.

Setting Valor
Organização Selecione sua organização.
Repositório Escolha my-first-web-static-app.
Ramo Selecione main.

Captura de tela dos detalhes do repositório no portal do Azure.

Note

Caso você não veja nenhum repositório:

  • Talvez seja necessário autorizar os Aplicativos Web Estáticos do Azure no GitHub. Navegue até o repositório do GitHub e vá para Configurações > Aplicativos > Aplicativos OAuth Autorizados, selecione Aplicativos Web Estáticos do Azure e Conceder.
  • 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.

Setting Valor
Subscription Selecione sua assinatura do Azure.
Grupo de Recursos Selecione o link Criar novo e insira static-web-apps-test na caixa de texto.
Nome Insira my-first-static-web-app na caixa de texto.
Tipo de plano Selecione Gratuito.
Fonte Selecione DevOps.
Organização Selecione sua organização.
Projeto Selecione seu projeto.
Repositório Escolha my-first-web-static-app.
Ramo Selecione main.

Note

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.

  1. Selecione Reagir da lista suspensa Predefinições de Build.

  2. Mantenha o valor padrão na caixa Localização do aplicativo.

  3. Deixe o campo Local da API vazio.

  4. Digite build na caixa Localização do artefato do aplicativo.

Selecione Examinar + criar.

Captura de tela do botão Criar.

Note

Edite o arquivo de fluxo de trabalho para alterar esses valores depois de criar o aplicativo.

Selecione Criar.

Captura de tela do botão Criar.

Selecione e acesse o recurso.

Captura de tela do botão prosseguir para o recurso.

Exibir o site

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

Captura de tela da janela de visão geral dos Aplicativos Web Estáticos do Azure.

  1. Selecionar execuções do GitHub Actions na Visão Geral leva você às execuções do GitHub Actions em execução no repositório. Verifique se a ação de implantação está concluída antes de continuar.

  2. Depois que o fluxo de trabalho GitHub Actions for concluído, você poderá selecionar 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:

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

Próximas Etapas 

Adicionar uma API ao seu aplicativo

  • Last updated on