Implantar um site do Gatsby nos Aplicativos Web Estáticos do Azure

Este artigo demonstra como criar e implantar um aplicativo Web Gatsby nos Aplicativos Web Estáticos do Azure. O resultado final é um novo site de Static Web Apps (com as Ações do GitHub associadas) que lhe dá controle sobre como o aplicativo é criado e publicado.

Neste tutorial, irá aprender a:

Se não tiver uma subscrição do Azure, crie uma conta gratuita do Azure antes de começar.

Pré-requisitos

• Uma conta do Azure com uma subscrição ativa. Se não tiver uma, pode criar uma conta gratuitamente.
• Uma conta GitHub. Se não tiver uma, pode criar uma conta gratuitamente.
• Uma configuração do Git instalada. Se você não tiver um, você pode instalar o Git.
• Ter o Node.js instalado.

Criar um aplicativo Gatsby

Crie um aplicativo Gatsby usando a CLI (Command Line Interface) do Gatsby:

1. Abra um terminal

2. Use a ferramenta npx para criar um novo aplicativo com a CLI do Gatsby. Esta operação poderá demorar alguns minutos.

   npx gatsby new static-web-app
   

3. Ir para a aplicação recém-criada

   cd static-web-app
   

4. Inicializar um repositório Git

   git init
   git add -A
   git commit -m "initial commit"
   

Envie seu aplicativo para o GitHub

Você precisa ter um repositório no GitHub para criar um novo recurso de Aplicativos Web Estáticos do Azure.

1. Crie um repositório GitHub em branco (não crie um README) a partir do https://github.com/new gatsby-static-web-app.

2. Em seguida, adicione o repositório GitHub que você acabou de criar como um remoto ao seu repositório local. Certifique-se de adicionar seu nome de usuário do GitHub no lugar do <YOUR_USER_NAME> espaço reservado no comando a seguir.

   git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
   

3. Envie seu repositório local para o GitHub.

   git push --set-upstream origin main
   

Implantar seu aplicativo Web

As etapas a seguir mostram como criar um novo aplicativo de site estático e implantá-lo em um ambiente de produção.

Criar a aplicação

1. Aceda ao Portal do Azure

2. Selecione Criar um recurso

3. Procure Aplicações Web Estáticas

4. Selecionar aplicativos Web estáticos

5. Selecione Criar

6. Na guia Noções básicas, insira os seguintes valores.

   Property	valor
   Subscrição	Seu nome de assinatura do Azure.
   Grupo de recursos	My-Gatsby-Grupo
   Nome	my-gatsby-app
   Tipo de plano	Gratuito
   Região para API do Azure Functions e ambientes de preparo	Selecione a região mais próxima de si.
   Source	GitHub

7. Selecione Entrar com o GitHub e autentique-se com o GitHub.

8. Insira os seguintes valores do GitHub.

   Property	valor
   Organização	Selecione sua organização desejada no GitHub.
   Repositório	Selecione gatsby-static-web-app.
   Ramo	Selecione principal.

   Nota

   Se você 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>. Para repositórios de organização, você deve ser um proprietário da organização para conceder as permissões.

9. Na seção Detalhes da compilação, selecione Gatsby na lista suspensa Predefinições de compilação e mantenha os valores padrão.

Rever e criar

1. Selecione Rever + Criar para verificar se os detalhes estão corretos.

2. Selecione Criar para iniciar a criação do Aplicativo Web Estático do Serviço de Aplicativo e provisionar uma Ação do GitHub para implantação.

3. Quando a implantação for concluída, selecione Ir para o recurso.

4. Na tela de recurso, selecione o link de URL para abrir seu aplicativo implantado. Talvez seja necessário aguardar um ou dois minutos para que as Ações do GitHub sejam concluídas.

   

Clean up resources (Limpar recursos)

Se não pretender continuar a utilizar esta aplicação, pode eliminar o recurso Azure Static Web App através dos seguintes passos:

1. Abra o portal do Azure
2. Na barra de pesquisa superior, procure a sua aplicação pelo nome que forneceu anteriormente
3. Clique no aplicativo
4. Clique no botão Excluir
5. Clique em Sim para confirmar a ação de exclusão

Próximos passos