Hospedagem gratuita com Firebase Host e Custom Domain com domínio .com.br

Firebase - Hospedando um site HTML5, CSS3 e JavaScript

Olá Pessoal neste artigo iremos responder uma pergunta muito comum não somente no desenvolvimento web, como também para aqueles que desejam publicar o site da sua empresa, produtos ou serviços sem muitas despesas no início da jornada.

Para este fim queremos apresentar uma solução incrível do Firebase que é uma plataforma de aplicações para web e dispositivos móveis do Google. Neste artigo iremos apresentar o Firebase Hosting. Neste artigo você vai aprender:

• O que é o Firebase?
• O que é o Firebase Hosting?
• Por que utilizar o Firebase?
• Quais as limitações do projeto gratuito?
• Criando sua conta gratuita no Firebase
• Criando o Primeiro Projeto
• Instalando o Firebase CLI
• Criando um Projeto online
• Baixando o projeto no GitHub
• Preparando para publicar o projeto
• Deploy
• Verificando erros
• Registrando um domínio personalizado
• Adicionando um domínio personalizado (custom domain) ao Firebase
• Qual o próximo Passo?

Se desejar conferir esse mesmo conteúdo em vídeo, poderá acessar o link no fim deste artigo.

O que é o Firebase?

Firebase é uma plataforma de ferramentas para desenvolvimento web e dispositivos móveis criada em 2011. Foi adquirida pelo Google em 2014, atualmente possui cerca de 19 produtos, entre eles tecnologias para a nuvem como Cloud Functions similar ao serviço AWS Lambda onde funções são criadas no servidor e invocadas por meio de eventos, facilitando por exemplo isolar regras de negócio no lado do servidor sem precisar necessariamente de uma linguagem de programação ou mesmo configurar um ambiente no lado do Server. Com Cloud Functions é possível um aplicativo escrito para Android ou iOS disparar eventos no server e as funções escritas no server executarem o seu papel.

Além de Cloud Functions, um outro produto do Firebase chama a atenção, é o serviço de troca de mensagens em Tempo Real entre plataformas, o Firebase Cloud Messaging possui um mecanismo de notificações entre linguagens e plataformas que permite por exemplo um App, saber que existem atualizações disponíveis, ou avisar um cliente que novos posts do canal que ele acompanha já estão disponível, é um serviço semelhante ao Pusher e também ao AWS SNS que facilitam a comunicação entre aplicações.

Firebase possui muitos recursos gratuitos, e alguns que começam a ser cobrados após uma cota mínima ser alcançada dependendo do produto. São dois planos, 

Plano Spark - Gratuito

Plano Blaze - Pago após a cota do plano Spark ser atingida pelo serviço utilizado em questão.

Ferramentas para Machine Learning além de recursos para melhoria de performance estão entre os destaques do Firebase. Um dos serviços que mais tem ganhado mercado nos últimos tempos é o Firebase Hosting, uma hospedagem gratuita para sites estáticos, e que detalharemos abaixo.

O que é o Firebase Hosting?

É um serviço de hospedagem do Firebase que permite armazenar sites estáticos: HTML5, CSS3 e JavaScript de forma gratuita no plano Spark. 

Para isso é necessário utilizar uma conta Google, tal como uma conta @gmail.com para acessar o serviço, você também precisa utilizar o Firebase CLI uma ferramenta de linha de comando para publicar o seu site. Abaixo faremos um tutorial do passo a passo.

Firebase Hosting é bom? Por que utilizar o Firebase Hosting?

O Firebase Hosting é uma excelente opção para sites estáticos, como sites institucionais, land pages, sites de aplicativos, PWA, que precisam de velocidade e confiabilidade, uma vez que o server side é gerenciado pelo próprio Google possui inúmeras vantagens como:

