Teste seu aplicativo da web localmente, compartilhe as alterações com outras pessoas e, em seguida, implante ao vivo

Antes de implantar em seu site ativo, você desejará visualizar e testar suas alterações. O Firebase Hosting permite visualizar e testar alterações localmente e interagir com recursos emulados de projetos de back-end. Se você precisar que seus colegas de equipe visualizem e testem suas alterações, o Hosting pode criar URLs de visualização temporários e compartilháveis ​​para seu site. Oferecemos até suporte para integração com GitHub para implantação a partir de uma solicitação pull.

Antes de você começar

Conclua as etapas listadas na página Introdução ao Hosting , especificamente as seguintes tarefas:

  1. Instale ou atualize a CLI do Firebase para a versão mais recente.
  2. Conecte o diretório do projeto local (contendo o conteúdo do seu aplicativo) ao seu projeto do Firebase.

Opcionalmente, você pode implantar o conteúdo e a configuração do Hosting do seu aplicativo, mas isso não é um pré-requisito para as etapas desta página.

Etapa 1: teste localmente

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.

O Hosting faz parte do Firebase Local Emulator Suite , que permite que seu aplicativo interaja com o conteúdo e a configuração emulados do Hosting e, opcionalmente, com os recursos emulados do projeto (funções, bancos de dados e regras).

  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"
    }
  }

Etapa 2: visualizar e compartilhar

Se quiser que outras pessoas vejam as alterações em seu aplicativo da web antes de colocá-lo no ar, você pode usar canais de visualização.

Depois de implantar em um canal de visualização, o Firebase veicula seu aplicativo Web em um "URL de visualização", que é um URL temporário e compartilhável. Ao usar um URL de visualização, seu aplicativo Web interage com seu back-end real para todos os recursos do projeto (com exceção de quaisquer funções "fixadas" em sua configuração de reescrita ).

Observe que, embora os URLs de visualização sejam difíceis de adivinhar (pois contêm um hash aleatório), eles são públicos. Assim, qualquer pessoa que conheça a URL pode acessá-la.

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

    firebase hosting:channel:deploy CHANNEL_ID

    Substitua CHANNEL_ID por uma string sem espaços (por exemplo, feature_mission-2-mars ). Este ID será usado para construir o URL de visualização associado ao canal de visualização.

  2. Abra seu aplicativo Web na URL de visualização retornada pela CLI. Vai parecer algo assim: PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

  3. Para atualizar seu URL de visualização com alterações, execute o mesmo comando novamente. Certifique-se de especificar o mesmo CHANNEL_ID no comando.

Saiba mais sobre como gerenciar canais de visualização , incluindo como definir a expiração de um canal.

O Firebase Hosting oferece suporte a uma ação do GitHub que cria e atualiza automaticamente um URL de visualização quando você confirma alterações em uma solicitação pull. Aprenda como configurar e usar esta ação do GitHub .

Etapa 3: implantar ao vivo

Quando estiver pronto para compartilhar suas mudanças com o mundo, implante seu conteúdo e configuração do Hosting em seu canal ao vivo. O Firebase oferece algumas opções diferentes para esta etapa, dependendo do seu caso de uso (veja as opções abaixo).

Opção 1: clonar de um canal de visualização para seu canal ao vivo

Esta opção fornece a certeza de que você está implantando em seu canal ao vivo o conteúdo e a configuração exatos que você testou em um canal de visualização. Saiba mais sobre clonagem de versões .

  1. Em qualquer diretório, execute o seguinte comando:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    Substitua cada espaço reservado pelo seguinte:

    • SOURCE_SITE_ID e TARGET_SITE_ID : Estes são os IDs dos sites de hospedagem que contêm os canais.

      • Para seu site de hospedagem padrão, use o ID do projeto do Firebase.
      • Você pode especificar sites que estejam no mesmo projeto do Firebase ou até mesmo em projetos diferentes do Firebase.

    • SOURCE_CHANNEL_ID : este é o identificador do canal que está servindo atualmente a versão que você deseja implantar em seu canal ao vivo.

      • Para um canal ao vivo, use live como ID do canal.

  2. Veja suas alterações (próxima etapa).

Opção 2: implantar do diretório local do projeto em seu canal ativo

Esta opção oferece flexibilidade para ajustar configurações específicas do canal ao vivo ou para implantar mesmo se você não tiver usado um canal de visualização.

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

    firebase deploy --only hosting

  2. Veja suas alterações (próxima etapa).

Etapa 4: visualize suas alterações em seu site ativo

Ambas as opções acima implantam seu conteúdo e configuração de hospedagem nos seguintes sites:

  • Os subdomínios provisionados pelo Firebase para seu site Hosting padrão e quaisquer sites Hosting adicionais:
    SITE_ID .web.app (como PROJECT_ID .web.app )
    SITE_ID .firebaseapp.com (como PROJECT_ID .firebaseapp.com )

  • Quaisquer domínios personalizados que você conectou ao(s) seu(s) site(s) de hospedagem

Para restringir a implantação a um site de hospedagem específico, especifique um destino de implantação em seu comando CLI.

Outras atividades e informações de implantação

Adicione um comentário para a implantação

Opcionalmente, você pode adicionar um comentário a uma implantação. Este comentário será exibido com outras informações de implantação no painel do Hosting no console do Firebase. Por exemplo:

firebase deploy --only hosting -m "Deploying the best new feature ever."

Adicionar tarefas com script de pré-implantação e pós-implantação

Opcionalmente, você pode conectar scripts de shell ao comando firebase deploy para executar tarefas de pré-implantação ou pós-implantação. Por exemplo, um gancho pós-implantação poderia notificar os administradores sobre implantações de novo conteúdo do site. Consulte a documentação da Firebase CLI para obter mais detalhes.

Armazenando conteúdo implantado em cache

Quando é feita uma solicitação de conteúdo estático , o Firebase Hosting armazena automaticamente o conteúdo em cache no CDN. Se você reimplantar o conteúdo do seu site, o Firebase limpará automaticamente todo o conteúdo estático armazenado em cache na CDN para que novas solicitações recebam o novo conteúdo.

Observe que você pode configurar o cache de conteúdo dinâmico .

Servindo por HTTPS

Certifique-se de que todos os recursos externos que não estão hospedados no Firebase Hosting sejam carregados por SSL (HTTPS), incluindo quaisquer scripts externos. A maioria dos navegadores não permite que os usuários carreguem “conteúdo misto” (tráfego SSL e não SSL).

Próximos passos