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:
- Instale ou atualize a CLI do Firebase para a versão mais recente.
- 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).
(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
Na raiz do diretório local do projeto, execute o seguinte comando:
firebase emulators:start
Abra seu aplicativo Web na URL local retornada pela CLI (geralmente
http://localhost:5000
).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"
}
}
Teste localmente usando firebase serve
(não recomendado)
Ao usar firebase serve
, seu aplicativo interage com um back-end emulado para o conteúdo e configuração do Hosting (e, opcionalmente, funções), mas com 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 Web na URL local retornada pela CLI (geralmente
http://localhost:5000
).Para atualizar o URL local com alterações, atualize seu navegador.
Use firebase serve
para testar em outros dispositivos locais
Por padrão, firebase serve
responde 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 você quiser testar em 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 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.
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.Abra seu aplicativo Web na URL de visualização retornada pela CLI. Vai parecer algo assim:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
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.
Etapa 3: implantar ao vivo
Opção 1: clonar de um canal de visualização para seu canal ao vivo
Em qualquer diretório, execute o seguinte comando: firebase hosting:clone SOURCE_SITE_ID :SOURCE_CHANNEL_ID TARGET_SITE_ID :liveSubstitua 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.
Veja suas alterações (próxima etapa).
Opção 2: implantar do diretório local do projeto em seu canal ativo
Na raiz do diretório local do projeto, execute o seguinte comando: firebase deploy --only hosting Veja suas alterações (próxima etapa).
Etapa 4: visualize suas alterações em seu site ativo
Os subdomínios provisionados pelo Firebase para seu site Hosting padrão e quaisquer sites Hosting 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
Outras atividades e informações de implantação
Adicione um comentário para a implantação
firebase deploy --only hosting -m "Deploying the best new feature ever."
Adicionar tarefas com script de pré-implantação e pós-implantação
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
Servindo por HTTPS
Próximos passos
Integre-se ao GitHub e repita seu conteúdo visualizado configurando o GitHub Action . Saiba mais sobre outros recursos de hospedagem: Dê uma olhada na documentação completa do 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 faturamento no console do Firebase para ter 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 .