Antes de implantar em seu site ativo, você deseja visualizar e testar suas alterações. O Firebase Hosting permite visualizar e testar alterações localmente e interagir com recursos de projeto de back-end emulados. 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. Damos suporte até mesmo a uma integração do GitHub para implantar 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:
- Instale ou atualize a Firebase CLI para a versão mais recente.
- Conecte o diretório do projeto local (que contém 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 nesta página.
Etapa 1: testar localmente
Se você estiver fazendo iterações rápidas ou quiser que seu aplicativo interaja com recursos de projeto de back-end emulados, teste seu conteúdo de hospedagem e configure localmente. Ao testar localmente, o Firebase atende seu aplicativo da 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 do Hosting emulado , bem como, opcionalmente, com os recursos do projeto emulado (funções, bancos de dados e regras).
(Opcional) Por padrão, seu aplicativo hospedado localmente irá interagir com recursos de projeto reais , não emulados (funções, banco de dados, regras, etc.). Em vez disso, você pode opcionalmente conectar seu aplicativo para usar quaisquer recursos de projeto emulados que você configurou. Saiba mais: Banco de dados em tempo real | Nuvem Firestore | Funções da nuvem
Na raiz do diretório local do projeto, execute o seguinte comando:
firebase emulators:start
Abra seu aplicativo da web na URL local retornada pela CLI (geralmente
http://localhost:5000
).Para atualizar a URL local com alterações, atualize seu navegador.
Teste de outros dispositivos locais
Por padrão, os emuladores respondem apenas a solicitações de localhost
. Isso significa que você poderá acessar o conteúdo hospedado no navegador da Web do seu computador, mas não em outros dispositivos da sua rede. Se você quiser testar de outros dispositivos locais, configure seu firebase.json
da seguinte forma:
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
Ao usar o firebase serve
, seu aplicativo interage com um back-end emulado para seu conteúdo e configuração de hospedagem (e, opcionalmente, funções), mas seu back-end real para todos os outros recursos do projeto.
Na raiz do diretório local do projeto, execute o seguinte comando:
firebase serve --only hosting
Abra seu aplicativo da web na URL local retornada pela CLI (geralmente
http://localhost:5000
).Para atualizar a URL local com alterações, atualize seu navegador.
Use o firebase serve
para testar de outros dispositivos locais
Por padrão, o firebase serve
responde apenas a solicitações de localhost
. Isso significa que você poderá acessar o conteúdo hospedado no navegador da Web do seu computador, mas não em outros dispositivos da sua rede. Se você quiser testar de outros dispositivos locais, use o sinalizador --host
, assim:
firebase serve --host 0.0.0.0 // accepts requests to any host
Etapa 2: visualizar e compartilhar
Se você deseja que outras pessoas visualizem 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 exibe seu aplicativo da web em um "URL de visualização", que é um URL temporário e compartilhável. Ao usar um URL de visualização, seu aplicativo da web interage com seu back-end real para todos os recursos do projeto.
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.
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
). Esse ID será usado para construir o URL de visualização associado ao canal de visualização.Abra seu aplicativo da web no URL de visualização retornado pela CLI. Será mais ou menos assim:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
Para atualizar sua 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 GitHub Action .
Etapa 3: implantar ao vivo
Quando estiver pronto para compartilhar suas alterações com o mundo, implante seu conteúdo de hospedagem e configure seu canal ao vivo. O Firebase oferece algumas opções diferentes para esta etapa, dependendo do seu caso de uso (consulte as opções abaixo).
Opção 1: clonar de um canal de visualização para seu canal ao vivo
Essa opção fornece a confiança de que você está implantando em seu canal ao vivo o conteúdo exato e a configuração que você testou em um canal de visualização. Saiba mais sobre clonagem de versões .
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 Firebase.
- Você pode especificar sites que estão no mesmo projeto do Firebase ou até mesmo em diferentes projetos 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 o ID do canal.
- Para um canal ao vivo, use
Visualize suas alterações (próxima etapa).
Opção 2: Implante de seu diretório de projeto local para seu canal ao vivo
Esta opção oferece 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.
Na raiz do diretório local do projeto, execute o seguinte comando:
firebase deploy --only hosting
Visualize 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 de hospedagem e configuram os 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
(comoPROJECT_ID .web.app
)
SITE_ID .firebaseapp.com
(comoPROJECT_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 um deploy. Esse comentário será exibido com as outras informações de implantação no painel de hospedagem no Firebase console. 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 pode notificar os administradores sobre novas implantações de conteúdo do site. Consulte a documentação da Firebase CLI para obter mais detalhes.
Cache de conteúdo implantado
Quando uma solicitação de conteúdo estático é feita, o Firebase Hosting armazena automaticamente o conteúdo em cache na CDN. Se você reimplantar o conteúdo do seu site, o Firebase limpa automaticamente todo o seu conteúdo estático em cache na CDN para que novas solicitações recebam seu 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
Integre-se ao GitHub e itere seu conteúdo visualizado configurando a GitHub Action .
Saiba mais sobre outros recursos de hospedagem:
Dê uma olhada na documentação completa da Firebase CLI .
Prepare-se para lançar seu aplicativo:
- Configure alertas de orçamento para seu projeto no Console do Google Cloud.
- Monitore o painel de uso e cobrança no console do Firebase para obter uma visão geral do uso do seu projeto em vários serviços do Firebase. Você também pode visitar o painel de uso de hospedagem para obter informações de uso mais detalhadas.
- Revise a lista de verificação de lançamento do Firebase .