Utilizando o Firebase Hosting para hospedar seu site estático gratuitamente

Olá, devs!

Hoje nós estamos trazendo um tutorial bem legal de como subir um site estático para a plataforma Firebase. O Firebase é uma plataforma de cloud do Google que possui uma variedade de funcionalidades, muitas delas gratuitas, como é o caso do Firebase Hosting.

Com o Firebase Hosting, você pode hospedar um site estático sem nenhum custo e é super simples de configurar e publicar. Além disso, você pode hospedar quantos sites quiser, é bem interessante.

Existem algumas outras opções gratuitas para hospedar seu site atualmente, como por exemplo o GitHub Pages, então se você gostar deste tutorial e quiser ver mais alguns de outras plataformas, deixa uma mensagem lá nos comentários!

Esse tipo de serviço é bem legal, pois você pode fazer alguns sites que talvez não faria se tivesse que pagar haha. Por exemplo, um site currículo ou um site institucional para uma empresa.

Lembrando que esse serviço só serve para sites estáticos, ou seja, sites que só possuem arquivos HTML, CSS, JS e assets (imagens e etc). Então não dá pra você publicar seu sistema feito em Java, Ruby, PHP etc. O Hosting não faz nenhum tipo de processamento, só fornece os arquivos do jeito que estão ao navegador do usuário.

Bom, sem mais enrolação, vamos para o tutorial!

Criando uma conta no Firebase

O Firebase é do Google, então você pode logar diretamente com sua conta do Google (gmail, youtube e etc). Para acessar/criar sua conta, basta entrar no site do Firebase e clicar em “Fazer login”. Depois de logar, clique no botão “Ir para o console” na parte superior direita (do lado da sua foto). Uma página parecida com essa vai ser exibida:

Tela inicial do console do Firebase

Com sua conta criada, podemos prosseguir para as próximas etapas.

Instalando o FirebaseCLI

Agora, é necessário ter instalado na sua máquina o FirebaseCLI, que é o cliente do Firebase que te permite fazer o upload dos arquivos do seu site. Se você já tem o NPM instalado na sua máquina, basta executar o comando npm install -g firebase-tools. Caso não tenha o NPM (e não queira instalar), então você pode seguir uma das outras opções sugeridas na documentação do Firebase para seu sistema operacional.

Para testar a instalação, execute o comando firebase --version, ele deve retornar a versão do seu CLI:

firebase --version
> 7.14.0

Logar no FirebaseCLI

Depois de instalar o CLI, você vai precisar fazer o login na sua conta do Firebase, mas dessa vez será pelo FirebaseCLI. Para isso, basta você executar o comando firebase login. Após executar, o CLI vai perguntar se você permite a coleta de informações de uso e erro do FirebaseCLI, responda com y (permitir) ou n (não permitir) e aperte enter. Então uma URL vai ser exibida no seu terminal, clique nela e seu navegador irá abrir uma página para você logar no Firebase (talvez abra a página direto, sem você precisar clicar). Escolha a conta que você quer usar pra logar e então dê permissão para o FirebaseCLI:

firebase login 
> i  Firebase optionally collects CLI usage and error reporting information...

> Allow Firebase to collect CLI usage and error reporting information? No

> Visit this URL on this device to log in:
> https://...   # clique aqui se não abrir automaticamente

> Waiting for authentication...

GIF: login no FirebaseCLI

> Waiting for authentication...

> ✔  Success! Logged in as seu_email@gmail.com

Pronto, você está logado no FirebaseCLI.

Iniciando seu projeto no Firebase

Depois de logar no CLI, o próximo passo é criar um projeto no Firebase para hospedar o seu site. Você pode criar o projeto via web ou via terminal, mas aqui vamos ensinar via terminal, já que os outros comandos vão precisar ser feitos pelo terminal, também.

Primeiramente, escolha um diretório onde seu projeto vai ficar, por exemplo:

cd /home/Lanne          # vai para o diretório "/home/Lanne"
mkdir firebase-tutorial # cria o diretório "firebase-tutorial" (dentro de "/home/Lanne")
cd firebase-tutorial    # entra no diretório recém criado "firebase-tutorial"
pwd                     # mostra em qual pasta você está atualmente
> /home/Lanne/firebase-tutorial

Agora, dentro da pasta que você acabou de criar, execute o comando firebase init. Esse comando vai iniciar um “instalador” para seu projeto de forma totalmente interativa, bem simples e completamente via terminal. O CLI vai fazer uma sequência de perguntas. Vamos a elas:

Quais features você quer configurar para esse diretório?

? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices. (Press <space> to selec
t, <a> to toggle all, <i> to invert selection)
❯◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create...
 ◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features

Aqui você pode usar as setas (cima e baixo) para navegar entre as opções e apertar a barra de espaço para selecionar as features que você quer configurar para seu projeto. Nós vamos selecionar apenas o Hosting, então use as setas para chegar até ele, e aperte a barra de espaço (a bolinha ◯ deve ficar assim ◉) e depois aperte o enter.

Configuração do projeto

=== Project Setup

First, lets associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we will just set up a default project.

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project 

