Prueba la implementación de tu app de forma local

Puedes realizar pruebas locales de tu app antes de la implementación de App Hosting con el emulador de App Hosting, que forma parte de Firebase Local Emulator Suite.

Antes de usar el emulador de App Hosting, asegúrate de comprender el flujo de trabajo general de Local Emulator Suite de Firebase y de instalar y configurar Local Emulator Suite, y revisa sus comandos de CLI.

En este tema, se supone que ya conoces App Hosting. Si es necesario, revisa la introducción a App Hosting y otros materiales para comprender cómo funciona App Hosting.

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

El emulador de App Hosting te permite probar y definir mejor tus aplicaciones web de forma local. Esto puede optimizar tu proceso de desarrollo y mejorar la calidad de las apps web compiladas con Firebase y que se implementan en App Hosting.

El emulador de App Hosting:

  1. Te permite ejecutar tu app web de forma local, con variables de entorno definidas en los archivos de configuración apphosting.yaml.
  2. Puede exportar los secretos que guardaste en tus diferentes entornos de App Hosting, lo que te permite simular aplicaciones en diferentes entornos.
  3. Se puede usar junto con otros emuladores de Firebase. Si usas Firestore, Auth o cualquier otro emulador, Local Emulator Suite se asegura de que estos emuladores se inicien antes que el emulador de App Hosting.

Cómo configurar el emulador

Para comenzar, instala y inicializa el Local Emulator Suite como se describe en Instala, configura e integra Local Emulator Suite. Además de cualquier otro emulador de Firebase que desees configurar, asegúrate de seleccionar App Hosting Emulator. La CLI te solicita algunos valores del emulador de App Hosting, como los siguientes:

  • El directorio raíz de tu app en relación con el proyecto. Esto es importante si usas monorepos con App Hosting.
  • Si quieres exportar secretos para entornos específicos.
firebase init emulators
=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ App Hosting Emulator
 ◯ Firestore Emulator
 ◯ Database Emulator
 ◯ Hosting Emulator
 ◯ Pub/Sub Emulator
 ◯ Storage Emulator
 ◯ Eventarc Emulator
(Move up and down to reveal more choices)

? Specify your app's root directory relative to your project (.)

? What configs would you like to export? (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ❯◯ Secrets

? Which environment would you like to export secrets from Secret Manager for?:
  ◯ base (apphosting.yaml)
 ❯◯ staging (apphosting.yaml + apphosting.staging.yaml)
  ◯ preview (apphosting.yaml + apphosting.preview.yaml)

i Wrote Secrets as environment variables to apphosting.local.yaml.
i apphosting.local.yaml has been automatically added to your .gitignore.

Los valores que proporciones en este flujo de configuración se usarán para actualizar la configuración del emulador de App Hosting en firebase.json. También puedes actualizar firebase.json directamente para configurar el emulador de App Hosting. El esquema del emulador de App Hosting es el siguiente:

{
  ...
  "emulators": {
    "apphosting": {
      "startCommandOverride": <command> [optional]
      "rootDirectory": <path> [optional]
      }
    }
  }
  • startCommandOverride se genera y se establece automáticamente cuando se inicializa el emulador. Si no se proporciona, el emulador detectará y ejecutará el comando dev de tu administrador de paquetes.
  • rootDirectory se usa para admitir configuraciones de proyectos de monorepo. Si tu app web está en un subdirectorio, debes proporcionar la ruta de acceso de ese directorio en relación con la raíz (la ubicación de firebase.json).

Administra la emulación

La inicialización del emulador crea un archivo apphosting.local.yaml en el directorio raíz de la app. Este archivo de configuración tiene el mismo esquema que el archivo apphosting.yaml que se usa en producción, pero está destinado estrictamente al desarrollo local. De forma predeterminada, el emulador lee la configuración de tu archivo apphosting.yaml, pero si hay un archivo apphosting.local.yaml, las configuraciones de ese archivo se priorizan y se les da prioridad.

Exporta secretos para simular diferentes entornos de forma local

Si trabajas con varios entornos y deseas simular diferentes entornos de apps de forma local, es posible que necesites los secretos de los entornos correspondientes. Puedes exportar secretos para un entorno específico con el comando apphosting:config:export de la CLI (como se muestra en Cómo configurar el emulador, de forma opcional, puedes importar secretos durante la inicialización del emulador).

Este comando requiere que selecciones uno de los entornos App Hosting disponibles de tu proyecto. La configuración de App Hosting específica del entorno (por ejemplo, "apphosting.staging.yaml") y la configuración de App Hosting base ("apphosting.yaml") se combinan, y la configuración específica del entorno tiene prioridad. Si existen secretos con el mismo nombre en ambas configuraciones, se usa el secreto de la configuración específica del entorno.

Por ejemplo, para exportar secretos al emulador desde un entorno de pruebas, haz lo siguiente:

firebase apphosting:config:export --project <your firebase project Id>

? What configs would you like to export? (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ❯◯ Secrets

? Which environment would you like to export secrets from Secret Manager for?:
  ◯ base (apphosting.yaml)
 ❯◯ staging (apphosting.yaml + apphosting.staging.yaml)
  ◯ preview (apphosting.yaml + apphosting.preview.yaml)
i Wrote Secrets as environment variables to apphosting.local.yaml.
i apphosting.local.yaml has been automatically added to your .gitignore.

Tu archivo apphosting.local.yaml se actualiza (o se crea si no existe) con los secretos exportados como variables de entorno. Debido a que el archivo ahora contiene información sensible en texto sin formato, se agregará automáticamente a tu archivo .gitignore para evitar que se confirme accidentalmente en tu repositorio de código fuente.

Ejecuta el emulador

firebase emulators:start

Esto iniciará todos los emuladores definidos en tu archivo firebase.json, incluido el emulador App Hosting.