Testar seu app da Web localmente, compartilhar mudanças com outras pessoas e implantar em sites ativos

Antes de fazer a implantação no seu site ativo, veja e teste as alterações. O Firebase Hosting permite conferir e testar mudanças localmente, além de interagir com recursos de projeto de back-end emulados. Se você precisar que seus colegas de equipe visualizem e testar as mudanças, o Hosting pode criar URLs de visualização temporários e compartilháveis para seu site. Também oferecemos suporte a uma integração do GitHub para implantar de uma solicitação de envio.

Antes de começar

Conclua as etapas listadas no Página Hosting Introdução, especificamente a as seguintes tarefas:

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

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

Etapa 1: testar localmente

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

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

  1. (Opcional) Por padrão, seu app hospedado localmente interagirá com recursos de projetos reais, e não emulados (funções, banco de dados, regras etc.). Outra opção é conectar o aplicativo para usar quaisquer recursos de projeto emulados configurados. Saiba mais: Realtime Database | Cloud Firestore | Cloud Functions

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

    firebase emulators:start

  3. Abra seu app da Web no URL local retornado pela CLI (geralmente http://localhost:5000).

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

Testar usando outros dispositivos locais

Por padrão, os emuladores respondem apenas a solicitações de localhost. Isso significa que será possível acessar seu conteúdo hospedado pelo navegador da Web no seu computador, mas não em outros dispositivos na rede. Se você quiser testar usando outros dispositivos locais, configure seu firebase.json da seguinte maneira:

"emulators": {
    // ...

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

Etapa 2: visualizar e compartilhar

Se quiser que outras pessoas vejam as alterações no seu app da Web antes da publicação, use os canais de visualização.

Depois de implantado em um canal de visualização, o Firebase exibe seu app da Web em um "URL de visualização", que é um URL temporário e compartilhável. Ao usar um URL de visualização, seu app da Web interage com o back-end real em todos os recursos do projeto, exceto em funções "fixadas" nas configuração de substituições. .

Embora os URLs de visualização sejam difíceis de adivinhar (porque contêm um hash aleatório), eles são públicos. Assim, qualquer pessoa que saiba o URL pode acessá-lo.

  1. Na raiz do diretório do projeto local, 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). Esse ID é usado para criar o URL de visualização associado ao canal.

  2. Abra seu app da Web no URL de visualização retornado pela CLI. Você verá algo mais ou menos 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. Especifique a mesma CHANNEL_ID no comando.

Saiba mais sobre como gerenciar canais de visualização, incluindo como definir a validade 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 de envio. Saiba como configurou e use esta ação do GitHub.

Etapa 3: implantar ao vivo

Quando estiver tudo pronto para compartilhar suas alterações com o mundo, implante o conteúdo e a configuração do Hosting no canal ativo. Dependendo do seu caso de uso, o Firebase oferece algumas opções diferentes para essa etapa. Veja as opções abaixo.

Opção 1: copiar de um canal de visualização para o canal ativo

Com essa opção, não há dúvidas de que você está implantando no canal ativo o conteúdo e a configuração exatos que você testou em um canal de visualização. Saiba mais sobre como clonar 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 marcador de posição pelo seguinte:

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

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

    • SOURCE_CHANNEL_ID: identificador do canal que está exibindo a versão a ser implantada no canal ativo.

      • Para um canal ativo, use live como o ID.

  2. Analise as alterações (próxima etapa).

Opção 2: implantar a partir do diretório de projetos local no canal ao vivo

Ela oferece a flexibilidade para ajustar as configurações específicas do canal ativo ou para implantar mesmo que você não tenha usado um canal de visualização.

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

    firebase deploy --only hosting

  2. Analise as alterações (próxima etapa).

.

Etapa 4: visualizar as alterações no seu site ativo

As duas opções acima implantam o conteúdo e a configuração do Hosting no seguintes sites:

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

  • Quaisquer domínios personalizados que você tenha conectado aos seus sites Hosting

Para restringir a implantação a um site específico do Hosting, especifique um destino de implantação no comando da CLI.

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

Adicionar um comentário à implantação

Como alternativa, é possível adicionar um comentário a uma implantação. Este comentário será exibido com o botão outras informações de implantação Painel do Hosting no console Firebase. Exemplo:

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

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

Como alternativa, é possível conectar scripts de shell ao comando firebase deploy para realizar tarefas de pré ou pós-implantação. Por exemplo, um hook de pós-implantação poderia notificar os administradores sobre novas implantações de conteúdo no site. Consulte o Documentação da CLI Firebase para mais detalhes.

Armazenar o conteúdo implantado em cache

Quando uma solicitação de conteúdo estático é feita, Firebase Hosting automaticamente armazena o conteúdo em cache na CDN. Se você reimplantar o conteúdo do site, o Firebase limpa automaticamente todo o conteúdo estático em cache na CDN para que os novos recebem seu novo conteúdo.

É possível configurar o armazenamento em cache do conteúdo dinâmico.

Exibir por HTTPS

Verifique se todos os recursos externos não hospedados Firebase Hosting são carregados por SSL (HTTPS),incluindo scripts externos. Na maioria dos navegadores, os usuários não conseguem carregar conteúdo misto, ou seja, tráfego SSL e não SSL.

Como excluir arquivos

No Firebase Hosting, a principal maneira de excluir arquivos selecionados de um site implantado é excluir os arquivos localmente e reimplantá-los.

Próximas etapas