Firebase Hosting: a maneira mais prática de hospedar seu site
Primeiros passos com o serviço do Firebase Hosting.
Antes de mais nada, o que é Firebase? é uma plataforma na nuvem dedicada a serviços, um Baas (Backend as a Service) para aplicações Web e Mobile, criada pela Google da qual você pode utilizar diversos serviços, essa é a primeira série de posts sobre essa plataforma incrível que devo apresentar.
Serviços
Imagina só o leque de serviços que o Firebase disponibiliza, com ele você pode testar uma ideia, um MVP, ideal para quem quer validar seu negócio (ideal para quem ainda não possui domínio, mesmo com ou sem ele você pode tirar sua ideia do papel), além de, integração com banco de dados para aprendizado de máquina, desenvolvedores de dispositivos móveis, sistema de push notification, mecanismo de autenticação, teste de apps em tempo real e muito mais para integrar com seu aplicativo web ou mobile.
Eu diria que o Firebase é uma bazuca, sim ele é poderoso e dá um tiro certeiro, é um serviço seguro com tecnologia de ponta e além de tudo, dá para utilizar alguns serviços gratuitos. Já utilizei o Firebase Realtime database com o Ionic 3 e foi surpreendente.
O que vou presentar é um serviço de hosting, indicado para sites estáticos ou micro-serviços, pelo menos até a data deste post, como o Firebase está crescendo possa ser que mude. Mas o que quer dizer sites estáticos? São aqueles sites construídos em HTML, CSS, JavaScript que não precisam de mudança de conteúdo como sistema de chat ou formulário. Um site estático destina-se a funcionalidades específicas e que não vai exigir atualização com frequência.
Em breve vou explicar sobre cada serviço que utilizo, por hora vamos nos concentrar no Hosting, vamos preparar o ambiente.
Instalação do Firebase tools
Para hospedar seu site com o Firebase Hosting, é necessário usar a Firebase CLI (uma ferramenta de linha de comando). Execute o seguinte comando do npm para instalar a CLI ou atualizar para a versão mais recente da CLI.
Firebase CLI depende do Nodejs e o NPM, se você não tiver pode instalar a versão mais recente.
Após instalados Nodejs e npm, instale a Firebase CLI por meio do NPM executando o código a seguir:
$ npm install -g firebase-toolsObservação: se o comando falhar, talvez seja necessário consultar a referência da Firebase CLI ou altere suas permissões de npm.
Login no Firebase
Faça login no Firebase por meio da sua Conta do Google. Para isso, acesse a pasta do seu projeto e execute o código no seu terminal:
$ firebase loginEsse comando conecta sua máquina local ao Firebase e concede acesso aos seus projetos.
Criando seu projeto
Nesta etapa vamos criar um projeto no console do firebase, você pode criar via terminal, mas preferi a versão gráfica, torna-se mais intuitiva. Acesse https://console.firebase.google.com , como já foi feito login anteriormente ele vai exibir seus projetos.
Clique em adicionar um projeto e informe o nome do seu projeto:
O próximo passo é informar o código do projeto: O identificador exclusivo global do seu projeto usado em URL do Realtime Database, subdomínios do Firebase Hosting e muito mais. Não é possível alterar o ID do projeto após a criação. Capriche porque é essa ID que usaremos em nossa url. Eu optei por uma que já não estava em uso gdglaurodefreitasdev e cliquei em salvar.
Você terá o segundo passo, o firebase te da a opção de adicionar e configurar o Google Analytics (outro serviço do firebase) no seu projeto, isso é uma mão na roda, mas você pode pode deixar para configurar posteriormente também. O Analytics é uma solução de analise gratuita, onde é possível medir e monitorar o desempenho do seu site, ela permite mensurar o número de visitantes do site e dizer de onde eles vieram, dentre outras funções.
Aguarde um pouco enquanto o firebase cria tudo pra você e clique em continuar.
Após o Firebase ter configurado o back-end, você vai ser redirecionado para seu projeto e vamos clicar em hosting para fazer a hospedagem. Lembrando que até a data desse artigo o Firebase permite apenas sites estáticos e micro-serviços. Pode acessar essa documentação sobre configuração de hosting
Após clicar em Hosting, clique no botão primeiros passos
Você vai ter uma tela semelhante a esta com as instruções para você fazer a implantação do projeto
Como já passamos pelo primeiro passo que foi instalar o Firebase CLI, vamos avançar. Lembrando que você deve acessar a pasta do seu projeto para então efetuar o login.
Após o login, inicie o projeto com o mando a seguir:
$ firebase initInforme Y para prosseguir e selecione a opção a seguir para iniciar a implantação do Hosting.
Escolha também o projeto a hospedar, no meu caso o gdglaurodefreitas
Em seguida, o firebase solicitará que você digite a pasta principal na qual todos os recursos de seu site estão presentes. Indicado é o diretório público, confirmei com a tecla Enter.
Logo após ele vai perguntar se o seu aplicativo é de uma única página ou não, por agora digite y
O Firebase cria um arquivo JSON com as configurações do serviço e você pode alterar rotas, pastas e etc com ele.
O próximo passo é mover os arquivos do seu site para a pasta public que foi criada pela CLI, porque se você for acessar agora sua index.html vai ter como resposta o index criado pelo firebase que é basicamente isso aqui.
Então vamos lá, depois de mover seus arquivos para a pasta public (lembre-se de deixar o firebase.json na pasta raíz) e agora sim podemos fazer a implantação do seu projeto.
$ Firebase deployApós inserir o comando Firebase deploy, ele vai concluir a implantação do projeto e você pode verificar indo para URL que é fornecido na linha de comando no meu caso, é https://gdglaurodefreitasdev.firebaseapp.com
Ou você também pode acessar pelo painel.
Este é o nosso site estático implantado no firebase de forma rápida, prática, segura e gratuitamente pelo plano Spark.
O firebase ainda dispõe de serviço de configuração de domínio, ou seja, se você já possui um domínio é possível adiciona-lo, no meu caso não tenho domínio registrado então vou fazer uma pequena demo devido a experiencia anterior, você pode em seguida se preferir, clicar no Conectar domínio e adicionar o domínio desejado.
Conectando seu domínio
Acesse o firebase console , selecione o projeto que você criou ( firebase-demo no meu caso) selecione a guia hosting na guia develop (develop -> hosting) e clique em Conectar domínio e insira o URL do seu domínio.
Em seguida, adicione o registro de txt e o valor em seu provedor de domínio dns. Se você registrou um domínio no Hostgator você pode pedir ao suporte técnico para eles executem a alteração.
Após adicionar os registros TXT ao seu provedor de DNS para confirmar que você é o proprietário de domínio, clique em verificar para prosseguir com a finalização de ativação do domínio.
Conclusão
Vimos uma visão geral sobre o sobre firebase, instalamos o firebase tools para implantar nosso site estático com o comando firebase deploy, e em breve vamos desvendar esses outros serviços que o firebase oferece. Se você achou este artigo útil, considere compartilhá-lo, deixe outras pessoas tomarem conhecimento dele.
Referências
https://console.firebase.google.com/
