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) global. Por padrão, o Hosting exibe seu conteúdo por SSL, e pode ser usado com seu próprio domínio personalizado ou em subdomínios livres do seu projeto no 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 (em inglês) e o gerenciador de pacotes do Node (npm) (em inglês).

  1. Instale o Node.js usando uma das seguintes opções. Por meio dessa instalação, o NPM é instalado automaticamente.

    • Para Mac/Linux, use o gerenciador de versões de nós (nvm).
    • Para o Windows, use o 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 você quiser atualizar para a versão mais recente da Firebase CLI, execute o mesmo comando npm install.

  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

Verifique se você está usando a versão mais atualizada da Firebase CLI ao executar o comando de instalação da CLI novamente:

npm install -g firebase-tools

Etapa 2: inicializar seu projeto

Para conectar seu projeto local ao do Firebase, execute o seguinte comando na raiz do diretório do projeto local:

firebase init

Durante a inicialização do projeto, siga estas etapas dos prompts da Firebase CLI:

  1. Selecione para configurar o Hosting.

    Se você quiser configurar outros produtos do Firebase no seu projeto, consulte a documentação deles para ver as informações de configuração. 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 é seu projeto "padrão" para o diretório do projeto local. Para conectar outros projetos do Firebase ao diretório do seu projeto local, 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 é conhecido como public.

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

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

    • Se você 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 você optar por criar um app de uma página, o Firebase adicionará configurações de substituição automaticamente.

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.