• Velocidade - Os sites são armazenados e cacheados(Na primeira requisição é formado um cache da aplicação) de forma automática, inúmeros CDN ou centros de distribuição de conteúdo são espelhados pelo mundo tornando o acesso mais rápido.
• SSL - Você ganha certificado de segurança gratuitamente e automaticamente utilizando Firebase Hosting.
• SSD - O armazenamento dos arquivos se dá em SSD tornando o processo de leitura e escrita muito rápido.

Quais as limitações do Firebase Hosting?

Com Firebase Hosting você não poderá hospedar aplicações que utilizam linguagens de programação Back-end como o PHP por exemplo, neste caso é recomendado que você utilize o Google Cloud ou outra solução de nuvem.

No Firebase Hosting temos dois planos como mencionados, no plano Spark que é gratuito, você possui a limitação de 10GB de armazenamento, e 10GB de transferência por mês.

Hopedando um site no Firebase

Que tal colocarmos em prática e publicarmos um site no Firebase utilizando o Firebase Hosting e o Firebase CLI? Quando publicamos um site no Firebase ele te dá gratuitamente um domínio com a extensão .web.app se você não desejar utilizar um domínio gratuito, é possível registrar o seu domínio e apontar para o firebase.

Criando uma conta no Firebase

Para criar uma conta no firebase, é necessário ter um e-mail vinculado a uma conta Google, qualquer e-mail do Gmail já possuirá este vínculo.

Em seguida acesse: https://console.firebase.google.com/

Ou clique no canto superior direito Ir para o console

É muito importante! que crie o primeiro projeto online antes de ir para a linha de comando, para aceitar os termos do Firebase antes de criar um projeto.

Criando o Primeiro Projeto

Clique em Criar um projeto, em seguida dê um nome para o projeto e clique em Aceito os Termos do Firebase:

Vou chamar este projeto de hcode-ferrari, veja que neste momento, o Firebase irá verificar se o nome está disponível, se não estiver ele irá sugerir um nome próximo do nome que você deseja, é muito importante atentar para o nome do projeto uma vez que a URL gerada será em cima deste nome.

Na próxima tela, a pergunta é, se você deseja ativar o Google Analytics para o seu projeto do Firebase. Com o Google Analytics você terá total controle sobre relatórios de acesso, origem dos visitantes, termos de pesquisas que levaram ao seu site, total de visitantes, Testes A/B para melhoria de desempenho e otimização da experiência do usuário. É uma ferramenta completa e poderosa.

Você pode deixar habilitado a opção Ativar o Google Analytics neste projeto. Clique em Continuar.

Na terceira etapa, somos informados dos compartilhamentos que serão necessários para utilizar a ferramenta, leia com atenção e se estiver de acordo, selecione o País do Analytics, no nosso caso, Brasil e habilite as opções e clique em criar um projeto.

Após a criação do projeto, clique em continuar. Você será redirecionado para a Visão geral do projeto.

Embora seja possível criar o projeto de forma visual, vamos ver a opção do Firebase Hosting, e em seguida iremos para a linha de comando publicar o nosso site.

No menu esquerdo clique em Desenvolver, em seguida Hosting, clique no botão Primeiros passos.

A partir daí iremos instalar o Firebase CLI, nós já fizemos um vídeo com esta instalação, então se desejar poderá assistir ao vídeo Instalando o Firebase CLI ou continuar na próxima seção Instalando o Firebase CLI.

Instalando o Firebase CLI

Nesta etapa você precisará de um editor de texto, recomendamos o Visual Studio Code, que é atualmente uma poderosa ferramenta para construir aplicativos, sites e programas. Ele é gratuito e modular, ou seja você pode adicionar extensões e torná-lo cada vez mais poderoso.

https://code.visualstudio.com/

Você também precisará ter o Node.JS e o NPM instalados, o NPM será instalado automaticamente junto com o NodeJS.

Acesse: https://nodejs.org/pt-br/

Baixe a versão LTS que é a recomendável para todos os usuários

Após a instalação do NodeJS feche o programa VSCode ou Visual Studio Code, e abra novamente. Você também precisará instalar o Git para fazer o download do projeto exemplo que está em nosso GitHub.

