Implementación de un sitio web en Firebase y uso gratuito: una guía

No hace mucho, escribí una publicación titulada " Cómo mejorar las puntuaciones de rendimiento del sitio web de 35 a 100 . " En esa publicación, prometí mostrarte cómo implementar tu proyecto en Firebase y usarlo de forma gratuita. ¡Cumplo mi promesa!

¿Qué es Firebase?

Probablemente, algunos de ustedes aún no estén familiarizados con Firebase, así que permítanme explicarles brevemente de qué se trata.

base de fuego es una plataforma de desarrollo de aplicaciones web y móviles que proporciona un conjunto de herramientas y servicios para ayudar a los desarrolladores a crear y escalar sus aplicaciones más fácilmente.

Ofrece funciones como una base de datos en tiempo real, autenticación, alojamiento, almacenamiento en la nube y más. Firebase también proporciona funcionalidades e infraestructura de back-end, lo que permite a los desarrolladores concentrarse en crear sus aplicaciones sin preocuparse por la administración del servidor o la configuración de una infraestructura compleja.

En general, Firebase simplifica el proceso de desarrollo y permite a los desarrolladores crear rápidamente aplicaciones de alta calidad.

Hoy, usaremos su función 'Alojamiento' para almacenar nuestro proyecto Next.JS. En este ejemplo, le mostraré cómo alojar la versión estática de su proyecto. Lo primero que tienes que hacer es registrar una cuenta.

Cómo registrar una cuenta de Firebase

Para registrar una cuenta en Firebase, abra https://firebase.google.com/ , y haga clic en "Comenzar".

Luego, debe crear una cuenta de Google o usar una existente. Una vez que haya terminado con el primer paso, aterrizará en el panel de control de Firebase. El siguiente paso es crear un proyecto.

Cómo crear un proyecto en Firebase

Para crear un proyecto, tienes que hacer 3 simples pasos:

1. Haga clic en "Agregar proyecto" y asígnele un nombre en la nueva ventana.

2. Habilite o deshabilite la funcionalidad de Google Analytics para el proyecto y haga clic en "Crear proyecto"

Después de un par de minutos, se creará su proyecto.

Cómo usar Firebase gratis

Una vez que haya creado un proyecto, podrá verlo en su tablero. De manera predeterminada, estará en el Plan Spark . Si no lo eres, debes cambiarlo al Plan Spark .

El Spark Plan es un plan gratuito sin costos mensuales . Tiene algunas limitaciones, pero es más que suficiente para iniciar tu proyecto, especialmente si planeas usarlo como plataforma de alojamiento para tu sitio web estático.

Para ver la descripción completa del plan, visite este enlace .

Es hora de configurar el alojamiento de Firebase.

Cómo configurar el alojamiento de Firebase

Configurar el alojamiento de Firebase también es bastante simple. Inicie sesión en su cuenta y seleccione su proyecto. Luego, en el menú de la izquierda, haga clic en "Construir" y seleccione "Alojamiento" en el menú desplegable.

En la nueva ventana, verá una pantalla de bienvenida. Haga clic en "Comenzar".

Para alojar su proyecto, primero debe configurar Firebase CLI.

Abra la ventana de su terminal e ingrese el siguiente comando:

 npm install -g firebase-tools

Una vez finalizada la configuración, escriba lo siguiente en su terminal:

 firebase login

Te llevará a la pantalla de inicio de sesión para autorizar el acceso.

El siguiente paso es navegar a la carpeta de su proyecto dentro de la ventana de la terminal, donde ha almacenado su sitio web estático.

Ejecute el siguiente comando:

 firebase init

Si ha hecho todo correctamente, debería ver lo siguiente en la ventana de su terminal.

En la lista de opciones, seleccione "Hosting: configurar archivos para Firebase Hosting y (opcionalmente) configurar implementaciones de GitHub Action". Use las teclas de flecha en su teclado para navegar, presione la barra espaciadora para seleccionar y luego presione enter.

A continuación, seleccione una cuenta de la lista y presione Intro.

Como ya tenemos un proyecto, seleccione "Usar un proyecto existente" de la lista y elija el proyecto que creó en el paso anterior.

De forma predeterminada, el directorio público está configurado como "público". Si desea especificar otro directorio, puede hacerlo en el siguiente paso. Por ejemplo, mi proyecto Next.js produce una versión estática del sitio web en el directorio 'out', así que lo especifico en este paso.

Las últimas dos preguntas de configuración serán sobre la configuración de su sitio web.

• "Configurar como una aplicación de una sola página (reescribir todas las URL en /index.html)" - Sí

• "¿Configurar compilaciones e implementaciones automáticas con GitHub?" - no

Hemos terminado con la configuración. Ahora es el momento de implementar nuestro proyecto en Firebase.

Cómo implementar el sitio web en Firebase

Una vez que haya completado todas las configuraciones, puede implementar su sitio web en el alojamiento de Firebase.

En la ventana de terminal, dentro del directorio de su proyecto, ingrese el siguiente comando:

 firebase deploy --only hosting

Si todo va bien, verás las URL que puedes usar para acceder a tu sitio web.

¡Espero que hayas encontrado útil este artículo! En el siguiente, le mostraré cómo configurar un nombre de dominio personalizado para su proyecto de Firebase.

¡Manténganse al tanto!

También publicado aquí