Introdução à hospedagem de apps

Com um app Next.js ou Angular (Next.js versão 13.5.x+ ou Angular 18.2.x+) em um repositório do GitHub, começar a usar App Hosting pode ser 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 exemplos para seguir as etapas descritas neste guia.

Antes de começar

Antes de configurar o Firebase App Hosting, é necessário criar um projeto do Firebase (se você ainda não tiver um) e fazer 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 app da Web

Se você ainda não tem um app da Web em um repositório do GitHub ou se preferir testar o fluxo com um app de exemplo, comece inicializando um dos nossos exemplos, para Next.js ou Angular:

npm init @apphosting

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

Etapa 1: criar um back-end App Hosting

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

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

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 o projectID e a região preferida como argumentos:

firebase apphosting:backends:create --project PROJECT_ID --location us-central1

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 (padrão: /)

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

  • Definir a ramificação ativa

    É o branch do 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

    As implantações automáticas são ativadas por padrão. Após a conclusão da criação do back-end, é possível escolher se o app será implantado no App Hosting imediatamente.

  • Atribua um nome ao back-end.

Etapa 2: conferir o app implantado

Quando você cria um back-end, o Firebase oferece um subdomínio sem custo financeiro em que os usuários finais podem acessar seu app da Web. O formato é backend-id--project-id.us-central1.hosted.app.

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

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1

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

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

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

Próximas etapas