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

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

Pré-requisitos

Recurso	Notas
Subscrição 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 no GitHub, poderá criar uma gratuitamente.

Recurso	Notas
Subscrição 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 no GitHub, poderá criar uma.

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:

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

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

3. Selecione Criar repositório a partir de modelo.

   

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.

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

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 Static Web App.
4. Selecione Aplicativo Web estático.
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.

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

Nota

Se não vir 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 de 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.
Origem	Selecione 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. Selecione Reagir na lista suspensa Predefinições de compilação.

2. Mantenha o valor padrão na caixa Local do aplicativo.

3. Deixe a caixa Localização da api vazia.

4. Digite build na caixa Local do artefato do aplicativo.

Selecione Rever + criar.

Nota

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

Selecione Criar.

Selecione Ir para recurso.

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.

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

2. Quando o fluxo de trabalho de Ações do GitHub estiver concluído, você poderá selecionar o link 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

Adicionar uma API ao seu aplicativo