Tester des applications Web localement avec l'émulateur Firebase App Hosting

Vous pouvez effectuer des tests locaux de votre application avant le déploiement de App Hosting à l'aide de l'émulateur App Hosting, qui fait partie de la suite d'émulateurs locaux Firebase.

Avant d'utiliser l'émulateur App Hosting, assurez-vous de comprendre le workflow global de Firebase Local Emulator Suite, d'installer et de configurer Local Emulator Suite, et de consulter ses commandes CLI.

Cette rubrique suppose que vous connaissez déjà App Hosting. Si nécessaire, consultez l'introduction à App Hosting et d'autres ressources pour vous aider à comprendre le fonctionnement de App Hosting.

Que puis-je faire avec l'émulateur App Hosting ?

L'émulateur App Hosting vous permet de tester et d'affiner vos applications Web en local. Cela peut simplifier votre processus de développement et améliorer la qualité des applications Web créées à l'aide de Firebase et déployées sur App Hosting.

L'émulateur App Hosting:

1. Vous permet d'exécuter votre application Web en local, avec des variables d'environnement définies dans des fichiers de configuration apphosting.yaml.
2. Peut exporter les secrets que vous avez enregistrés dans vos différents environnements App Hosting, ce qui vous permet de simuler des applications dans différents environnements.
3. Peut être utilisé avec d'autres émulateurs Firebase. Si vous utilisez Firestore, Auth ou tout autre émulateur, Local Emulator Suite s'assure que ces émulateurs sont démarrés avant l'émulateur App Hosting.

Configurer l'émulateur

Pour commencer, installez et initialisez Local Emulator Suite comme décrit dans la section Installer, configurer et intégrer la suite Local Emulator. En plus des autres émulateurs Firebase que vous souhaitez configurer, veillez à sélectionner App Hosting Emulator. La CLI vous invite à saisir certaines valeurs de l'émulateur App Hosting, y compris les suivantes:

• Le répertoire racine de votre application par rapport au projet. Ce paramètre est important si vous utilisez des monorepos avec App Hosting.
• Si vous souhaitez exporter des secrets pour des environnements spécifiques.

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.

Toutes les valeurs que vous fournissez dans ce flux de configuration sont utilisées pour mettre à jour la configuration de l'émulateur App Hosting dans firebase.json. Vous pouvez également configurer l'émulateur d'hébergement d'applications en mettant à jour firebase.json directement. Le schéma de l'émulateur App Hosting est le suivant:

{
  ...
  "emulators": {
    "apphosting": {
      "startCommandOverride": <command> [optional]
      "rootDirectory": <path> [optional]
      }
    }
  }

• startCommandOverride est généré et défini automatiquement lorsque l'émulateur est initialisé. Si elle n'est pas fournie, l'émulateur détecte et exécute la commande de développement de votre gestionnaire de paquets.
• rootDirectory est utilisé pour prendre en charge les configurations de projets monorepo. Si votre application Web se trouve dans un sous-répertoire, vous devez fournir le chemin d'accès de ce répertoire par rapport à la racine (emplacement de firebase.json).

Gérer l'émulation

L'initialisation de l'émulateur crée un fichier apphosting.local.yaml dans le répertoire racine de votre application. Ce fichier de configuration a le même schéma que le fichier apphosting.yaml utilisé en production, mais il est destiné uniquement au développement local. Par défaut, l'émulateur lit la configuration à partir de votre fichier apphosting.yaml, mais si un fichier apphosting.local.yaml est présent, les configurations de ce fichier sont priorisées et ont la priorité.

Exporter des secrets pour simuler différents environnements localement

Si vous travaillez avec plusieurs environnements et que vous souhaitez simuler différents environnements d'application localement, vous aurez peut-être besoin des secrets des environnements correspondants. Vous pouvez exporter des secrets pour un environnement spécifique à l'aide de la commande CLI apphosting:config:export (ou, comme indiqué dans la section Configurer l'émulateur, vous pouvez également importer des secrets lors de l'initialisation de l'émulateur).

Pour exécuter cette commande, vous devez sélectionner un environnement App Hosting disponible dans votre projet. La configuration App Hosting spécifique à l'environnement (par exemple, "apphosting.staging.yaml") et la configuration App Hosting de base ("apphosting.yaml") sont fusionnées, la configuration spécifique à l'environnement ayant la priorité. Si des secrets portant le même nom existent dans les deux configurations, le secret de la configuration spécifique à l'environnement est utilisé.

Par exemple, pour exporter des secrets vers l'émulateur à partir d'un environnement de préproduction:

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.

Votre fichier apphosting.local.yaml est mis à jour (ou créé s'il n'existe pas) avec les secrets exportés en tant que variables d'environnement. Comme le fichier contient désormais des informations sensibles en texte brut, il sera automatiquement ajouté à votre fichier .gitignore pour éviter qu'il ne soit accidentellement validé dans votre dépôt de code source.

Exécuter l'émulateur

firebase emulators:start

Tous les émulateurs définis dans votre fichier firebase.json, y compris l'émulateur App Hosting, seront démarrés.