Acesse: https://git-scm.com/

Clique no botão verde Download 2.27.0 for Windows um arquivo de 45.8MB deve ser baixado, após a instalação, feche o VSCode e abra novamente.

Crie uma pasta para o projeto, pode ser qualquer nome, mas de preferência, utilize o nome do seu projeto do Firebase.

Clique em Arquivo-> Abrir Pasta e selecione a pasta do seu projeto. Em seguida após carregar a pasta do projeto, clique no menu Terminal e escolha a opção Novo Terminal.

Na parte inferior veja o terminal que foi criado. Provavelmente deve ser do tipo PowerShell, por que é o padrão do VSCode,

Dica: Se você deseja alterar de powershell para bash siga o passo a passo do próximo parágrafo.

Como você já instalou o git, você pode mudar para bash se desejar, clique no canto direito onde tem um número 1:powershell escolha a última opção selecionar shell padrão e em seguida abrirá uma opção no topo da tela, escolha a terceira opção Git Bash, então volte no terminal e procure o ícone da lixeira, no canto inferior direito, exclua o terminal, e abra novamente no menu Terminal -> Novo Terminal, agora sim, deve aparecer bash.

Instale a ferramenta Firebase CLI em nível global com o comando:

 npm install -g firebase-tools

A opção -g fará com que a ferramenta fique disponível em toda a máquina, não sendo necessário instalar novamente.

Criando um Projeto OnLine

Para iniciar nosso projeto precisamos amarrar o login do Firebase com o terminal, para isso digite o comando:

firebase login

Caso você já esteja logado, o terminal irá mostrar em qual conta está logado, você pode desconectar desta conta com o comando:

firebase logout

Para conectar em outra conta basta digitar firebase login novamente novamente.

Ele abrirá uma janela para colocar seu login e senha, após a autenticação, confirme os privilégios que o Firebase precisa em sua conta

Clique em Permitir e em seguida a tela de que estamos conectados irá aparecer, pode fechar o navegador.

 volte para o terminal e inicie o projeto com o comando:

firebase init

A primeira pergunta do Firebase tem haver com a estrutura de diretórios, ele procura uma pasta que possua arquivos de configuração, tais como o package.json, como ele não encontrou ele entende que está fora do diretório principal, deseja prosseguir? Digite Y para sim.

Qual ferramenta do Firebase você deseja utilizar? Utilize as setas para selecionar a opção Hosting e a barra de espaço para selecionar a opção, pressione Enter

Em Project Setup, selecione a opção Use an existing project para selecionar o projeto que já criamos online.

Pressione enter para selecionar o projeto com o nome que você atribuiu, no meu caso, hcode-ferrari

Você gostaria de usar um diretório público? Sim com o nome public? basta pressionar enter.

O seu projeto será uma Single-page-application ou seja todas as URL serão redirecionadas para index.html, você pode pressionar N para não alterar o seu código.

O projeto está configurado e pronto para ser feito o deploy ou publicar em produção.

Baixando o Projeto no GitHub

Agora que nosso Firebase está pronto, vamos baixar o projeto de exemplo, este projeto é um site da Ferrari que construímos no Programa Hcode Lab, e também transformamos ele em um PWA, você pode acompanhar o processo de desenvolvimento do PWA no Hcode Café que fizemos sobre PWA  o projeto está no GitHub. Vamos baixar o projeto:

https://github.com/hcodebr/pwa

Basta abrir o terminal e clonar este projeto dentro da nossa pasta hcode-ferrari, o Git irá gerar uma pasta chamada pwa com o conteúdo do repositório.

Preparando para publicar o projeto

A pasta pwa possui os próprios arquivos de configuração do firebase como o arquivo firebase.json e .firebaserc que são arquivos que determinam as dependências do projeto e nome dele.

Sua estrutura de pastas deve estar dessa maneira:

