Pruebe su aplicación web localmente, comparta los cambios con otros y luego impleméntela en vivo

Antes de implementarlo en su sitio en vivo, querrá ver y probar sus cambios. Firebase Hosting te permite ver y probar cambios localmente e interactuar con recursos de proyectos backend emulados. Si necesita que sus compañeros de equipo vean y prueben sus cambios, Hosting puede crear URL de vista previa temporales y compartibles para su sitio. Incluso admitimos una integración de GitHub para implementar desde una solicitud de extracción.

Antes de que empieces

Complete los pasos enumerados en la página Introducción a Hosting , específicamente las siguientes tareas:

  1. Instale o actualice Firebase CLI a su última versión.
  2. Conecte el directorio del proyecto local (que contiene el contenido de su aplicación) a su proyecto de Firebase.

Opcionalmente, puede implementar el contenido y la configuración de Hosting de su aplicación, pero no es un requisito previo para los pasos de esta página.

Paso 1: prueba localmente

Si está realizando iteraciones rápidas o desea que su aplicación interactúe con recursos de proyectos de backend emulados, puede probar el contenido y la configuración de su alojamiento localmente. Al realizar pruebas localmente, Firebase ofrece su aplicación web en una URL alojada localmente.

Hosting es parte de Firebase Local Emulator Suite , que permite que su aplicación interactúe con su contenido y configuración de Hosting emulado , así como, opcionalmente, con los recursos de su proyecto emulado (funciones, bases de datos y reglas).

  1. (Opcional) De forma predeterminada, su aplicación alojada localmente interactuará con recursos del proyecto reales , no emulados (funciones, bases de datos, reglas, etc.). En su lugar, opcionalmente puedes conectar tu aplicación para usar cualquier recurso de proyecto emulado que hayas configurado. Más información: Base de datos en tiempo real | Tienda de fuego en la nube | Funciones de la nube

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

    firebase emulators:start

  3. Abra su aplicación web en la URL local devuelta por la CLI (normalmente http://localhost:5000 ).

  4. Para actualizar la URL local con cambios, actualice su navegador.

Prueba desde otros dispositivos locales

De forma predeterminada, los emuladores solo responden a solicitudes de localhost . Esto significa que podrá acceder a su contenido alojado desde el navegador web de su computadora, pero no desde otros dispositivos en su red. Si desea realizar la prueba desde otros dispositivos locales, configure su firebase.json de esta manera:

"emulators": {
    // ...

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

Paso 2: Vista previa y compartir

Si desea que otros vean los cambios en su aplicación web antes de publicarla, puede utilizar canales de vista previa.

Después de implementar en un canal de vista previa, Firebase muestra su aplicación web en una "URL de vista previa", que es una URL temporal que se puede compartir. Cuando utiliza una URL de vista previa, su aplicación web interactúa con su backend real para todos los recursos del proyecto (con la excepción de cualquier función "fijada" en su configuración de reescritura ).

Tenga en cuenta que, aunque las URL de vista previa son difíciles de adivinar (ya que contienen un hash aleatorio), son públicas. Así, cualquiera que conozca la URL podrá acceder a ella.

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

    firebase hosting:channel:deploy CHANNEL_ID

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

  2. Abra su aplicación web en la URL de vista previa devuelta por la CLI. Se verá algo como esto: PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

  3. Para actualizar su URL de vista previa con cambios, ejecute el mismo comando nuevamente. Asegúrese de especificar el mismo CHANNEL_ID en el comando.

Obtenga información sobre cómo administrar canales de vista previa , incluido cómo configurar la caducidad de un canal.

Firebase Hosting admite una acción de GitHub que crea y actualiza automáticamente una URL de vista previa cuando confirmas cambios en una solicitud de extracción. Aprenda cómo configurar y utilizar esta acción de GitHub .

Paso 3: Implementación en vivo

Cuando esté listo para compartir sus cambios con el mundo, implemente su contenido y configuración de Hosting en su canal en vivo. Firebase ofrece un par de opciones diferentes para este paso según su caso de uso (consulte las opciones a continuación).

Opción 1: clonar desde un canal de vista previa a tu canal en vivo

Esta opción brinda la confianza de que está implementando en su canal en vivo el contenido y la configuración exactos que probó en un canal de vista previa. Obtenga más información sobre la clonación de versiones .

  1. Desde cualquier directorio, ejecute el siguiente comando:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    Reemplace cada marcador de posición con lo siguiente:

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

      • Para su sitio de hosting predeterminado, use su ID de proyecto de Firebase.
      • Puede especificar sitios que estén en el mismo proyecto de Firebase o incluso en diferentes proyectos de Firebase.

    • SOURCE_CHANNEL_ID : este es el identificador del canal que actualmente ofrece la versión que desea implementar en su canal en vivo.

      • Para un canal en vivo, use live como ID del canal.

  2. Vea sus cambios (siguiente paso).

Opción 2: Implementar desde el directorio de su proyecto local a su canal en vivo

Esta opción le brinda flexibilidad para ajustar configuraciones específicas del canal en vivo o implementarlas incluso si no ha utilizado un canal de vista previa.

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

    firebase deploy --only hosting

  2. Vea sus cambios (siguiente paso).

Paso 4: vea sus cambios en su sitio en vivo

Las dos opciones anteriores implementan su contenido y configuración de alojamiento en los siguientes sitios:

  • Los subdominios proporcionados por Firebase para su sitio de Hosting predeterminado y cualquier sitio de Hosting adicional:
    SITE_ID .web.app (como PROJECT_ID .web.app )
    SITE_ID .firebaseapp.com (como PROJECT_ID .firebaseapp.com )

  • Cualquier dominio personalizado que haya conectado a su(s) sitio(s) de alojamiento

Para restringir la implementación a un sitio de alojamiento específico, especifique un destino de implementación en su comando CLI.

Otras actividades e información de implementación.

Añadir un comentario para la implementación.

Opcionalmente, puede agregar un comentario a una implementación. Este comentario se mostrará con el resto de la información de implementación en el panel de Hosting de Firebase console. Por ejemplo:

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

Agregar tareas con script previas y posteriores a la implementación

Opcionalmente, puedes conectar scripts de shell al comando firebase deploy para realizar tareas previas o posteriores a la implementación. Por ejemplo, un enlace posterior a la implementación podría notificar a los administradores sobre la implementación de nuevos contenidos del sitio. Consulte la documentación de Firebase CLI para obtener más detalles.

Almacenamiento en caché del contenido implementado

Cuando se realiza una solicitud de contenido estático , Firebase Hosting almacena automáticamente 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 las nuevas solicitudes reciban tu nuevo contenido.

Tenga en cuenta que puede configurar el almacenamiento en caché de contenido dinámico .

Sirviendo a través de HTTPS

Asegúrese de que todos los recursos externos que no estén alojados en Firebase Hosting se carguen a través de SSL (HTTPS), incluidos los scripts externos. La mayoría de los navegadores no permiten a los usuarios cargar "contenido mixto" (tráfico SSL y no SSL).

Próximos pasos