Com um app Next.js ou Angular (Next.js versão 13 ou mais recente ou Angular 17.2 ou mais recente) em um repositório do GitHub, começar a usar o App Hosting pode ser tão simples quanto criar um back-end App Hosting e iniciar um lançamento com um push para o branch ativo. 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:
-
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.
-
-
Se solicitado, leia e aceite os Termos do Firebase.
-
Clique em Continuar.
-
(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.
-
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, inicie 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 o App Hosting cria para desenvolver 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:
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.
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 dele é 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, será possível 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:
- No GitHub, faça o push de uma mudança para a ramificação ativa do app da Web.
- 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
- Aprofunde seus conhecimentos: faça um codelab do Firebase que integra um app hospedado com o Firebase Authentication e os recursos de IA do Google: Next.js | Angular
- Conectar um domínio personalizado.
- Configure seu back-end.
- Monitorar lançamentos, uso do site e registros.