Introdução à hospedagem de apps

Com um app Next.js ou Angular (versões 13.5.x+ do Next.js ou 18.2.x+ do Angular) em um repositório do GitHub, começar a usar o App Hosting é tão simples quanto criar um back-end App Hosting e iniciar um lançamento com um push para sua ramificação ativa. Se você não tiver um app, use um dos nossos apps de exemplo para seguir as etapas descritas neste guia.

Antes de começar

Antes de configurar o Firebase App Hosting, crie um projeto do Firebase (se ainda não tiver um) e faça upgrade para o plano Blaze.

Para criar um projeto:

  1. No console do Firebase, clique em Adicionar projeto.

    • Para adicionar recursos do Firebase a um projeto do Google Cloud existente, digite o nome dele ou selecione-o no menu suspenso.

    • Para criar um projeto novo, insira um nome. Também é possível editar o ID do projeto exibido abaixo do nome dele.

  2. Se solicitado, leia e aceite os Termos do Firebase.

  3. Clique em Continuar.

  4. (Opcional) Configure o Google Analytics para o projeto e tenha uma experiência ideal ao usar os seguintes produtos do Firebase: Firebase A/B Testing, Cloud Messaging, Crashlytics, In-App Messaging e Remote Config (incluindo a Personalização).

    Selecione uma conta do Google Analytics ou crie uma nova. Se você criar uma nova conta, selecione seu local do relatório do Analytics e aceite as configurações de compartilhamento de dados pessoais e os termos do Google Analytics no projeto.

  5. Clique em Criar projeto ou Adicionar Firebase se você estiver adicionando o Firebase a um projeto Google Cloud.

O Firebase provisiona recursos automaticamente para seu projeto. Quando o processo for concluído, vamos direcionar você para a página de visão geral do seu projeto no console do Firebase.

Etapa 0 (opcional): criar um repositório do GitHub e um web app

Se você ainda não tiver um app da Web em um repositório do GitHub ou se preferir testar o fluxo com um app de exemplo, comece inicializando uma das nossas amostras para Next.js ou Angular:

npm init @apphosting

É possível executar o app de amostra localmente usando next dev ou ng start. Para continuar, crie um repositório do GitHub e envie o código de amostra recém-inicializado para ele.

Etapa 1: criar um back-end App Hosting

Um back-end do App Hosting é a coleção de recursos gerenciados que o App Hosting cria para criar e executar seu web app.

Console do Firebase: no menu Build, selecione App Hosting e clique em Começar agora.

CLI: (versão 13.15.4 ou mais recente) para criar um back-end, execute o seguinte comando na raiz do diretório do projeto local, fornecendo seu projectID como um argumento:

firebase apphosting:backends:create --project PROJECT_ID

No console ou na CLI, siga as instruções para escolher uma região, configurar uma conexão do GitHub e definir estas configurações básicas de implantação:

  • Defina o diretório raiz do app (o padrão é /)

    É onde o arquivo package.json geralmente está localizado.

  • Defina a ramificação ativa

    Esse é o branch do seu repositório do GitHub que é implantado no seu URL ativo. Muitas vezes, é a ramificação em que as ramificações de recursos ou de desenvolvimento são mescladas.

  • Aceitar ou recusar lançamentos automáticos

    Os lançamentos automáticos são ativados por padrão. Ao concluir a criação do back-end, você pode escolher implantar o app em App Hosting imediatamente.

  • Atribua um nome ao back-end.

Etapa 2: conferir o app implantado

Ao criar um back-end, o Firebase oferece um subdomínio sem custos financeiros em que os usuários finais podem acessar seu app da Web. O formato dele é backend-id--project-id.us-central1.hosted.app.

Para conferir o URL do seu app da Web, verifique o console do Firebase ou execute o seguinte comando da CLI:

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID}

Etapa 3: acionar um lançamento enviando uma mudança

Depois que o back-end for criado e você tiver um URL ativo, será possível acionar o lançamento de uma nova versão do seu web app sempre que enviar mudanças para a ramificação ativa do repositório do GitHub. Para fazer um teste da configuração do App Hosting:

  1. No GitHub, envie uma mudança para o branch ativo do web app.
  2. Abra a guia App Hosting no console do Firebase e selecione Ver painel para seu back-end. A lista de tabelas mostra o commit específico associado ao lançamento acionado pela sua mudança.

Próximas etapas