Comparte los recursos de un proyecto en varios sitios

Puedes configurar uno o más sitios de Firebase Hosting en un solo proyecto de Firebase. Dado que los sitios están en el mismo proyecto de Firebase, estos pueden acceder a los demás recursos de Firebase del proyecto.

• Cada sitio tiene su propia configuración de hosting.
• Cada sitio aloja su propia colección de contenido.
• Cada sitio puede tener uno o más dominios asociados.

Si configuras varios sitios de Hosting en el mismo proyecto de Firebase, podrás compartir recursos de la plataforma con más facilidad entre apps y sitios relacionados. Por ejemplo, si configuras el blog, el panel de administración y la app pública como sitios individuales en el mismo proyecto de Firebase, podrán compartir la misma base de datos de usuarios de Firebase Authentication y tener dominios únicos o recursos estáticos.

Importante: Para duplicar los entornos del flujo de trabajo (por ejemplo, Dev, Q1, Q2 y Prod), te recomendamos crear un proyecto de Firebase independiente para cada entorno en lugar de crear varios sitios en un solo proyecto de Firebase. En general, no es recomendable utilizar los recursos de Firebase en el entorno de producción (como los datos del cliente en Realtime Database) en un entorno de desarrollo. Evalúa la posibilidad de usar la configuración automática del SDK para duplicar varios entornos con el uso de una sola base de código.

La función de varios sitios admite un máximo de 36 sitios por proyecto de Firebase.

Paso 1: Actualiza la versión de Firebase CLI

Actualiza a la versión más reciente de Firebase CLI para acceder a las funciones más recientes de Firebase Hosting.

Paso 2: Agrega sitios adicionales

Usa uno de los siguientes métodos para agregar sitios adicionales a un proyecto de Firebase:

• Usa el flujo de trabajo de la página Hosting de Firebase console.

• Usa el siguiente comando de Firebase CLI: firebase hosting:sites:create SITE_ID.

• Usa la siguiente API de REST de Hosting: projects.sites.create.

En cada uno de estos métodos, deberás especificar un SITE_ID que se usa a fin de construir los subdominios predeterminados que aprovisiona Firebase para el sitio:

• SITE_ID.web.app
• SITE_ID.firebaseapp.com

Debido a que SITE_ID se usa para estas URL, el ID del sitio tiene los siguientes requisitos:

• Debe ser una etiqueta de nombre de host válida, por lo que no puede contener ., _, etcétera.
• Debe tener un máximo de 30 caracteres.
• Debe ser único a nivel global en Firebase.

También puedes agregar dominios personalizados a cada sitio para que entreguen el mismo contenido y configuración en varias URL.

Nota: Si creaste varias instancias de Firebase Realtime Database en tu proyecto de Firebase antes de agosto de 2018, Firebase aprovisionó automáticamente un sitio correspondiente a cada instancia de base de datos. Si no necesitas esos sitios adicionales, puedes borrarlos sin que las instancias de base de datos se vean afectadas.

Borra un sitio secundario

Borra sitios no deseados de un proyecto de Firebase con uno de los siguientes métodos:

• Usa el flujo de trabajo de la página Hosting de Firebase console.

• Usa el siguiente comando de Firebase CLI: firebase hosting:sites:delete SITE_ID.

• Usa la siguiente API de REST de Hosting: projects.sites.delete.

Ten en cuenta que no puedes borrar el sitio predeterminado, que tiene el mismo SITE_ID que el ID de tu proyecto de Firebase.

Precaución: Borrar un sitio es una acción permanente. Si lo haces, Firebase no mantendrá registros de los archivos implementados ni del historial de implementaciones. Además, ni tú ni nadie podrá reactivar el SITE_ID.

Paso 3: Configura destinos de implementación para tus sitios

Si tienes varios sitios y ejecutas comandos de implementación de Firebase CLI, la CLI necesita un medio para dar a conocer la configuración que debe implementarse a cada sitio. Con los destinos de implementación, puedes identificar de forma única un sitio específico con un TARGET_NAME en tu archivo de configuración firebase.json y en los comandos de Firebase CLI para realizar pruebas o implementaciones en tus sitios.

Importante: Usar los destinos de implementación es la manera recomendada para configurar implementaciones de varios sitios de Hosting.
Si ya configuraste el archivo firebase.json mediante una referencia explícita al SITE_ID, debes editar la configuración de firebase.json y los comandos de la CLI para que, en su lugar, usen los destinos de implementación.

