Testar apps da Web localmente com o emulador do Firebase App Hosting

É possível realizar testes locais do app antes da implantação do App Hosting usando o emulador App Hosting, que faz parte do Pacote de emuladores locais do Firebase.

Antes de usar o emulador App Hosting, entenda o fluxo de trabalho geral do Local Emulator Suite do Firebase Local e instale e configure o Local Emulator Suite local e revise os comandos da CLI.

Neste tópico, pressupomos que você já conhece o App Hosting. Se necessário, leia a introdução do App Hosting e outros materiais para entender como o App Hosting funciona.

O que posso fazer com o emulador de App Hosting?

O emulador do App Hosting permite testar e refinar seus aplicativos da Web localmente, replicando de perto um ambiente de produção. Isso pode simplificar seu processo de desenvolvimento e melhorar a qualidade dos apps da Web criados com o Firebase e implantados no App Hosting.

O emulador App Hosting:

  1. Permite executar o app da Web localmente, com variáveis de ambiente definidas em arquivos de configuração apphosting.yaml
  2. Pode exportar os segredos salvos em diferentes ambientes App Hosting, permitindo simular aplicativos em diferentes ambientes.
  3. Pode ser usado com outros emuladores do Firebase. Se você estiver usando o Firestore, o Auth ou qualquer outro emulador, o Local Emulator Suite garante que esses emuladores sejam iniciados antes do emulador App Hosting.

Configurar o emulador

Para começar, instale e inicialize o Local Emulator Suite conforme descrito em Instalar, configurar e integrar o Pacote de emuladores locais. Além de outros emuladores do Firebase que você quer configurar, selecione App Hosting Emulator. A CLI solicita alguns valores do emulador App Hosting, incluindo:

  • O diretório raiz do app em relação ao projeto. Isso é importante se você estiver usando monorepos com App Hosting.
  • Se você quer exportar segredos para ambientes específicos.
firebase init emulators
=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ App Hosting Emulator
 ◯ Firestore Emulator
 ◯ Database Emulator
 ◯ Hosting Emulator
 ◯ Pub/Sub Emulator
 ◯ Storage Emulator
 ◯ Eventarc Emulator
(Move up and down to reveal more choices)

? Specify your app's root directory relative to your project (.)

? What configs would you like to export? (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ❯◯ Secrets

? Which environment would you like to export secrets from Secret Manager for?:
  ◯ base (apphosting.yaml)
 ❯◯ staging (apphosting.yaml + apphosting.staging.yaml)
  ◯ preview (apphosting.yaml + apphosting.preview.yaml)

i Wrote Secrets as environment variables to apphosting.local.yaml.
i apphosting.local.yaml has been automatically added to your .gitignore.

Todos os valores fornecidos neste fluxo de configuração são usados para atualizar a configuração do emulador App Hosting em firebase.json. Também é possível configurar o emulador do App Hosting atualizando firebase.json diretamente. O esquema do emulador do Hosting é:

{
  ...
  "emulators": {
    "apphosting": {
      "startCommandOverride": <command> [optional]
      "rootDirectory": <path> [optional]
      }
    }
  }
  • O startCommandOverride é gerado e definido automaticamente quando o emulador é inicializado. Se não for fornecido, o emulador vai detectar e executar o comando de desenvolvimento do gerenciador de pacotes.
  • rootDirectory é usado para oferecer suporte a configurações de projetos monorepo. Se o app da Web estiver em um subdiretório, você precisará fornecer o caminho desse diretório relativo à raiz (o local de firebase.json).

Gerenciar emulação

A inicialização do emulador cria um arquivo apphosting.local.yaml no diretório raiz do app. Esse arquivo de configuração tem o mesmo esquema do arquivo apphosting.yaml usado na produção, mas é destinado exclusivamente ao desenvolvimento local. Por padrão, o emulador lê a configuração do arquivo apphosting.yaml, mas se um arquivo apphosting.local.yaml estiver presente, as configurações nesse arquivo serão priorizadas e terão precedência.

Exportar segredos para simular diferentes ambientes localmente

Se você estiver trabalhando com vários ambientes e quiser simular diferentes ambientes de app localmente, talvez seja necessário usar os segredos dos ambientes correspondentes. É possível exportar segredos para um ambiente específico usando o comando apphosting:config:export da CLI. Como alternativa, conforme mostrado em Configurar o emulador, é possível importar segredos durante a inicialização do emulador.

Esse comando exige que você selecione entre os ambientes App Hosting disponíveis do projeto. A configuração App Hosting específica do ambiente (por exemplo, "apphosting.staging.yaml") e a configuração App Hosting base ("apphosting.yaml") são mescladas, e a configuração específica do ambiente tem precedência. Se segredos com o mesmo nome existirem nas duas configurações, o segredo da configuração específica do ambiente será usado.

Por exemplo, para exportar segredos para o emulador de um ambiente de preparo:

firebase apphosting:config:export --project <your firebase project Id>

? What configs would you like to export? (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ❯◯ Secrets

? Which environment would you like to export secrets from Secret Manager for?:
  ◯ base (apphosting.yaml)
 ❯◯ staging (apphosting.yaml + apphosting.staging.yaml)
  ◯ preview (apphosting.yaml + apphosting.preview.yaml)
i Wrote Secrets as environment variables to apphosting.local.yaml.
i apphosting.local.yaml has been automatically added to your .gitignore.

O arquivo apphosting.local.yaml é atualizado (ou criado, se não existir) com os segredos exportados como variáveis de ambiente. Como o arquivo agora contém informações sensíveis em texto simples, ele será adicionado automaticamente ao arquivo .gitignore para evitar que seja confirmado acidentalmente no repositório de código-fonte.

Executar o emulador

firebase emulators:start

Isso vai iniciar todos os emuladores definidos no arquivo firebase.json, incluindo o emulador App Hosting.