2,906 leituras

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

por Vladislav Guzey4m2023/06/06

Muito longo; Para ler

Firebase é uma plataforma de desenvolvimento de aplicativos móveis e web. Ele oferece recursos como banco de dados em tempo real, autenticação, hospedagem, armazenamento em nuvem e muito mais. Hoje, usaremos o recurso 'Hosting' para armazenar nosso projeto Next.JS. A primeira coisa que você precisa fazer é registrar uma conta no Firebase.

featured image - 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:

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

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.