Para crear un destino de implementación y aplicar un TARGET_NAME a un sitio de Hosting, ejecuta el siguiente comando de la CLI desde la raíz del directorio del proyecto:

firebase target:apply hosting TARGET_NAME RESOURCE_IDENTIFIER

Los parámetros correspondientes son los siguientes:

• TARGET_NAME: Es un nombre único, que tú mismo definiste, del sitio de Hosting en el que quieres realizar la implementación.

• RESOURCE_IDENTIFIER: Es el SITE_ID del sitio de Hosting, tal como aparece en tu proyecto de Firebase.

Por ejemplo, si creaste dos sitios (myapp-blog y myapp-app) en tu proyecto de Firebase, podrías aplicar un TARGET_NAME único (blog y app, respectivamente) a cada sitio ejecutando los siguientes comandos:

firebase target:apply hosting blog myapp-blog

firebase target:apply hosting app myapp-app

La configuración de los destinos de implementación se almacena en el archivo .firebaserc del directorio de tu proyecto, de manera que solo es necesario configurar destinos de implementación una vez por proyecto.

Paso 4: Define la configuración de hosting para cada sitio

Usa el TARGET_NAME aplicado de un sitio cuando definas su configuración de hosting en tu archivo firebase.json.

• Si en el archivo firebase.json se define la configuración de varios sitios, usa un formato de array. Sigue este ejemplo:

  {
    "hosting": [ {
        "target": "blog",  // "blog" is the applied TARGET_NAME for the Hosting site "myapp-blog"
        "public": "blog/dist",  // contents of this folder are deployed to the site "myapp-blog"
  
        // ...
      },
      {
        "target": "app",  // "app" is the applied TARGET_NAME for the Hosting site "myapp-app"
        "public": "app/dist",  // contents of this folder are deployed to the site "myapp-app"
  
        // ...
  
        "rewrites": [...]  // You can define specific Hosting configurations for each site
      }
    ]
  }
  

• Si en el archivo firebase.json se define la configuración de un solo sitio, no es necesario usar un formato de array. Sigue este ejemplo:

  {
    "hosting": {
        "target": "blog",
        "public": "dist",
  
        // ...
  
        "rewrites": [...]
    }
  }
  

Paso 5: Realiza pruebas locales, obtén vistas previas de los cambios y, luego, impleméntalos en tus sitios

Ejecuta cualquiera de los siguientes comandos desde la raíz del directorio del proyecto local.

Comando	Descripción
firebase emulators:start --only hosting	Emula el contenido y la configuración de Hosting del sitio de Hosting predeterminado en una URL alojada de forma local.
firebase emulators:start --only hosting:TARGET_NAME	Emula el contenido y la configuración de Hosting del sitio de Hosting especificado en una URL alojada de forma local.
firebase hosting:channel:deploy \ CHANNEL_ID	Implementa el contenido y la configuración de Hosting del sitio de Hosting predeterminado en una URL de vista previa.
firebase hosting:channel:deploy \ CHANNEL_ID --only TARGET_NAME	Implementa el contenido y la configuración de Hosting del sitio de Hosting especificado en una URL de vista previa.
firebase deploy --only hosting	Implementa el contenido y la configuración de Hosting en el canal en vivo de todos los sitios de Hosting configurados en firebase.json.
firebase deploy --only hosting:TARGET_NAME	Implementa el contenido y la configuración de Hosting en el canal en vivo del sitio de Hosting especificado.

Comando	Descripción
(no recomendado: usa emulators:start en su lugar) firebase serve --only hosting	Entrega el contenido y la configuración de Hosting del sitio de Hosting predeterminado en una URL alojada de forma local.
(no recomendado: usa emulators:start en su lugar) firebase serve --only hosting:TARGET_NAME	Entrega el contenido y la configuración de Hosting del sitio de Hosting especificado en una URL alojada localmente.

Nota: Si ejecutas comandos con la marca --only hosting, solo emulas o implementas tu contenido y configuración de Hosting. Si también deseas emular o implementar otros recursos o configuraciones del proyecto (como funciones o reglas de bases de datos), ejecuta comandos con una lista separada por comas en la marca (por ejemplo, --only hosting,functions).

En las implementaciones para canales de vista previa, no se especifica hosting en la marca --only porque esos comandos solo sirven para implementar tu contenido y configuración de Hosting.