Catch up on everthing we announced at this year's Firebase Summit. Learn more

Teste localmente, compartilhe as alterações e implante ao vivo

Antes de implantar em seu site ativo, você desejará visualizar e testar suas alterações. O Firebase Hosting permite que você visualize e teste alterações localmente e interaja com recursos de projeto de back-end emulados. Se você precisa que seus colegas de equipe visualizem e testem suas alterações, o Hosting pode criar URLs de visualização temporária compartilháveis ​​para seu site. Nós até mesmo apoiar a integração GitHub para implantar a partir de uma solicitação de recebimento.

Antes de você começar

Conclua as etapas listadas na página Comece a hospedar , especificamente as seguintes tarefas:

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

Opcionalmente, 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.

Passo 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 do Hosting e configurar localmente. Ao testar localmente, o Firebase exibe seu aplicativo da web em um URL hospedado localmente.

Hospedagem é parte do Firebase local Emulator Suíte , que permite a sua aplicação para interagir com o seu conteúdo hospedagem emulado e configuração, bem como, opcionalmente, seus recursos do projeto emulados (funções, bancos de dados e regras).

  1. (Opcional) Por padrão, o aplicativo hospedado localmente irá interagir com real, não emulado, recursos do projeto (funções, banco de dados, regras, etc.). Você pode, em vez opcionalmente conectar seu aplicativo para usar quaisquer recursos do projeto emulados que você configurou. Saiba mais: Realtime Banco de Dados | Nuvem Firestore | Cloud Functions

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

    firebase emulators:start

  3. Abra seu aplicativo web na URL local retornado pelo CLI (normalmente 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 só respondem a pedidos de localhost . Isso significa que você poderá acessar o conteúdo hospedado do navegador do seu computador, mas não de outros dispositivos da rede. Se você gostaria de teste a partir de outros dispositivos locais, configure seu firebase.json assim:

"emulators": {
    // ...

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

Passo 2: Pré-visualizar e compartilhar

Se você quiser que outras pessoas vejam as alterações em seu aplicativo da web antes de ir ao ar, você pode usar os canais de visualização.

Depois de implantar em um canal de visualização, o Firebase disponibiliza seu aplicativo da web em um "URL de visualização", que é um URL temporário compartilhável. Ao usar um URL de visualização, os seus interage de aplicativos web com o seu backend real para todos os recursos do projeto.

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

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

    firebase hosting:channel:deploy CHANNEL_ID

    Substitua CHANNEL_ID com 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 da web no URL de visualização retornado pela CLI. Ele será parecido com este: 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 a mesma CHANNEL_ID no comando.

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

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

Passo 3: Implantar ao vivo

Quando você estiver pronto para compartilhar suas mudanças com o mundo, implante seu conteúdo de Hosting e configure 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 oferece a confiança que você está implantando em seu canal ao vivo o conteúdo exato e configuração que você testou em um canal de visualização. Saiba mais sobre a 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 o seu site de hospedagem padrão, use o seu project ID 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 : Este é o identificador para o canal que está atualmente servindo a versão que você deseja implantar para o seu canal ao vivo.

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

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

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

Esta opção fornece flexibilidade para ajustar configurações específicas para o 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 seu projeto, execute o seguinte comando:

    firebase deploy --only hosting

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

Passo 4: Para ver as mudanças em seu site ao vivo

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 de hospedagem padrão e quaisquer sites de hospedagem 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ê conectado ao seu site de hospedagem (s)

Para restringir o deploy para um site de hospedagem específico, especificar uma meta implantar em seu comando CLI.

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

Adicione um comentário para a implantação

Você pode opcionalmente adicionar um comentário a uma implantação. Este comentário será exibido com as outras informações de implantação no painel de hospedagem no console 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

Você pode opcionalmente scripts shell de conexão à firebase deploy comando para executar tarefas predeploy ou postdeploy. Por exemplo, um gancho pós-implantação pode notificar os administradores sobre novas implantações de conteúdo de site. Consulte a documentação Firebase CLI para mais detalhes.

Cache de conteúdo implantado

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

Note 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