Protótipo e teste aplicativos da Web com o Firebase Hosting Emulator

Antes de começar a criar protótipos e testar seu aplicativo da Web com o emulador do Firebase Hosting, entenda o fluxo de trabalho geral do Firebase Local Emulator Suite e instale e configure o Local Emulator Suite e revise seus comandos CLI .

Você também deve estar familiarizado com os recursos e o fluxo de trabalho de implementação do Firebase Hosting. Comece com a introdução ao Firebase Hosting .

O que posso fazer com o emulador do Firebase Hosting?

O emulador do Firebase Hosting fornece emulação local de serviços de hospedagem de alta fidelidade, fornecendo grande parte da funcionalidade encontrada na hospedagem de produção . O emulador de hospedagem permite:

  • Crie protótipos de seus sites estáticos e aplicativos da web sem incorrer em custos de armazenamento ou acesso
  • Protótipo, teste e depure funções HTTPS antes de implantar em seu site de hospedagem
  • Teste sites e aplicativos da web em fluxos de trabalho de integração contínua e em contêineres.

Escolha um projeto do Firebase

O Firebase Local Emulator Suite emula produtos para um único projeto do Firebase.

Para selecionar o projeto a ser usado, antes de iniciar os emuladores, na CLI, execute firebase use em seu diretório de trabalho. Ou você pode passar o sinalizador --project para cada comando do emulador.

O Local Emulator Suite oferece suporte à emulação de projetos reais do Firebase e projetos de demonstração .

Tipo de projeto Características Use com emuladores
Real

Um projeto real do Firebase é aquele que você criou e configurou (provavelmente por meio do console do Firebase).

Projetos reais têm recursos ativos, como instâncias de banco de dados, intervalos de armazenamento, funções ou qualquer outro recurso configurado para esse projeto do Firebase.

Ao trabalhar com projetos reais do Firebase, você pode executar emuladores para qualquer um ou todos os produtos compatíveis.

Para quaisquer produtos que você não esteja emulando, seus aplicativos e código interagirão com o recurso ativo (instância de banco de dados, depósito de armazenamento, função, etc.).

Demonstração

Um projeto de demonstração do Firebase não tem configuração real do Firebase nem recursos ativos. Esses projetos geralmente são acessados ​​por meio de codelabs ou outros tutoriais.

Os IDs de projeto para projetos de demonstração têm o prefixo demo- .

 Ao trabalhar com projetos de demonstração do Firebase, seus aplicativos e códigos interagem apenas com emuladores . Se o seu aplicativo tentar interagir com um recurso para o qual um emulador não está em execução, esse código falhará.

Recomendamos que você use projetos de demonstração sempre que possível. Os benefícios incluem:

  • Configuração mais fácil, pois você pode executar os emuladores sem nunca criar um projeto Firebase
  • Maior segurança, pois se o seu código invocar acidentalmente recursos não emulados (de produção), não há chance de alteração de dados, utilização e cobrança
  • Melhor suporte offline, já que não há necessidade de acesso à internet para baixar a configuração do seu SDK.

Fluxo de trabalho principal de prototipagem

Se você estiver fazendo iterações rápidas ou quiser que seu aplicativo interaja com recursos de projeto de back-end emulados, você pode testar seu conteúdo e configuração do Hosting localmente. Ao testar localmente, o Firebase veicula seu aplicativo Web em um URL hospedado localmente.

  1. (Opcional) Por padrão, seu aplicativo hospedado localmente interagirá com recursos reais do projeto, não emulados (funções, banco de dados, regras etc.). Em vez disso, você pode conectar opcionalmente seu aplicativo para usar quaisquer recursos de projeto emulados que você configurou. Saiba mais: Banco de dados em tempo real | Nuvem Firestore | Funções de nuvem

  2. Na raiz do diretório local do projeto, execute o seguinte comando:

    firebase emulators:start

  3. Abra seu aplicativo Web na URL local retornada pela CLI (geralmente http://localhost:5000 ).

  4. Para atualizar o URL local com alterações, atualize seu navegador.

Teste de outros dispositivos locais

Por padrão, os emuladores respondem apenas às solicitações de localhost . Isso significa que você poderá acessar o conteúdo hospedado a partir do navegador do seu computador, mas não de outros dispositivos na sua rede. Se quiser testar em outros dispositivos locais, configure seu firebase.json assim:

"emulators": {
    // ...

    "hosting": {
      "port": 5000
      "host": "0.0.0.0"
    }
  }

Gere tokens de autenticação para fluxos de trabalho de integração contínua

Se seus fluxos de trabalho de integração contínua dependem do Firebase Hosting, você precisará fazer login usando um token para executar firebase emulators:exec . Os demais emuladores não requerem login.

Para gerar um token, execute firebase login:ci em seu ambiente local; isso não deve ser realizado a partir de um sistema CI. Siga as instruções para autenticar. Você só precisará executar esta etapa uma vez por projeto, pois o token será válido em todos os builds. O token deve ser tratado como uma senha; certifique-se de que seja mantido em segredo.

Se o seu ambiente de CI permitir que você especifique variáveis ​​de ambiente que podem ser usadas nos scripts de construção, basta criar uma variável de ambiente chamada FIREBASE_TOKEN , com o valor sendo a string do token de acesso. A CLI do Firebase selecionará automaticamente a variável de ambiente FIREBASE_TOKEN e os emuladores serão iniciados corretamente.

Como último recurso, você pode simplesmente incluir o token em seu script de construção, mas certifique-se de que partes não confiáveis ​​não tenham acesso. Para esta abordagem codificada, você pode adicionar --token "YOUR_TOKEN_STRING_HERE" ao comando firebase emulators:exec .

Qual o proximo?