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. Com o Firebase Hosting, você pode conferir e testar as mudanças localmente e interagir com os recursos do projeto de back-end emulado. Se você precisar que seus colegas de equipe visualizem e testem as alterações, o Hosting poderá criar URLs de visualização temporários e compartilháveis do site. Também oferecemos suporte a uma integração do GitHub para implantar de uma solicitação de envio.

Antes de começar

Siga as instruções na página de Primeiras etapas com o 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 app) ao projeto do Firebase.

Você tem a opção de 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 os recursos de back-end do projeto emulado, teste o conteúdo e a configuração do Hosting no local. Ao testar localmente, o Firebase exibe seu app da Web em um URL hospedado localmente.

Hosting faz parte do Firebase Local Emulator Suite, que permite que seu app interaja com o conteúdo e a configuração Hosting emulado e, opcionalmente, os recursos emulados do projeto (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 é compatível com 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 configurar e usar essa ação do GitHub.

Etapa 3: implantar ao vivo

Quando estiver 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 sites do Hosting que contêm os canais.

      • Para seu site padrão do Hosting, 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

Ambas as opções acima implantam seu conteúdo e configuração do Hosting nos 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 do Hosting

Para restringir a implantação a um site específico do Hosting, defina 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. Esse comentário será exibido com as outras informações de implantação no painel Hosting no console Firebase. Por 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 a documentação da CLI do Firebase para mais detalhes.

Armazenar o conteúdo implantado em cache

Quando uma solicitação de conteúdo estático é feita, o Firebase Hosting armazena em cache automaticamente o conteúdo na CDN. Se você fizer uma nova implantação do conteúdo do seu site, o Firebase limpará automaticamente todo o conteúdo estático em cache na CDN para que novas solicitações recebam 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 que não estão hospedados no Firebase Hosting estão sendo 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 forma de excluir arquivos selecionados de um site implantado é excluir os arquivos localmente e reimplantá-los em seguida.

Próximas etapas