Prueba tu app web de forma local, comparte los cambios con otras personas y, luego, impleméntala

Antes de implementar en tu sitio, te recomendamos consultar y probar los cambios. Firebase Hosting te permite ver y probar los cambios de forma local y también interactuar con recursos de proyectos de backend emulados. Si necesitas que tus compañeros de equipo vean y probar tus cambios, Hosting podrá crear URLs de vista previa temporales que se pueden compartir para tu sitio. Incluso admitimos un Integración en GitHub para implementar a partir de una extracción para cada solicitud.

Antes de comenzar

Completa los pasos que se indican Página introductoria de Hosting, específicamente la las siguientes tareas:

  1. Instala o actualiza la CLI de Firebase a su versión más reciente.
  2. Conecta el directorio del proyecto local (que incluye el contenido de tu app) a tu proyecto de Firebase.

Si lo deseas, puedes implementar el contenido y la configuración de Hosting de tu app, pero es no es un requisito previo para los pasos que se indican en esta página.

Paso 1: Realiza pruebas de forma local

Si realizas iteraciones rápidas o quieres que tu app interactúe con modelos recursos del proyecto de backend, puedes probar tu contenido y configuración de Hosting de forma local. Cuando realizas pruebas locales, Firebase entrega tu aplicación web en una URL alojada localmente.

