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, os primeiros passos com o App Hosting podem ser tão simples quanto criar um back-end 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 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 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ê criar uma nova conta, selecione seu local do relatório do Analytics e aceite as configurações de compartilhamento de dados e os termos do Google Analytics no 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 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 código de amostra 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 a App Hosting cria para criar e executar seu app da Web. É possível criar e listar back-ends App Hosting usando o console Firebase ou a CLI Firebase.

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 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 é /)

    É onde o arquivo package.json geralmente 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

    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.

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 enviando 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, envie uma alteração por push para a ramificação ativa 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