Compartir 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.

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.

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.

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.

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.

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.