Tutorial: Publicar um site do Gatsby no Aplicações Web Estáticas do Azure

  • Artigo
  • 2 minutos para ler

Este artigo demonstra como criar e implementar uma aplicação Web do Gatsby para Aplicações Web Estáticas do Azure. O resultado final é um novo site Aplicações Web Estáticas (com o GitHub Actions associado) que lhe dá controlo sobre a forma como a aplicação é criada e publicada.

Neste tutorial, ficará a saber como:

  • Criar uma aplicação do Gatsby
  • Configurar um site Aplicações Web Estáticas do Azure
  • Implementar a aplicação Gatsby no Azure

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

Pré-requisitos

Criar uma Aplicação do Gatsby

Criar uma aplicação do Gatsby com a Interface de Linha de Comandos (CLI) do Gatsby:

  1. Abrir um terminal

  2. Utilize a ferramenta npx para criar uma nova aplicação com a CLI do Gatsby. Esta operação poderá demorar alguns minutos.

    npx gatsby new static-web-app

  3. Ir para a aplicação criada recentemente

    cd static-web-app

  4. Inicializar um repositório Git

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

Nota

Se estiver a utilizar a versão mais recente do Gatsby, poderá ter de modificar o package.json para incluir "engines": { "node": ">=18.0.0" },

Enviar a sua aplicação para o GitHub

Tem de ter um repositório no GitHub para criar um novo recurso Aplicações Web Estáticas do Azure.

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

  2. Em seguida, adicione o repositório do GitHub que acabou de criar como remoto ao seu repositório local. Certifique-se de que adiciona o seu nome de utilizador do GitHub em vez do marcador de <YOUR_USER_NAME> posição no seguinte comando.

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

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

    git push --set-upstream origin main

Implementar a sua aplicação Web

Os passos seguintes mostram-lhe como criar uma nova aplicação de site estático e implementá-la num 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. Selecione Aplicações Web Estáticas

  5. Selecione Criar

  6. No separador Informações Básicas , introduza os seguintes valores.

    Propriedade Valor
    Subscrição O nome da sua subscrição do Azure.
    Grupo de recursos my-gatsby-group
    Nome my-gatsby-app
    Tipo de plano Gratuito
    Região para Funções do Azure API e ambientes de teste Selecione uma região mais próxima de si.
    Origem GitHub

  7. Selecione Iniciar sessão com o GitHub e autentique-se com o GitHub.

  8. Introduza os seguintes valores do GitHub.

    Propriedade Valor
    Organização Selecione a organização do GitHub pretendida.
    Repositório Selecione gatsby-static-web-app.
    Ramo Selecione principal.

  9. Na secção Detalhes da Compilação, selecione Gatsby no menu pendente Criar Predefinições e mantenha os valores predefinidos.

Rever e criar

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

  2. Selecione Criar para iniciar a criação do Serviço de Aplicações Aplicação Web Estática e aprovisionar um GitHub Actions para implementação.

  3. Quando a implementação estiver concluída, selecione Ir para recurso.

  4. No ecrã de recursos, selecione a ligação URL para abrir a aplicação implementada. Poderá ter de aguardar um minuto ou dois para que o GitHub Actions seja concluído.

    Aplicação implementada

Limpar os recursos

Se não quiser continuar a utilizar esta aplicação, pode eliminar o recurso da Aplicação Web Estática do Azure 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 indicou anteriormente
  3. Clique na aplicação
  4. Clique no botão Eliminar
  5. Clique em Sim para confirmar a ação de eliminação

Passos seguintes

Adicionar um domínio personalizado