Personaliza el comportamiento de Hosting

Firebase Hosting tiene funciones adicionales que te permiten personalizar la manera en la que se aloja tu contenido. En este artículo, se describen las páginas de error personalizadas, los redireccionamientos, las reescrituras y los encabezados.

Cómo personalizar la página 404/No encontrada

Especifica que se muestre un error 404 Not Found personalizado cuando un usuario intente acceder a una página que no existe.

Solo debes agregar una página 404.html al directorio público del proyecto. El contenido de la página 404.html se mostrará cuando Firebase Hosting necesite indicar un error 404 Not Found al usuario.

Redireccionamientos

Usa el redireccionamiento de URL para evitar la presencia de vínculos que no funcionan cuando se mueve una página, o bien para acortar una URL. Cuando un navegador intenta abrir una URL de una fuente específica, en su lugar abrirá la URL de destino y actualizará la ubicación del navegador a la URL de destino. Por ejemplo, puedes redireccionar example.com/team a example.com/about.html.

Para especificar el redireccionamiento de URL, define una sección redirects en hosting, en el archivo firebase.json:

"hosting": {
  // Add the "redirects" section within "hosting"
  "redirects": [ {
    "source" : "/foo",
    "destination" : "/bar",
    "type" : 301
  }, {
    "source" : "/firebase/*",
    "destination" : "https://firebase.google.com",
    "type" : 302
  } ]
}

La configuración de redirects es un parámetro opcional que contiene una matriz de reglas de redireccionamiento. Cada regla debe especificar su source, destination y type.

El parámetro source es un patrón glob que se compara con todas las rutas de acceso de URL al comienzo de cada solicitud (antes de que se determine si existe un archivo o una carpeta en esa ruta de acceso). Si se encuentra una coincidencia, se establece una respuesta de redireccionamiento HTTP con el encabezado "Location" establecido como la string estática destination, que puede ser una ruta de acceso relativa o una URL absoluta.

Por último, el parámetro type indica el código de respuesta HTTP específico que se proporciona y puede ser 301 para "Movido de forma permanente" o 302 para "Encontrado" (redireccionamiento temporal).

Reescrituras

Usa una reescritura para mostrar el mismo contenido en varias URL. Las reescrituras son particularmente útiles con la comparación de patrones, ya que puedes aceptar cualquier URL que coincida con el patrón y permitir que el código del cliente decida qué mostrar. Por ejemplo, con las reglas de reescritura, puedes ofrecer compatibilidad con las apps que usan HTML5 pushState para navegar. Cuando un navegador intenta abrir una URL de una fuente específica, se le proporcionarán los contenidos del archivo que se encuentra en la URL de destino.

Para especificar la reescritura de URL, define una sección rewrites en hosting, en el archivo firebase.json:

"hosting": {
  // Add the "rewrites" section within "hosting"
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

La configuración de rewrites es un parámetro opcional que contiene una matriz de reglas de reescritura internas. De manera similar a los redireccionamientos mencionados anteriormente, cada regla de reescritura debe tener un patrón glob source y un destination local (que debe existir y ser un archivo). Cuando un archivo o una carpeta no existe en el source especificado, Firebase Hosting aplica la regla de reescritura y muestra el contenido real del archivo destination especificado en lugar de un redireccionamiento HTTP.

En el ejemplo anterior, cuando no existe un archivo en alguna carpeta, la regla de reescritura muestra el contenido de /index.html. Esto puede ser útil para las apps que usan HTML5 pushState.

Encabezados

Indica encabezados personalizados específicos para cada archivo mediante la definición de una sección headers en hosting, en el archivo firebase.json:

"hosting": {
  // Add the "headers" section within "hosting".
  "headers": [ {
    "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers" : [ {
      "key" : "Access-Control-Allow-Origin",
      "value" : "*"
    } ]
  }, {
    "source" : "**/*.@(jpg|jpeg|gif|png)",
    "headers" : [ {
      "key" : "Cache-Control",
      "value" : "max-age=7200"
    } ]
  }, {
    // Sets the cache header for 404 pages to cache for 5 minutes
    "source" : "404.html",
    "headers" : [ {
      "key" : "Cache-Control",
      "value" : "max-age=300"
    } ]
  } ]
}

La configuración de headers es un parámetro opcional que contiene una matriz de definiciones de encabezados personalizados. Cada definición debe tener una clave source que se compara con la ruta de acceso de la solicitud original, sin importar si alguna regla de reescritura usa notación glob. Cada definición debe tener también una matriz de headers para aplicar, cada uno con una key y un value.

En el ejemplo anterior, se especifica un encabezado CORS para todos los archivos de fuente y se reemplaza la caché del navegador predeterminada de una hora con una caché de dos horas para los archivos de imagen. Ten presente que los siguientes encabezados no pueden usar una configuración headers:

  • Strict-Transport-Security
  • Public-Key-Pinning
  • Set-Cookie

Consulta todas las opciones de configuración disponibles en la referencia Configuración de la implementación.

Prioridades de Hosting

Las diferentes opciones de configuración pueden superponerse algunas veces. Si hay un conflicto, la respuesta de Firebase Hosting se determina en este orden de prioridad:

  1. Espacio de nombres reservado (/__*)
  2. Redireccionamientos configurados
  3. Contenido estático de coincidencia exacta
  4. Reescrituras configuradas
  5. Página 404 personalizada
  6. Página 404 predeterminada

Enviar comentarios sobre…

¿Necesitas ayuda? Visita nuestra página de asistencia.