O que faremos agora é aproveitar somente a pasta public que está dentro de pwa, ela irá sobrescrever a nossa pasta public atual. Basta mover a pasta public de pwa para fora, para a raiz do projeto, arrastando ela.

Um alerta de que esta pasta irá sobrescrever a pasta public atual será exibido.

Basta clicar em substituir, em seguida verifique se a pasta foi copiada, e pode excluir a pasta pwa existente com todo o conteúdo que ficou. Se o VSCode não conseguir excluir essa pasta, abra no windows explorer ou no Finder(macOS) e exclua manualmente a pasta pwa.

Deploy

Agora que os arquivos estão prontos, vamos enviar para o firebase basta para isso executar o comando:

firebase deploy

Antes de executar o comando veja que o domínio com o nome do nosso projeto já foi criado, porém não possui conteúdo.

Pronto! Nosso site está online! Veja o resultado depois de executar o nosso deploy. Pressione F5 na página. Uma pasta com o nome .firebase e uma versão em cache da aplicação será gerada.

Verificando Erros

Se der algum erro no deploy, será gerado um arquivo de log, com uma descrição do erro tente ler este arquivo com atenção, ele irá dizer qual passo falhou.

Registrando um novo domínio .com.br

Para registrar um domínio você irá gastar em torno de R$ 40,00 por ano, para acessar registro.br e criar um cadastro, depois escolher o nome do seu domínio, ver se ele está disponível, e registrar, fazer o pagamento e acessar o domínio.

Clique no domínio e em seguida em Editar Zona

E nesta seção que iremos trabalhar na próxima seção.

Adicionando um domínio personalizado ao Firebase

Após a publicação do seu projeto, acesse o console do firebase em console.firebase.google.com e selecione o projeto que você criou, no meu caso o hcode-ferrari. 

Veja que temos um painel com as informações do projeto, entre elas um botão azul: Adicionar um domínio personalizado. Uma vez que já registramos o domínio.Clique neste botão e informe o nome do domínio.

Precisamos verificar que temos autorização para publicar no domínio informado. O Firebase irá gerar um registro do tipo TXT para validar que temos esse acesso, copie o valor do registro.

Acesse o site registro.br e selecione o domínio que deseja redirecionar para o Firebase Host.

Clique na opção Editar DNS. Clique no botão inferior Nova entrada

Copie o valor da chave no Firebase e cole na nova entrada, selecione o tipo TXT e cole o texto.

Se for um domínio novo, talvez tenha que esperar cerca de 2 horas para realizar alguma alteração de DNS até a propagação dos DNS.

Depois de adicionar, clique em SALVAR.

Volte no Firebase e clique em verificar a propriedade, se tudo estiver certo, aparecerá a seguinte tela:

Após adicionar os registros do tipo A com os dois endereços de IP sugeridos, clique em Salvar.

Essa é a tela final no registro.br lembre-se que não é o site registro.com.br NÃO é somente registro.br.

Pode levar até 24 horas para propagar o domínio e as alterações de DNS surtirem efeito. Normalmente em 10 minutos está tudo atualizado.

Depois da propagação basta acessar o domínio .com.br no meu caso www.hcodelab.com.br

Se desejar, você pode acompanhar todo esse tutorial em vídeo no Hcode Café #28.

Qual o próximo passo?

Gostou do Firebase Hosting, esperamos que sim, que tal aprender mais sobre Firebase e outras ferramentas dele? Increva-se em nosso canal no YouTube e acompanhe as lives semanais do Hcode Café. 

Também aprenda a criar aplicações em tempo real com o Firebase em nosso Curso Completo de JavaScript com 38 horas, criamos um dropbox clone com firebase. aproveite o desconto imperdível 

Conheça a documentação do firebase que é bem completa também e possui muita novidade em português.

Se você gostou da matéria, compartilhe com seus amigos e siga a Hcode nas redes sociais!

A gente se vê no próximo artigo! Até lá!

Glaucio Daniel