Implantando um site no Firebase e usando-o gratuitamente: um guia

Não faz muito tempo, escrevi um post intitulado " Como melhorar as pontuações de desempenho do site de 35 a 100 . " Nesse post, prometi mostrar a você como implantar seu projeto no Firebase e usá-lo gratuitamente. Estou cumprindo minha promessa!

O que é Firebase?

Provavelmente, alguns de vocês ainda não estão familiarizados com o Firebase, então deixe-me explicar brevemente o que é.

Firebase é uma plataforma de desenvolvimento de aplicativos móveis e da Web que fornece um conjunto de ferramentas e serviços para ajudar os desenvolvedores a criar e dimensionar seus aplicativos com mais facilidade.

Ele oferece recursos como banco de dados em tempo real, autenticação, hospedagem, armazenamento em nuvem e muito mais. O Firebase também fornece infraestrutura e funcionalidades de back-end, permitindo que os desenvolvedores se concentrem na criação de seus aplicativos sem se preocupar com o gerenciamento do servidor ou com a configuração complexa da infraestrutura.

No geral, o Firebase simplifica o processo de desenvolvimento e permite que os desenvolvedores criem aplicativos de alta qualidade rapidamente.

Hoje, usaremos o recurso 'Hosting' para armazenar nosso projeto Next.JS. Neste exemplo, mostrarei como hospedar a versão estática do seu projeto. A primeira coisa que você precisa fazer é registrar uma conta.

Como registrar uma conta no Firebase

Para registrar uma conta no Firebase, abra https://firebase.google.com/ , e clique em "Começar".

Depois, você precisa criar uma conta do Google ou usar uma já existente. Depois de concluir a primeira etapa, você chegará ao painel de controle do Firebase. O próximo passo é criar um projeto.

Como criar um projeto no Firebase

Para criar um projeto, você tem que fazer 3 passos simples:

1. Clique em "Adicionar projeto" e dê um nome a ele na nova janela.

2. Ative ou desative a funcionalidade do Google Analytics para o projeto e clique em "Criar projeto"

Após alguns minutos, seu projeto será criado.

Como usar o Firebase gratuitamente

Depois de criar um projeto, você poderá vê-lo em seu painel. Por padrão, você estará no Plano Spark . Se não estiver, você precisa mudar para o Plano Spark .

O Plano Spark é um plano gratuito sem custos mensais . Tem algumas limitações, mas é mais do que suficiente para iniciar o seu projeto, principalmente se pretende utilizá-lo como plataforma de alojamento do seu site estático.

Para ver a descrição completa do plano, visite este link .

Hora de configurar a hospedagem do Firebase.

Como configurar a hospedagem Firebase

Configurar a hospedagem do Firebase também é bastante simples. Faça login em sua conta e selecione seu projeto. Em seguida, no menu à esquerda, clique em "Criar" e selecione "Hospedagem" no menu suspenso.

Na nova janela, você verá uma tela de boas-vindas. Clique em "Começar".

Para hospedar seu projeto, você precisa primeiro configurar o Firebase CLI.

Abra a janela do terminal e digite o seguinte comando:

 npm install -g firebase-tools

Quando a configuração estiver concluída, digite o seguinte no seu terminal:

 firebase login

Ele irá levá-lo para a tela de login para autorizar o acesso.

A próxima etapa é navegar até a pasta do projeto dentro da janela do terminal, onde você armazenou seu site estático.

Execute o seguinte comando:

 firebase init

Se você fez tudo corretamente, deverá ver o seguinte na janela do seu terminal.

Na lista de opções, selecione "Hosting: Configure files for Firebase Hosting and (opcionalmente) set up GitHub Action deploys". Use as setas do teclado para navegar, pressione espaço para selecionar e pressione Enter.

Em seguida, selecione uma conta na lista e pressione enter.

Como já temos um projeto, selecione "Usar um projeto existente" na lista e escolha o projeto que você criou na etapa anterior.

Por padrão, o diretório público é definido como "público". Se você quiser especificar outro diretório, poderá fazê-lo na próxima etapa. Por exemplo, meu projeto Next.js produz uma versão estática do site no diretório 'out', então eu o especifico nesta etapa.

As duas últimas questões de configuração serão sobre as configurações do seu site.

• "Configurar como um aplicativo de página única (reescrever todos os URLs para /index.html)" - Sim

• "Configurar builds e implantações automáticas com o GitHub?" - Não

Terminamos a configuração. Agora é hora de implantar nosso projeto no Firebase.

Como implantar o site no Firebase

Depois de concluir todas as configurações, você pode implantar seu site na hospedagem Firebase.

Na janela do terminal, dentro do diretório do seu projeto, digite o seguinte comando:

 firebase deploy --only hosting

Se tudo correr bem, você verá as URLs que você pode usar para acessar seu site.

Espero que você tenha achado este artigo útil! No próximo, mostrarei como configurar um nome de domínio personalizado para seu projeto Firebase.

Fique atento!

Também publicado aqui