Ir para o console

Primeiros passos com o Firebase Hosting

O Firebase Hosting oferece uma maneira rápida, segura e confiável de hospedar os recursos estáticos do seu app, como HTML, CSS, JavaScript e arquivos de mídia, entre outros, assim como exibir conteúdo dinâmico e hospedar microsserviços.

Nossa hospedagem em nível de produção tem como base uma rede de fornecimento de conteúdo (CDN, na sigla em inglês) global. Por padrão, o Hosting exibe o conteúdo por SSL e pode ser usado com seu próprio domínio personalizado ou nos subdomínios gratuitos do seu projeto em web.app e firebaseapp.com.

Antes de começar

Antes de configurar o Firebase Hosting, é preciso criar um projeto do Firebase.

Etapa 1: instalar a Firebase CLI

A Firebase CLI (interface de linha de comando) requer o Node.js e o gerenciador de pacotes de nós (npm) (ambos em inglês).

  1. Instale o Node.js usando uma das seguintes opções. O npm é instalado automaticamente junto com o Node.js.

    • Para Mac/Linux, use nvm (o Node Version Manager).
    • No Windows, use nvm-windows.
  2. Instale a Firebase CLI por meio do npm executando o código a seguir:

    npm install -g firebase-tools

    Essa ação instala o comando firebase disponível globalmente. Se quiser atualizar a Firebase CLI para a versão mais recente, execute novamente o mesmo comando npm install.

    (em inglês)
  3. Faça login no Firebase por meio da sua Conta do Google. Para isso, execute o código a seguir:

    firebase login

    Esse comando conecta sua máquina local ao Firebase e concede acesso aos seus projetos.

  4. Para testar se a autenticação funcionou e listar todos os seus projetos do Firebase, execute o seguinte comando:

    firebase list

    A lista exibida precisa conter os mesmos projetos que aparecem no Console do Firebase.

Atualizar para a versão mais recente da CLI

Execute o comando de instalação da Firebase CLI novamente para verificar se você está usando a versão mais recente:

npm install -g firebase-tools

Etapa 2: inicializar seu projeto

Execute o seguinte comando na raiz do diretório do projeto local para conectá-lo ao do Firebase:

firebase init

Durante a inicialização do projeto, siga estas etapas na Firebase CLI:

  1. Selecione para configurar Hosting.

    Se quiser configurar outros produtos do Firebase no seu projeto, consulte a documentação deles para ver as informações desse processo. Lembre-se de que é possível executar o comando firebase init posteriormente para configurar outros produtos do Firebase.

  2. Selecione um projeto do Firebase para conectar ao diretório do seu projeto local.

    O projeto do Firebase selecionado é o "padrão" para o diretório do projeto local. Se você quiser conectar outros projetos do Firebase a esse diretório, configure aliases de projeto.

  3. Especifique um diretório para usar como diretório raiz público.

    Esse diretório contém todos os seus arquivos estáticos exibidos publicamente, incluindo seu arquivo index.html e qualquer outro recurso que você queira implantar no Firebase Hosting.

    • O padrão para o diretório raiz público é chamado public.

      • É possível especificar seu diretório raiz público agora ou mais tarde no seu arquivo de configuração firebase.json.

      • Se selecionar o padrão e ainda não tiver um diretório chamado public, o Firebase o criará para você.

    • Se ainda não tiver um arquivo index.html ou 404.html válido no diretório raiz público, o Firebase os criará para você.

  4. Escolha uma configuração para seu site.

    Se preferir criar um app de uma página, o Firebase adicionará configurações de substituição automaticamente para você.

No final da inicialização, o Firebase cria e adiciona automaticamente dois arquivos à raiz do diretório local do app:

Etapa 3: implantar no seu site

Para implantar no seu site, execute o seguinte comando a partir da raiz do diretório local do seu projeto:

firebase deploy

Este comando implanta uma versão nos sites do Hosting padrão do projeto do Firebase:

  • projectID.web.app
  • projectID.firebaseapp.com

Saiba mais sobre implantações e como testar localmente seu site.

Próximas etapas

Seu app está pronto para ser compartilhado com o mundo. Aprenda também a realizar as seguintes ações:

Além disso, veja a documentação completa da Firebase CLI.