Introdução à hospedagem de apps

Com um app Next.js ou Angular (Next.js versões 13+ ou Angular 17.2+) em um repositório do GitHub, começar a usar o App Hosting pode ser tão simples quanto criar um back-end do App Hosting e iniciar um lançamento com um push para a 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 novo projeto, digite o nome dele. 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 quando usar qualquer um destes produtos do Firebase:

    Selecione uma conta do Google Analytics ou crie uma nova.

    Se você decidir criar uma nova conta, selecione seu local de relatórios do Analytics e aceite as configurações de compartilhamento de dados e os termos do Google Analytics relacionados ao seu projeto.

  5. Clique em Criar projeto (ou Adicionar Firebase, se você estiver usando um projeto do 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 tiver um app da Web em um repositório do GitHub ou se preferir tentar 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 código de amostra recém-inicializado para ele.

Etapa 1: criar um back-end do App Hosting

Um back-end do App Hosting é o conjunto de recursos gerenciados que o App Hosting cria para criar e executar seu app da Web. É possível criar e listar back-ends do App Hosting usando o Console do Firebase ou a CLI do Firebase.

Console do Firebase: no menu Build, selecione App Hosting e Primeiros passos.

CLI: (versão 3.9 ou mais recente) para criar um back-end, execute o seguinte comando na raiz do diretório do projeto local, fornecendo o ID do projeto como um argumento (para visualização, somente a região us-central1 é compatível):

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

Para o console ou a CLI, siga as instruções para atribuir um nome ao back-end, configurar uma conexão do GitHub e definir estas configurações básicas de implantação:

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

    Geralmente, é onde o arquivo package.json está localizado.

  • Definir a ramificação ativa

    Essa é a ramificação do repositório do GitHub que é implantada no 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. No momento da criação do back-end, você pode optar por implantar o app no App Hosting imediatamente.

Etapa 2: visualizar 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 visitar seu app da Web. O formato é backend-id--project-id.us-central1.hosted.app.

Para ver 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} --location us-central1

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

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

  1. No GitHub, envie uma alteração por push para a ramificação ativa do app da Web.
  2. Abra a guia "Hospedagem de apps" no Console do Firebase e selecione Visualizar painel para seu back-end. A lista da tabela exibe a confirmação específica associada ao lançamento acionado pela sua alteração.

Próximas etapas