Introdução à hospedagem de apps

Com um app Next.js ou Angular (versão 13 ou mais recente do Next.js ou Angular 17.2 ou mais recente) em um repositório do GitHub, começar a usar o App Hosting pode ser simples como criar um back-end App Hosting e iniciar um a implantação com um push na ramificação ativa. Se você não tiver um aplicativo, use um dos nossos aplicativos de exemplo para passar pelas etapas descritas neste guia.

Antes de começar

Antes de configurar o Firebase App Hosting, você precisa criar um bucket do Firebase (caso ainda não tenha um) e atualize 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, insira o nome do projeto 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 Google Analytics para seu projeto, o que permite para ter uma experiência ideal com qualquer um dos seguintes produtos do Firebase:

    Selecione um Conta do Google Analytics ou criar uma nova conta.

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

  5. Clique em Criar projeto (ou Adicionar Firebase, se você estiver usando uma projeto Google Cloud atual).

O Firebase provisiona recursos automaticamente para seu projeto. Quando o processo for concluído, você será direcionado para a página de visão geral da sua conta projeto no console 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 tente 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, criar um novo repositório do GitHub e enviar o exemplo de código recém-inicializado a ela.

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. É possível criar e listar App Hosting back-ends usando o console do Firebase ou CLI Firebase.

Console do Firebase: no menu Build, selecione App Hosting e Comece a usar o serviço.

CLI: (versão 3.9 ou mais recente) para criar um back-end, execute o comando a seguir da raiz do diretório do seu projeto local, informando aos project ID como argumento (para visualização, somente a região us-central1 tem suporte):

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 para Configurar um Conexão do GitHub, e defina 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 seu repositório GitHub que é implantada no seu URL ativo. Muitas vezes, é a ramificação em que as ramificações ou o desenvolvimento de recursos as ramificações são mescladas.

  • Aceitar ou recusar lançamentos automáticos

    Os lançamentos automáticos são ativados por padrão. Na conclusão da criação do back-end, é possível escolher se o app será implantado 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 possam acessar seu app da Web. 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 a CLI a seguir comando:

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, será possível acionar o lançamento de uma nova versão do seu app da Web sempre que você enviar mudanças na ramificação ativa do seu repositório GitHub. Para realizar uma 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 o App Hosting guia em console Firebase e selecione Exibir painel para seu back-end. A lista da tabela exibe a confirmação específica associada ao lançamento acionada por sua mudança.

Próximas etapas