Cree prototipos y pruebe aplicaciones web con Firebase Hosting Emulator

Antes de comenzar a crear prototipos y probar su aplicación web con el emulador de Firebase Hosting, asegúrese de comprender el flujo de trabajo general de Firebase Local Emulator Suite , de instalar y configurar Local Emulator Suite y de revisar sus comandos CLI .

También debe estar familiarizado con las funciones y el flujo de trabajo de implementación de Firebase Hosting. Comience con la introducción a Firebase Hosting .

¿Qué puedo hacer con el emulador de Firebase Hosting?

El emulador de Firebase Hosting proporciona emulación local de alta fidelidad de servicios de Hosting, proporcionando gran parte de la funcionalidad que se encuentra en el Hosting de producción . El emulador de Hosting te permite:

  • Cree prototipos de sus sitios estáticos y aplicaciones web sin incurrir en cargos de almacenamiento o acceso
  • Prototipo, pruebe y depure funciones HTTPS antes de implementarlas en su sitio de hosting
  • Pruebe sitios y aplicaciones web en flujos de trabajo de integración continua y en contenedores.

Elige un proyecto de Firebase

Firebase Local Emulator Suite emula productos para un único proyecto de Firebase.

Para seleccionar el proyecto a usar, antes de iniciar los emuladores, en la CLI ejecute firebase use en su directorio de trabajo. O puede pasar el indicador --project a cada comando del emulador.

Local Emulator Suite admite la emulación de proyectos reales de Firebase y proyectos de demostración .

Tipo de proyecto Características Usar con emuladores
Real

Un proyecto real de Firebase es uno que usted creó y configuró (muy probablemente a través de la consola de Firebase).

Los proyectos reales tienen recursos activos, como instancias de bases de datos, depósitos de almacenamiento, funciones o cualquier otro recurso que configure para ese proyecto de Firebase.

Cuando trabajas con proyectos reales de Firebase, puedes ejecutar emuladores para cualquiera o todos los productos compatibles.

Para cualquier producto que no esté emulando, sus aplicaciones y código interactuarán con el recurso activo (instancia de base de datos, depósito de almacenamiento, función, etc.).

Manifestación

Un proyecto de demostración de Firebase no tiene una configuración real de Firebase ni recursos activos. Por lo general, se accede a estos proyectos a través de codelabs u otros tutoriales.

Los ID de proyecto para proyectos de demostración tienen el prefijo demo- .

 Cuando trabajas con proyectos de demostración de Firebase, tus aplicaciones y código interactúan solo con emuladores. Si su aplicación intenta interactuar con un recurso para el cual no se está ejecutando un emulador, ese código fallará.

Le recomendamos que utilice proyectos de demostración siempre que sea posible. Beneficios incluidos:

  • Configuración más sencilla, ya que puedes ejecutar los emuladores sin tener que crear un proyecto de Firebase.
  • Mayor seguridad, ya que si su código invoca accidentalmente recursos (de producción) no emulados, no hay posibilidad de cambio de datos, uso y facturación.
  • Mejor soporte fuera de línea, ya que no es necesario acceder a Internet para descargar la configuración del SDK.

Flujo de trabajo principal de creación de prototipos

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.

  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"
    }
  }

Genere tokens de autenticación para flujos de trabajo de integración continua

Si sus flujos de trabajo de integración continua dependen de Firebase Hosting, deberá iniciar sesión con un token para poder ejecutar firebase emulators:exec . Los otros emuladores no requieren iniciar sesión.

Para generar un token, ejecute firebase login:ci en su entorno local; Esto no debe realizarse desde un sistema CI. Siga las instrucciones para autenticarse. Solo deberías necesitar realizar este paso una vez por proyecto, ya que el token será válido en todas las compilaciones. El token debe tratarse como una contraseña; asegúrese de que se mantenga en secreto.

Si su entorno de CI le permite especificar variables de entorno que se pueden usar en los scripts de compilación, simplemente cree una variable de entorno llamada FIREBASE_TOKEN , cuyo valor sea la cadena del token de acceso. Firebase CLI seleccionará automáticamente la variable de entorno FIREBASE_TOKEN y los emuladores se iniciarán correctamente.

Como último recurso, puede simplemente incluir el token en su script de compilación, pero asegúrese de que las partes que no son de confianza no tengan acceso. Para este enfoque codificado, puede agregar --token "YOUR_TOKEN_STRING_HERE" al comando firebase emulators:exec .

¿Qué sigue?