Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Probar localmente, compartir cambios y luego implementar en vivo

Antes de implementar en su sitio en vivo, querrá ver y probar sus cambios. Firebase Hosting te permite ver y probar los cambios de forma local e interactuar con los recursos del proyecto de backend emulado. 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 apoyamos una integración GitHub para desplegar a partir de una solicitud de extracción.

Antes de que empieces

Completar los pasos que se indican en la página de alojamiento Cómo empezar , 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 los recursos del proyecto de backend emulado, puede probar el contenido y la configuración de Hosting localmente. Al realizar pruebas localmente, Firebase muestra su aplicación web en una URL alojada localmente.

Hosting es parte de la Firebase local emulador suite , que permite a su aplicación para interactuar con su contenido emulado de alojamiento y de configuración, así como, opcionalmente, sus recursos del proyecto emulados (funciones, bases de datos y reglas).

  1. (Opcional) Por defecto, su aplicación alojada localmente interactuará con real, no emulado, los recursos del proyecto (funciones, bases de datos, reglas, etc.). En su lugar, se puede conectar opcionalmente a su aplicación para utilizar los recursos del proyecto emulados que ha configurado. Más información: en tiempo real de base de datos | Nube Firestore | Funciones en la nube

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

    firebase emulators:start
  3. Abra su aplicación web en el local URL devuelto por el CLI (generalmente http://localhost:5000 ).

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

Prueba desde otros dispositivos locales

De manera predeterminada, los emuladores sólo responden a las peticiones 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 prueba desde otros dispositivos locales, configure su firebase.json de este modo:

"emulators": {
    // ...

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

Paso 2: Vista previa y la participación

Si desea que otros vean los cambios en su aplicación web antes de publicarla, puede usar los 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 se utiliza una URL de vista previa, sus interactúa aplicación web con su base de verdadera para todos los recursos del proyecto.

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

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

    firebase hosting:channel:deploy CHANNEL_ID

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

Aprender acerca de la gestión de canales de vista previa , incluida la configuración de caducidad de un canal.

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

Paso 3: Implementar en directo

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 de un canal de vista previa a su canal en vivo

Esta opción proporciona la confianza de que va a implementar a su canal en vivo el contenido exacto y la configuración que la prueba en un canal de vista previa. 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 alojamiento que contienen los canales.

      • Para su sitio de alojamiento 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 para el canal que actualmente cumple la versión que desea implementar en su canal en vivo.

      • Para un canal en vivo, utilice live como ID de canal.
  2. Ver los cambios (paso siguiente).

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

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

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

    firebase deploy --only hosting
  2. Ver los cambios (paso siguiente).

Paso 4: ver los cambios en su sitio en vivo

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

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

  • Cualquier dominios personalizados que ha conectado a su sitio de alojamiento (s)

Para limitar el despliegue de un sitio de alojamiento específico, especificar un destino de despliegue en su comando CLI.

Otras actividades e información de implementación

Agrega un comentario para la implementación

Opcionalmente, puede agregar un comentario a una implementación. Este comentario se mostrará con la otra información de implementación en el panel de control de alojamiento en la consola Firebase. Por ejemplo:

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

Agregue tareas programadas antes y después de la implementación

Puede opcionalmente secuencias de comandos shell de conexión a la firebase deploy de comandos para realizar tareas predeploy o postdeploy. Por ejemplo, un enlace posterior a la implementación podría notificar a los administradores sobre las implementaciones de contenido de un sitio nuevo. Consulte la documentación de Firebase CLI para más detalles.

Almacenamiento en caché de contenido implementado

Cuando se realiza una solicitud para el contenido estático, Firebase Hosting almacena en caché de forma automática el contenido de la CDN. Si vuelve a implementar el contenido de su sitio, Firebase elimina automáticamente todo el contenido almacenado en caché estática a través de la CDN para que las nuevas solicitudes reciben su nuevo contenido.

Tenga en cuenta que se 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), incluidas las secuencias de comandos externas. La mayoría de los navegadores no permiten a los usuarios cargar "contenido mixto" (tráfico SSL y no SSL).

Próximos pasos