Introdução à hospedagem de apps

Com um app Next.js ou Angular (versões 13.5.x+ do Next.js ou 18.2.x+ do Angular) 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, em seguida, iniciar um lançamento com um push para sua ramificação ativa. Se você não tiver um app, use um dos nossos apps de exemplo para seguir as etapas descritas neste guia.

Para receber assistência de IA, copie o comando abaixo no seu agente de programação de IA (como Antigravity, Claude Code, Codex e Cursor). Você pode personalizar o comando e interagir com o agente. Acesse Habilidades do agente do Firebase para informações detalhadas sobre a instalação. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

Neste guia, descrevemos como configurar o App Hosting no console do Firebase para implantar automaticamente sempre que uma nova confirmação for feita em um repositório do GitHub. No final desse fluxo, você terá um app de exemplo do Next.js ou do Angular ativo que é reimplantado sempre que você confirmar uma nova mudança na ramificação main do seu repositório do GitHub.

Embora este guia se concentre no fluxo recomendado do console do Firebase, há outras maneiras de implantar, incluindo o uso da CLI do Firebase para implantar código local sem uma conexão do GitHub.

Etapa 1: bifurcar o repositório de demonstração

Se você já tiver um aplicativo Next.js ou Angular em um repositório do GitHub, pule esta etapa e prossiga para a Etapa 2: criar um back-end do App Hosting. Não é necessário bifurcar ou instalar o repositório apphosting-adapters para implantar seu próprio app.

Se você não tiver um aplicativo e quiser implantar um app de exemplo, acesse https://github.com/firebase/apphosting-adapters e selecione Fork. Além das ferramentas do adaptador de framework, esse repositório inclui os modelos iniciais oficiais do Next.js e do Angular no diretório /starters.

Etapa 2: criar um back-end do App Hosting

  1. No console do Firebase, acesse Hospedagem e sem servidor > App Hosting.

  2. Clique em Começar.

  3. Se solicitado, faça upgrade para o plano de preços Blaze de pagamento por uso para usar o App Hosting.

Captura de tela da configuração do back-end do App Hosting.

Siga as instruções para concluir estas etapas:

  • Escolha uma região principal (geralmente a mais próxima dos seus usuários).

  • Conectar-se ao GitHub. Escolha o repositório que você criou ao bifurcar o repositório apphosting-adapters ou escolha o repositório do aplicativo atual.

  • Defina o diretório raiz do app:

    • Se você implantar seu próprio aplicativo, especifique o diretório raiz dele (o padrão é /). Esse diretório geralmente é onde o arquivo package.json está localizado.

    • Se você usar o repositório de demonstração apphosting-adapters, defina o diretório raiz do app como um dos seguintes caminhos:

    • /starters/nextjs/basic

    • /starters/angular/basic

  • Defina a ramificação ativa como principal.

  • Ativar os lançamentos automáticos (os lançamentos automáticos são ativados por padrão).

  • Atribua um nome ao back-end.

  • Selecione o ambiente de execução. Por padrão, a versão recomendada mais recente do Node.js é pré-selecionada para você.

  • Criar um app da Web do Firebase.

Selecione Concluir e implantar.

Etapa 3: conferir o app implantado

Quando você cria um back-end, o Firebase oferece um subdomínio sem custos financeiros em que os usuários finais podem acessar seu app da Web. O formato é backend-id--project-id.us-central1.hosted.app.

Na linha Informações do back-end no painel do back-end, selecione o link para o back-end ativo para ver o novo site:

Captura de tela da linha de informações do back-end com o link do app ativo em destaque.

Etapa 4: 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 web app sempre que enviar mudanças para a ramificação ativa do seu repositório do GitHub. Para testar a configuração do App Hosting:

  1. Na bifurcação do repositório de demonstração do GitHub, acesse a origem da página inicial do app de demonstração, faça as edições que quiser e envie a mudança para a ramificação principal. Para encontrar sua página inicial:

    • Next.js: /starters/nextjs/basic/src/app/page.tsx

    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. No console do Firebase, monitore App Hosting enquanto sua nova alteração é lançada na produção. Quando o lançamento for concluído, você poderá ver a mudança na página inicial do app.

Próximas etapas