Concevoir et tester des applications Web avec l'émulateur Firebase Hosting

Avant de commencer le prototypage et le test de votre application Web avec Firebase Hosting, assurez-vous de comprendre le workflow Firebase Local Emulator Suite global, et que vous installez et configurez Local Emulator Suite et examinez ses commandes CLI.

Vous devez aussi vous familiariser avec les fonctionnalités et le workflow d'implémentation. pour Firebase Hosting. Commencez par les présentation de Firebase Hosting.

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

L'émulateur Firebase Hosting fournit une émulation locale haute fidélité de les services Hosting, offrant en grande partie les fonctionnalités proposées par Hosting de production. L'émulateur Hosting vous permet:

  • Prototypez vos applications et sites statiques sans générer de ressources de stockage ni d'accès frais
  • Prototypez, testez et déboguez les fonctions HTTPS avant de les déployer sur votre hébergement site
  • Testez des sites et des applications Web dans des workflows conteneurisés d'intégration continue.

Sélectionner un projet Firebase

Firebase Local Emulator Suite émule des produits pour un seul projet Firebase.

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

Local Emulator Suite accepte l'émulation de projets Firebase réels et demo.

Type de projet Fonctionnalités Utiliser avec des émulateurs
Situation réelle

Un projet Firebase réel est un projet que vous avez créé et configuré via la console Firebase).

Les projets réels ont des ressources actives, telles que des instances de base de données, des espaces de stockage des buckets, des fonctions ou toute autre ressource configurée pour ce projet.

Lorsque vous travaillez sur de vrais projets Firebase, vous pouvez exécuter des émulateurs pour ou tous les produits pris en charge.

Pour les produits que vous n'émulez pas, vos applications et votre code interagir avec la ressource active (instance de base de données, espace de stockage un bucket, une fonction, etc.).

Démo

Un projet Firebase de démonstration n'a pas de configuration Firebase réelle. aucune ressource active. Ces projets sont généralement accessibles via des ateliers de programmation ou d'autres tutoriels.

Les ID des projets de démonstration comportent le préfixe demo-.

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

Nous vous recommandons d'utiliser des projets de démonstration autant que possible. Voici quelques-uns de ses avantages :

  • Configuration simplifiée, puisque vous pouvez exécuter les émulateurs sans avoir à créer Projet Firebase
  • Sécurité renforcée, car si votre code appelle accidentellement des applications non émulées (production), il n'y a aucun risque de modification des données, d'utilisation ni de facturation.
  • Meilleure gestion hors connexion, puisqu'il n'est pas nécessaire d'accéder à Internet téléchargez la configuration de votre SDK.

Workflow de prototypage principal

Si vous effectuez des itérations rapides ou si vous souhaitez que votre application interagit ressources de projet backend émulées, vous pouvez tester votre contenu Hosting et en local. Lorsque vous effectuez des tests en local, Firebase diffuse votre application Web URL hébergée.

  1. (Facultatif) Par défaut, votre application hébergée localement interagit avec de vraies, non émulées, les ressources du projet (fonctions, base de données, règles, etc.). Vous pouvez également connecter votre application à n'importe quelle ressource de projet émulée que vous avez configurée. En savoir plus: Realtime Database | Cloud Firestore | Cloud Functions

  2. À partir de la racine du répertoire local de votre projet, 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.

Tester à partir d'autres appareils locaux

Par défaut, les émulateurs ne répondent qu'aux requêtes provenant de localhost. Ce signifie que vous pouvez accéder à votre contenu hébergé depuis le navigateur Web de votre ordinateur dans votre navigateur, mais pas à partir d'autres appareils de votre réseau. Si vous souhaitez effectuer un test à partir autres appareils locaux, configurez votre firebase.json comme suit:

"emulators": {
    // ...

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

Générer des jetons d'authentification pour les workflows d'intégration continue

Si vos workflows d'intégration continue s'appuient sur Firebase Hosting, devez vous connecter à l'aide d'un jeton pour exécuter firebase emulators:exec. La les autres émulateurs ne nécessitent pas de connexion.

Pour générer un jeton, exécutez firebase login:ci sur votre environnement local. ce ne doivent pas être effectuées à partir d'un système CI. Suivez les instructions pour vous authentifier. Vous n'aurez besoin d'effectuer cette étape qu'une seule fois par projet, car le jeton être valide d'une compilation à l'autre. Le jeton doit être traité comme un mot de passe. Veillez à le garder secret.

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

En dernier recours, vous pouvez simplement inclure le jeton dans votre script de compilation, vous assurer que les tiers non fiables n’y ont pas accès. Pour cette couche codée en dur, vous pouvez ajouter --token "YOUR_TOKEN_STRING_HERE" au firebase emulators:exec.

Et maintenant ?