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:
-
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ê 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.
-
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:
- No GitHub, envie uma alteração por push para a ramificação ativa do app da Web.
- 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
- Saiba mais: consulte um codelab do Firebase que integra um app hospedado com o Firebase Authentication e os recursos da IA do Google: Next.js | Angular
- Conectar um domínio personalizado.
- Configure seu back-end.
- Monitore lançamentos, uso do site e registros.