Como na opção anterior, você pode usar as setas (cima e baixo) para navegar entre as opções. Nós vamos selecionar apenas a Create a new project, então use as setas para chegar nela e aperte o enter.

Escolha um identificador único para o projeto

? Please specify a unique project id (warning: cannot be modified afterward) [6-
30 characters]:
 () 

Agora, você vai precisar digitar um identificador para o projeto. Esse identificador vai aparecer na URL do site (caso você não tenha um domínio próprio) e deve ter entre 6 a 30 caracteres. Para o nosso exemplo, colocamos lanne-firabase-tuto.

 () lanne-firebase-tuto

Como você deseja chamar seu projeto?

? What would you like to call your project? (defaults to your project ID) ()

Essa opção é apenas para escolher um apelido para seu projeto. Se você deixar em branco, o apelido será o próprio identificador informado no passo anterior.

() Tutorial do Firebase Hosting by Lanne

OBS: se houver algum erro após esse passo, é bem provável que você tenha escolhido um identificador que já esteja em uso no Firebase. Para ter certeza se é esse mesmo o problema, abra o arquivo firebase-debug.log que foi criado na pasta que você está atualmente e verifique se há a mensagem “FirebaseError: HTTP Error: 409, Requested entity already exists” (Entidade requisitada já existe).

Qual diretório você quer usar como seu diretório público

? What do you want to use as your public directory? (public)

Aqui você tem que informar qual o diretório vão ficar os arquivos do seu site. Se você deixar em branco, o FirebaseCLI vai usar o diretório public (se não existir ainda, o próprio CLI vai criá-lo). Lembre-se, esse diretório vai ficar dentro do diretório que você criou lá no ínicio do tutorial. Geralmente, utilizamos o nome public mesmo, então basta apertar o enter para continuar.

Configurar como uma aplicação de página única?

? Configure as a single-page app (rewrite all urls...)?

Essa configuração serve para aplicações de página única, tais como as frameworks: React, Angular, Vue e outros. Se você não estiver usando essas frameworks, pode digitar n e depois apertar o enter.

Ufa, pronto! Sua configuração está feita :)

Lembrando que essa configuração só precisa ser feita uma vez na sua máquina, agora você já pode fazer o deploy do seu site para o Firebase.

Ah, aqui um pequeno GIF com o processo desde o ínicio, caso algo não tenha ficado claro ;)

GIF: Executando o comando firebase init

Publicando seu site

Depois de toda essa configuração, chegou a hora de publicar seu site, finally!

Quando você termina de configurar o projeto, o FirebaseCLI já cria um arquivo de exemplo para seu site, vamos publicar ele primeiro e depois nós vamos para o seu site de verdade. Para publicar, basta executar o comando firebase deploy:

# /home/Lanne/firebase-tutorial
firebase deploy

...

> ✔  Deploy complete!

> Project Console: https://console.firebase.google.com/project/lanne-firebase-tuto/overview
> Hosting URL: https://lanne-firebase-tuto.firebaseapp.com

Um GIF mostrando o processo:

GIF: Executando o comando firebase deploy

Esse comando demora alguns segundos para executar, já que ele vai fazer o upload dos seus arquivos para os servidores do Firebase. Após finalizar, o CLI vai retornar a URL do seu site, no nosso exemplo foi “https://lanne-firebase-tuto.firebaseapp.com”. Clicando nele, você vai ver a página gerada automaticamente pelo FirebaseCLI:

Página gerada automaticamente pelo FirebaseCLI

Pronto, “seu” site está no ar!

Agora vamos publicar seu site, mesmo. Apague todos os arquivos que estão dentro da pasta public, que está dentro do diretório que você criou (firebase-tutorial no caso desse exemplo). Então, copie todos os arquivos públicos do seu site estático para a pasta public e por fim, execute o comando firebase deploy. Após o processo terminar, acesse a URL retornada pelo CLI (é sempre a mesma).

Voilà, seu site está online!

Sempre que você alterar um arquivo no seu site, rode o comando firebase deploy para publicar as mudanças.

Configurando um domínio personalizado

Agora que você já tem seu site hospedado gratuitamente, seria legal ter uma URL bonitinha pra ele também, né? Já que “https://seu-projeto.firebaseapp.com/” não é muito legal…

Ainda bem que o Firebase Hosting permite você usar seus domínios! Siga os passos:

  1. Acesse o site do Firebase;
  2. Clique em “Ir para o console” (se você não tiver logado, logue antes);
  3. Selecione o seu projeto na lista de projetos;
  4. No menu, na lateral esquerda, clique na opção “Hosting”;
  5. Clique no botão “Adicionar um domínio personalizado”;
  6. Digite o seu domínio (por exemplo: meu-dominio.com.br) e clique em confirmar;
  7. Copie o valores que são mostrados na tela: Tipo, Host e Valor;
  8. Agora você precisa ir no seu provedor de DNS e adicionar o registro TXT com os valores informados;
  9. Como o DNS demora um pouco para propagar, espere algumas horas e refaço os passos do 1 ao 6, depois clique em verificar.

Agora sim, seu site está online e com a URL do seu domínio!

Fique a vontade para perguntar ou sugerir melhorias para esse tutorial nos comentários abaixo!

Abraços!