Partilhar via


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:

  • Criar uma aplicação do Gatsby
  • Configurar um site de Aplicativos Web Estáticos do Azure
  • Implantar o aplicativo 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 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"
    

Nota

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

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.

    Aplicativo implantado

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