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 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.

Este guia descreve como configurar App Hosting no console 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 será reimplantado sempre que você confirmar uma nova mudança na ramificação main do repositório do GitHub.

Embora este guia se concentre no fluxo recomendado do Firebase console, 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

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

Etapa 2: criar um back-end App Hosting

  1. No console do Firebase, acesse Hosting 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 App Hosting.

Uma 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).
  • Conecte-se ao GitHub. Escolha o repositório que você acabou de criar bifurcando o repositório firebase-framework-tools.
  • Defina o diretório raiz do app como um dos seguintes:
  • Defina a ramificação ativa como principal.
  • Ative os lançamentos automáticos (eles são ativados por padrão).
  • Atribua um nome ao back-end.
  • Crie um app da Web do Firebase.

Selecione Concluir e implantar.

Etapa 3: conferir o app implantado

Ao criar 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 conferir seu 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, poderá 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 App Hosting configuração:

  1. Na sua bifurcação do repositório de demonstração do GitHub, acesse a origem da página inicial do app de demonstração, faça qualquer edição reconhecível 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 Firebase console, monitore App Hosting à medida que a nova mudança é lançada na produção. Quando o lançamento for concluído, você poderá conferir a mudança na página inicial do app.

Próximas etapas