Hosting es parte de Firebase Local Emulator Suite, que permite que la app interactúe con tu contenido de Hosting emulado y y, opcionalmente, tus recursos de proyecto emulados (funciones, bases de datos y reglas).

  1. (Opcional) De forma predeterminada, tu aplicación alojada de forma local interactuará con los recursos del proyecto (funciones, base de datos, reglas, etc.) reales, no emulados. De manera opcional, puedes conectar tu app para que use cualquier recurso del proyecto emulado que hayas configurado. Más información: Realtime Database | Cloud Firestore | Cloud Functions

  2. Desde la raíz del directorio del proyecto local, ejecuta el siguiente comando:

    firebase emulators:start

  3. Abre tu aplicación web en la URL local que muestra la CLI (generalmente http://localhost:5000).

  4. Para actualizar la URL local con los cambios, actualiza el navegador.

Realiza pruebas desde otros dispositivos locales

De forma predeterminada, los emuladores solo responden a las solicitudes de localhost. Esto significa que podrás acceder al contenido alojado mediante el navegador web de tu computadora, pero no desde otros dispositivos de la red. Si quieres realizar pruebas desde otros dispositivos locales, configura tu firebase.json de la siguiente manera:

"emulators": {
    // ...

    "hosting": {
      "port": 5000,
      "host": "0.0.0.0"
    }
  }

Paso 2: Obtén una vista previa y compártela

Si deseas que otras personas vean los cambios en tu app web antes de publicarlos, puedes usar los canales de vista previa.

Después de la implementación en un canal de vista previa, Firebase entrega tu app web en una “URL de vista previa”, que es una URL temporal que se puede compartir. Cuando usas una URL de vista previa, la app web interactúa con el backend real de todos los recursos del proyecto (excepto las funciones “fijadas” en la configuración de tus reescrituras).

Ten en cuenta que, aunque las URLs de vista previa son difíciles de adivinar (ya que contienen un hash aleatorio), son públicas. Por lo tanto, cualquier persona que conozca la URL puede acceder a ella.

  1. Desde la raíz del directorio del proyecto local, ejecuta el siguiente comando:

    firebase hosting:channel:deploy CHANNEL_ID

    Reemplaza CHANNEL_ID por una cadena sin espacios (por ejemplo, feature_mission-2-mars). Este ID se usará para crear la URL de vista previa asociada con el canal de vista previa.

  2. Abre la app web en la URL de vista previa que muestra la CLI. Será similar a esta: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Para actualizar la URL de la vista previa con cambios, ejecuta el mismo comando nuevamente. Asegúrate de especificar el mismo CHANNEL_ID en el comando.

Obtén más información sobre cómo administrar canales de vista previa, incluido cómo configurar el vencimiento de un canal.

Firebase Hosting admite una acción de GitHub que crea y actualiza una URL de vista previa cuando confirmas los cambios en una solicitud de extracción. Aprende a hacer lo siguiente: Configurar y usar esta acción de GitHub.

Paso 3: Implementa

Cuando estés listo para compartir tus cambios con todo el mundo, implementa tu Hosting. el contenido y la configuración de tu canal en vivo. Firebase ofrece varias opciones para este paso según tu caso de uso (consulta las opciones a continuación).

Opción 1: Realiza una clonación a partir del canal de vista previa en el canal publicado

Esta opción garantiza que implementes en tu canal publicado los mismos contenidos y configuración que probaste en un canal de vista previa. Obtén más información sobre la clonación de versiones.

  1. Desde cualquier directorio, ejecuta el siguiente comando:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    Reemplaza cada marcador de posición por lo siguiente:

    • SOURCE_SITE_ID y TARGET_SITE_ID: Estos son los IDs. de los Hosting sitios que contienen los canales.

      • En el sitio Hosting predeterminado, usa el ID del proyecto de Firebase.
      • Puedes especificar sitios que se encuentren en el mismo proyecto de Firebase o incluso en diferentes proyectos de Firebase.

    • SOURCE_CHANNEL_ID: Este es el identificador del canal que está entregando la versión que deseas implementar en tu canal publicado.

      • Para un canal publicado, usa live como ID de canal.

  2. Revisa tus cambios (paso siguiente).

Opción 2: Implementa desde el directorio de tu proyecto local hasta el canal publicado

Esta opción te brinda flexibilidad para ajustar la configuración específica del canal publicado o para realizar implementaciones, incluso si no usaste un canal de vista previa.

  1. Desde la raíz del directorio del proyecto local, ejecuta el siguiente comando:

    firebase deploy --only hosting

  2. Revisa tus cambios (paso siguiente).

Paso 4: Revisa los cambios en el sitio publicado

Ambas opciones anteriores implementan tu contenido y configuración de Hosting en la los siguientes sitios:

  • Los subdominios aprovisionados por Firebase para tu sitio Hosting predeterminado y cualquier Hosting sitios adicionales:
    SITE_ID.web.app (como PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (como PROJECT_ID.firebaseapp.com)

  • Cualquier dominio personalizado al que te hayas conectado sus sitios de Hosting

Para restringir la implementación a un sitio de Hosting específico, haz lo siguiente: especificar un destino de implementación en tu comando de la CLI.

Otra información y actividades de implementación

Agrega un comentario para la implementación

De manera opcional, puedes agregar un comentario a la implementación. Este comentario se mostrará con el ícono más información sobre la implementación Panel de Hosting en la consola de Firebase. Por ejemplo:

firebase deploy --only hosting -m "Deploying the best new feature ever."

Agrega tareas de secuencia de comandos previas y posteriores a la implementación

De manera opcional, puedes conectar secuencias de comandos de shell al comando firebase deploy para realizar tareas previas a la implementación o posteriores a ella. Por ejemplo, una trampa posterior a la implementación podría notificar a los administradores cuando se implementa contenido nuevo del sitio. Consulta las Documentación de la CLI de Firebase para obtener más detalles.

Almacena en caché el contenido implementado

Cuando se hace una solicitud de contenido estático, Firebase Hosting automáticamente almacena en caché el contenido en la CDN. Si vuelves a implementar el contenido de tu sitio, Firebase borra automáticamente todo el contenido estático almacenado en caché en la CDN para que reciben tu nuevo contenido.

Ten en cuenta que puedes configurar el almacenamiento en caché del contenido dinámico.

Realiza entregas mediante HTTPS

Asegúrate de que todos los recursos externos que no estén alojados en Los Firebase Hosting se cargan a través de SSL (HTTPS),incluidas las secuencias de comandos externas. La mayoría de los navegadores no permiten que los usuarios carguen “contenido mixto” (tráfico SSL y no SSL).

Borra archivos

En Firebase Hosting, la forma principal de borrar archivos seleccionados desde un sitio implementado es borrar los archivos de forma local y, luego, volver a implementarlos.

Próximos pasos