Cómo comenzar a usar Firebase Hosting

¿Interesado en aprender JavaScript? Obtenga mi libro electrónico gratuito en jshandbook.com

Firebase es una plataforma de desarrollo de aplicaciones móviles y web desarrollada por Firebase, Inc. en 2011. Fue adquirida por Google en 2014 y se incorporó al servicio Google Cloud. Ahora, es un producto emblemático de la oferta de Google Cloud.

Firebase es un producto complejo y articulado, dirigido principalmente a aplicaciones móviles.

Una de sus características menos conocidas que discutiremos en este artículo es el servicio de alojamiento web avanzado Firebase.

Características de alojamiento de Firebase

Firebase Hosting proporciona alojamiento para sitios web estáticos, como

  • sitios que puede generar utilizando generadores de sitios estáticos
  • sitios creados con plataformas CMS del lado del servidor, desde las cuales se genera una copia estática del sitio web

Puede alojar cualquier cosa siempre que no sea dinámica. Un blog de WordPress, por ejemplo, casi siempre es un buen candidato para ser un sitio estático si usa comentarios de Disqus o Facebook.

Firebase Hosting entrega archivos a través de Fastly CDN, usando HTTPS y proporciona un certificado SSL automático, con soporte de dominio personalizado.

Su nivel gratuito es generoso, con planes baratos disponibles si lo supera. Es muy amigable para el desarrollador, proporciona una herramienta de interfaz CLI, un proceso de implementación fácil y retrocesos con un solo clic.

¿Por qué deberías usar Firebase Hosting?

Firebase puede ser una buena opción para implementar sitios web estáticos y aplicaciones de una sola página.

Me gusta usar Firebase Hosting principalmente porque probé muchos proveedores diferentes y Firebase ofrece una velocidad increíble en múltiples ubicaciones geográficas sin la necesidad de un CDN por encima, ya que el CDN está integrado de forma gratuita.

Si bien tener su propio VPS es una muy buena opción, la sobrecarga de administrar su propio servidor para un sitio web simple simplemente no vale la pena. Preferiría centrarme en el contenido en lugar de en las operaciones, al igual que desplegaría una aplicación en Heroku.

Firebase es aún más fácil de configurar que Heroku.

Instale la herramienta CLI de Firebase

Instale la CLI de Firebase con

npm install -g firebase-tools

o

hilo global agregar herramientas firebase

Autentíquese con la cuenta de Google (supongo que ya tiene una cuenta de Google) ejecutando

inicio de sesión de firebase

Crea un proyecto en Firebase

Vaya a https://console.firebase.google.com/ y cree un nuevo proyecto.

Ahora dentro de la consola, ejecute lo siguiente desde la carpeta raíz del sitio en el que está trabajando:

base de fuego init
base de fuego init

Presione la barra espaciadora para seleccionar la opción "Hosting", luego presione Intro para confirmar su elección.

Ahora debe elegir el proyecto en el que desea implementar el sitio.

Elija "crear un nuevo proyecto".

Ahora elige qué carpeta contiene la versión estática de su sitio. Por ejemplo, público.

Se te harán dos preguntas sobre la configuración de la aplicación. Responda "No" a ambos:

  • ¿Configurar como una aplicación de una sola página (reescribir todas las URL en /index.html)?
  • El archivo public / index.html ya existe. ¿Exagerar?

Esto evitará que Firebase agregue su propio archivo index.html predeterminado.

Ahora estás listo para ir:

Configurar el sitio

La aplicación CLI de Firebase creó el archivo firebase.json en la carpeta del sitio raíz.

En este artículo, le digo cómo configurar una función simple en Firebase Hosting, agregando un poco de configuración en el archivo firebase.json.

Quiero establecer la directiva de encabezado Cache-Control en todos los activos del sitio: imágenes, archivos CSS y JS.

Un archivo limpio firebase.json contiene lo siguiente:

{
  "hosting": {
    "public": "public",
    "ignorar": [
      "firebase.json", "** /. *",
      "** / node_modules / **"
    ]
  }
}

Le dice a Firebase dónde está el contenido del sitio y qué archivos debe ignorar. Siéntase libre de agregar todas las carpetas que tenga, excepto las públicas.

Vamos a agregar una nueva propiedad allí, llamada encabezados:

{
  "hosting": {
    "public": "public",
    "ignorar": [
      "firebase.json",
      "** /. *",
      "** / node_modules / **"
    ],
    "encabezados": [
      {
        "fuente": "** / *. @ (jpg | jpeg | gif | png | css | js)",
        "encabezados": [{
          "key": "Control de caché",
          "value": "max-age = 1000000" // 1 semana +
        }]
      }
    ]
  }
}

Como puede ver, le decimos que para todos los archivos que terminan con jpg | jpeg | gif | png | css | js Firebase debe aplicar la directiva Cache-Control: max-age = 1000000, lo que significa que todos los activos se almacenan en caché durante más de 1 semana.

Publica el sitio

Cuando esté listo para publicar el sitio, simplemente ejecute el siguiente comando y Firebase se encargará de todo.

despliegue de firebase

Ahora puede abrir https://yourproject.firebaseapp.com y debería ver el sitio web en ejecución.

Dominio personalizado

El siguiente paso lógico es hacer que su sitio use un dominio personalizado.

Vaya a https://console.firebase.google.com/project/_/hosting/main y haga clic en el botón "Conectar dominio":

El asistente le pedirá el nombre de dominio, luego le proporcionará un registro TXT que debe agregar a su panel DNS de alojamiento para verificar el dominio.

Si el dominio es nuevo, puede pasar algún tiempo antes de que pueda pasar este paso.

Una vez hecho esto, la interfaz le dará dos registros A para agregar también a su panel DNS de alojamiento.

Si configura yourdomain.com, no olvide configurar también www.yourdomain.com haciéndolo una redirección.

Ahora solo tiene que esperar a que su hosting actualice los registros DNS y que las cachés DNS se vacíen.

Además, tenga en cuenta que su certificado SSL se aprovisiona automáticamente, pero requiere un poco de tiempo para ser válido.

¿Interesado en aprender JavaScript? Obtenga mi libro electrónico gratuito en jshandbook.com