Publicar um site do Gatsby em Aplicativos Web Estáticos do Azure

Este artigo demonstra como criar e implantar um aplicativo Web Gatsby em Aplicativos Web Estáticos do Azure. O resultado final é um novo site do Aplicativos Web Estáticos do Azure (com GitHub Actions associadas) que lhe dão controle sobre como o aplicativo é criado e publicado.

Neste tutorial, você aprenderá como:

• Criar um aplicativo Gatsby
• Configurar um site do Aplicativos Web Estáticos do Azure
• Implantar o aplicativo Gatsby no Azure

Caso você não tenha uma assinatura do Azure, crie uma conta gratuita do Azure antes de começar.

Pré-requisitos

• Uma conta do Azure com uma assinatura ativa. Se você não tiver uma, crie uma conta gratuita.
• Uma conta do GitHub. Se você não tiver uma, crie uma conta gratuita.
• Uma configuração do Git instalada. Se você não tiver um, poderá instalar o Git.
• Node. js instalado.

Criar um aplicativo Gatsby

Crie um aplicativo Gatsby usando a CLI (interface de linha de comando) do Gatsby:

1. Abra um terminal.

2. Use a ferramenta npx para criar um novo aplicativo com a CLI do Gatsby. Isso pode levar alguns minutos.

   Bash

   npx gatsby new static-web-app
   

3. Vá para o aplicativo recém-criado

   Bash

   cd static-web-app
   

4. Inicialize um repositório Git

   Bash

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

Observação

Se você estiver usando a versão mais recente do Gatsby, talvez seja necessário modificar o package.json para incluir "engines": { "node": ">=18.0.0" },

Envie por push seu aplicativo para o GitHub.

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

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

2. Em seguida, adicione o repositório do GitHub recém-criado ao seu repositório local como remoto. Adicione o nome de usuário do GitHub no lugar do espaço reservado <YOUR_USER_NAME> no comando a seguir.

   Bash

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

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

   Bash

   git push --set-upstream origin main
   

Implantar o 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 o aplicativo

1. Vá para o Portal do Azure

2. Selecione Criar um Recurso

3. Pesquise por Aplicativos Web Estáticos

4. Selecione Aplicativos Web Estáticos

5. Escolha Criar

6. Na guia Básico, insira os valores a seguir.

   Propriedade	Valor
   Assinatura	Seu nome da assinatura do Azure.
   Grupo de recursos	my-gatsby-group
   Nome	my-gatsby-app
   Tipo de plano	Gratuito
   Região da API do Azure Functions e dos ambientes de preparo	Selecione a região mais próxima de você.
   Origem	GitHub

7. Selecione Entrar com o GitHub e faça a autenticação no GitHub.

8. Insira os valores do GitHub a seguir.

   Propriedade	Valor
   Organização	Selecione a organização do GitHub desejada.
   Repositório	Selecione gatsby-static-web-app.
   Branch	Selecione main.

   Observação

   Se você não vir nenhum repositório, talvez seja necessário autorizar o 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. Em repositórios corporativos, você precisa ser um proprietário da organização para conceder as permissões.

9. Na seção Detalhes do Build, selecione Gatsby no menu suspenso Predefinições de Build e mantenha os valores padrão.

Examinar e criar

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

2. Selecione Criar para iniciar a criação do aplicativo Web estático do Serviço de Aplicativo e provisione uma GitHub Actions para a implantação.

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

4. Na tela de recursos, selecione o link URL para abrir o aplicativo implantado. Talvez seja necessário aguardar um minuto ou dois para que a GitHub Actions seja concluída.

   

Limpar os recursos

Se você não quiser continuar usando esse aplicativo, poderá excluir o recurso Aplicativo Web Estático do Azure com as seguintes etapas:

1. Abra o portal do Azure
2. Na barra de pesquisa superior, pesquise seu aplicativo pelo nome fornecido anteriormente
3. Clique no aplicativo
4. Clique no botão Excluir
5. Clique em Sim para confirmar a ação

Próximas etapas

Adicionar um domínio personalizado