Prototyper et tester des applications Web avec l'émulateur d'hébergement Firebase

Avant de commencer à prototyper et à tester votre application Web avec l'émulateur Firebase Hosting, assurez-vous de bien comprendre le flux de travail global de Firebase Local Emulator Suite , d' installer et de configurer Local Emulator Suite et de consulter ses commandes CLI .

Vous devez également être familier avec les fonctionnalités et le flux de travail de mise en œuvre de Firebase Hosting. Commencez par l' introduction à Firebase Hosting .

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

L'émulateur Firebase Hosting fournit une émulation locale haute fidélité des services d'hébergement, fournissant une grande partie des fonctionnalités trouvées dans l'hébergement de production . L'émulateur d'hébergement vous permet de :

  • Prototypez vos sites statiques et vos applications Web sans encourir de frais de stockage ou d'accès
  • Prototyper, tester et déboguer les fonctions HTTPS avant de les déployer sur votre site d'hébergement
  • Testez les sites et les applications Web dans des workflows d'intégration continue et conteneurisés.

Choisissez un projet Firebase

La suite Firebase Local Emulator émule les produits pour un seul projet Firebase.

Pour sélectionner le projet à utiliser, avant de démarrer les émulateurs, dans la CLI, firebase use dans votre répertoire de travail. Vous pouvez également transmettre l'indicateur --project à chaque commande d'émulateur.

Local Emulator Suite prend en charge l'émulation de projets Firebase réels et de projets de démonstration .

Type de projet Caractéristiques Utiliser avec des émulateurs
Réel

Un vrai projet Firebase est celui que vous avez créé et configuré (très probablement via la console Firebase).

Les projets réels disposent de ressources actives, telles que des instances de base de données, des compartiments de stockage, des fonctions ou toute autre ressource que vous avez configurée pour ce projet Firebase.

Lorsque vous travaillez avec de vrais projets Firebase, vous pouvez exécuter des émulateurs pour tout ou partie des produits pris en charge.

Pour tous les produits que vous n'émulez pas, vos applications et votre code interagiront avec la ressource active (instance de base de données, compartiment de stockage, fonction, etc.).

Démo

Un projet de démonstration Firebase n'a pas de véritable configuration Firebase ni de ressources actives. Ces projets sont généralement accessibles via des ateliers de programmation ou d'autres didacticiels.

Les ID de projet pour les projets de démonstration portent le préfixe demo- .

 Lorsque vous travaillez avec des projets de démonstration Firebase, vos applications et votre code interagissent uniquement avec les émulateurs . Si votre application tente d'interagir avec une ressource pour laquelle aucun émulateur n'est exécuté, ce code échouera.

Nous vous recommandons d'utiliser des projets de démonstration dans la mesure du possible. Les avantages comprennent :

  • Configuration plus simple, puisque vous pouvez exécuter les émulateurs sans jamais créer de projet Firebase
  • Sécurité renforcée, car si votre code appelle accidentellement des ressources (de production) non émulées, il n'y a aucune chance de modification, d'utilisation et de facturation des données.
  • Meilleure prise en charge hors ligne, puisqu'il n'est pas nécessaire d'accéder à Internet pour télécharger la configuration de votre SDK.

Flux de travail de prototypage de base

Si vous effectuez des itérations rapides ou si vous souhaitez que votre application interagisse avec des ressources de projet backend émulées, vous pouvez tester votre contenu et votre configuration d'hébergement localement. Lors des tests locaux, Firebase diffuse votre application Web sur une URL hébergée localement.

  1. (Facultatif) Par défaut, votre application hébergée localement interagira avec les ressources réelles et non émulées du projet (fonctions, base de données, règles, etc.). À la place, vous pouvez éventuellement connecter votre application pour utiliser les ressources de projet émulées que vous avez configurées. En savoir plus : Base de données en temps réel | Cloud Firestore | Fonctions cloud

  2. Depuis la racine du répertoire de votre projet local, exécutez la commande suivante :

    firebase emulators:start

  3. Ouvrez votre application Web à l'URL locale renvoyée par la CLI (généralement http://localhost:5000 ).

  4. Pour mettre à jour l'URL locale avec les modifications, actualisez votre navigateur.

Test à partir d'autres appareils locaux

Par défaut, les émulateurs répondent uniquement aux requêtes de localhost . Cela signifie que vous pourrez accéder à votre contenu hébergé depuis le navigateur Web de votre ordinateur, mais pas depuis d'autres appareils de votre réseau. Si vous souhaitez tester à partir d'autres appareils locaux, configurez votre firebase.json comme ceci :

"emulators": {
    // ...

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

Générez des jetons d'authentification pour les flux de travail d'intégration continue

Si vos workflows d'intégration continue reposent sur Firebase Hosting, vous devrez alors vous connecter à l'aide d'un jeton afin d'exécuter firebase emulators:exec . Les autres émulateurs ne nécessitent pas de connexion.

Pour générer un jeton, exécutez firebase login:ci sur votre environnement local ; cela ne doit pas être effectué à partir d’un système CI. Suivez les instructions pour vous authentifier. Vous ne devriez avoir besoin d'effectuer cette étape qu'une seule fois par projet, car le jeton sera valide dans toutes les versions. Le jeton doit être traité comme un mot de passe ; assurez-vous que cela reste secret.

Si votre environnement CI vous permet de spécifier des variables d'environnement pouvant être utilisées dans les scripts de construction, créez simplement une variable d'environnement appelée FIREBASE_TOKEN , dont la valeur est la chaîne du jeton d'accès. La CLI Firebase récupérera automatiquement la variable d'environnement FIREBASE_TOKEN et les émulateurs démarreront correctement.

En dernier recours, vous pouvez simplement inclure le jeton dans votre script de build, mais assurez-vous que les parties non fiables n'y ont pas accès. Pour cette approche codée en dur, vous pouvez ajouter --token "YOUR_TOKEN_STRING_HERE" à la commande firebase emulators:exec .

Et ensuite ?