Introdução à hospedagem de apps

Com um app Next.js ou Angular (Next.js versões 13.5.x+ ou Angular 18.2.x+) 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 um novo commit for feito em um repositório do GitHub. No final desse fluxo, você terá um exemplo de app Next.js ou Angular ativo que é reimplantado sempre que você confirma 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 com o GitHub.

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

Acesse https://github.com/firebase/apphosting-adapters e selecione Fork.

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ê acabou de criar bifurcando o repositório apphosting-adapters.
  • Defina o diretório raiz do app como um dos seguintes:
  • Defina a ramificação ativa como main.
  • 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 custo financeiro 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 app da Web 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 a 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