Implante um aplicativo React nos Aplicativos Web Estáticos do Azure

Neste tutorial, você implantará um aplicativo React nos Aplicativos Web Estáticos do Azure usando o portal do Azure.

Pré-requisitos

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

Recurso	Observações
Assinatura do Azure	Se você não tiver uma assinatura do Azure, crie uma conta de avaliação gratuita.
Conta do Azure DevOps	Se você não tiver uma conta do 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é a seguinte localização para criar um repositório:

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

2. Nomeie seu repositório my-first-static-web-app.

3. Selecione Criar repositório com base no 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. Entre 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:

   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.

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 uma URL do repositório para a estrutura de sua escolha e cole-a na caixa Clonar 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 do Azure.
2. Selecione Criar um recurso.
3. Procure Aplicativos Web estáticos.
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.

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.

Depois de entrar com o GitHub, insira as 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

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.

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

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

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

3. Deixe a caixa Local da API vazia.

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

Selecione Examinar + criar.

Observação

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

Selecione Criar.

Selecione Ir para o recurso.

Exibir o site

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.

1. Selecionar GitHub Action é executado na Visão Geral leva você para o GitHub Actions em execução em seu repositório. Verifique se a ação de implantação está concluída antes de continuar.

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