Configuración de la implementación

El archivo firebase.json

El comando firebase init crea un archivo de configuración firebase.json en la raíz del directorio del proyecto. Este archivo obligatorio se usa para configurar qué archivos se publicarán después de la implementación. La configuración de Firebase Hosting en firebase.json tendrá una apariencia similar a esta:

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

Propiedades predeterminadas

Las propiedades predeterminadas (ignore y public) se describen a continuación:

public

"public": "app"

Obligatoria: La configuración public le indica al comando firebase qué directorio se debe subir a Firebase Hosting. Este directorio debe encontrarse dentro del directorio del proyecto y debe existir. El valor predeterminado es un directorio llamado "public".

ignore

"ignore": [
  "firebase.json",
  "**/.*",
  "**/node_modules/**"
]

Opcional: La configuración ignore es un parámetro opcional que especifica los archivos que se deben ignorar durante la implementación. Puede usar las definiciones glob de la misma forma en que git maneja .gitignore.

Propiedades avanzadas

El archivo firebase.json contiene algunos parámetros opcionales para la configuración de hosting. Aquí puedes ver un archivo firebase.json con una configuración de hosting completa y los parámetros opcionales se explican a continuación:

redirects

"redirects": [ {
  "source" : "/foo",
  "destination" : "/bar",
  "type" : 301
}, {
  "source" : "/firebase/*",
  "destination" : "https://www.firebase.com",
  "type" : 302
} ]

Opcional: La configuración redirects corresponde a 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).

Captura de los redireccionamientos

En algunas ocasiones, es conveniente capturar partes de la URL de origen de un redireccionamiento y reutilizarlas en el destino. Para hacerlo, usa un prefijo : a fin de identificar el segmento y un * opcional después del nombre para indicar que debe capturar el resto de la URL:

"redirects": [ {
  "source": "/blog/:post*",
  "destination": "https://blog.myapp.com/:post*",
  "type": 301
},
{
  "source": "/users/:id/profile",
  "destination": "/users/:id/newProfile",
  "type": 301
} ]

rewrites

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

Opcional: La configuración rewrites es un parámetro opcional que contiene una matriz de reglas de reescritura de URL. 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). Se aplica una regla de reescritura solo si un archivo o una carpeta no existen en el origen especificado, y se muestra el contenido real del archivo en el destino en lugar de un redireccionamiento HTTP.

El ejemplo anterior reescribe cualquier URL con el contenido de /index.html si no existe un archivo coincidente que se haya subido. Esta acción es útil para las apps que usan HTML5 pushState.

headers

"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"
  } ]
} ]

Opcional: La configuración 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 una con una key y un value.

En el ejemplo anterior, se especifica un encabezado CORS para todos los archivos de fuente y la caché del navegador predeterminada de 1 hora se reemplaza por una caché de 2 horas para los archivos de imagen.

Los siguientes encabezados no pueden establecerse a través de la configuración headers:

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

cleanUrls

"cleanUrls": true

Opcional: La configuración cleanUrls es un parámetro opcional que, cuando es true, ignora automáticamente la extensión .html de las URL de los archivos subidos. Si se agrega una extensión .html, se realiza un redireccionamiento 301 hacia la misma ruta de acceso sin la extensión .html.

trailingSlash

"trailingSlash": false

Opcional: La configuración trailingSlash es un parámetro opcional que te permite controlar si las URL deben tener barras finales. Si el valor es true, redireccionará las URL de modo tal que tengan una barra final. Si el valor es false, redireccionará las URL de modo tal que no tengan una barra final. Si no se especifica, se usarán barras finales solo para los archivos de índice del directorio (por ejemplo, about/index.html).

Comparación de patrones glob

Las definiciones de firebase.json antes mencionadas usan ampliamente la notación de comparación de patrones glob con extglob, de manera similar a la forma en que Git maneja las reglas gitignore, y Bower maneja las reglas de omisión. Esta página de wiki brinda una referencia más detallada, pero aquí te ofrecemos una explicación de los ejemplos anteriores:

  • firebase.json solo coincide con el archivo firebase.json ubicado en la raíz del directorio público.
  • ** coincide con cualquier archivo o carpeta ubicado en un subdirectorio arbitrario. Ten en cuenta que * solo coincide con archivos y carpetas del directorio raíz.
  • **/.* coincide con cualquier archivo que comienza con un "." (generalmente, estos son archivos ocultos, como la carpeta .git) en un subdirectorio arbitrario.
  • **/node_modules/** coincide con cualquier archivo o carpeta ubicado en un subdirectorio arbitrario de la carpeta "node_modules", que puede estar en un subdirectorio arbitrario del directorio público.
  • **/*.@(jpg|jpeg|gif|png) coincide con cualquier archivo ubicado en un subdirectorio arbitrario que termine con un "." y que corresponde exactamente a uno de estos tipos de archivo: "jpg", "jpeg", "gif" o "png".

Ejemplo completo de la configuración de hosting

{
  "hosting": {
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [ {
      "source" : "/foo",
      "destination" : "/bar",
      "type" : 301
    }, {
      "source" : "/firebase/*",
      "destination" : "https://www.firebase.com",
      "type" : 302
    } ],
    "rewrites": [ {
      "source": "/app/**",
      "destination": "/app/index.html"
    } ],
    "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"
      } ]
      }, {
      "source" : "404.html",
      "headers" : [ {
        "key" : "Cache-Control",
        "value" : "max-age=300"
      } ]
    } ],
    "cleanUrls": true,
    "trailingSlash": false
  }
}

Enviar comentarios sobre...

Si necesitas ayuda, visita nuestra página de asistencia.