Avant de commencer à créer des prototypes et à tester votre application Web avec l'émulateur Firebase Hosting, assurez-vous de comprendre le workflow global de Firebase Local Emulator Suite, et d'installer et configurer Local Emulator Suite, puis d'examiner ses commandes CLI.
Vous devez également connaître les fonctionnalités et le workflow d'implémentation 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 Hosting, offrant en grande partie les fonctionnalités de la production Hosting. L'émulateur Hosting vous permet d'effectuer les actions suivantes :
- Créez des prototypes de vos sites et applications Web statiques sans encourir de frais de stockage ou d'accès.
- Prototyper, tester et déboguer des fonctions HTTPS avant de les déployer sur votre site d'hébergement
- Tester des sites et des applications Web dans des workflows d'intégration continue conteneurisés
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 firebase use dans votre répertoire de travail dans la CLI. Vous pouvez également transmettre l'option --project à chaque commande de l'émulateur.
Local Emulator Suite est compatible avec l'émulation de projets Firebase réels et de projets de démonstration.
| 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é (probablement via la console Firebase). Les projets réels disposent de ressources en ligne, comme des instances de base de données, des buckets de stockage, des fonctions ou toute autre ressource que vous configurez pour ce projet Firebase. |
Lorsque vous travaillez sur des projets Firebase réels, vous pouvez exécuter des émulateurs pour tout ou partie des produits compatibles. Pour tous les produits que vous n'émulez pas, vos applications et votre code interagissent avec la ressource en direct (instance de base de données, bucket de stockage, fonction, etc.). |
| Démo |
Un projet Firebase de démonstration ne comporte aucune configuration réelle de Firebase et aucune ressource en ligne. Pour accéder à ces projets, vous devez généralement utiliser des ateliers de programmation ou d'autres tutoriels. Les ID de projet des projets de démonstration portent le préfixe |
Lorsque vous travaillez avec des projets Firebase de démonstration, vos applications et votre code n'interagissent qu'avec des émulateurs. Si votre application tente d'interagir avec une ressource pour laquelle aucun émulateur n'est en cours d'exécution, ce code échouera. |
Dans la mesure du possible, nous vous recommandons d'utiliser des projets de démonstration. Voici quelques-uns de ses avantages :
- Configuration plus simple, car vous pouvez exécuter les émulateurs sans avoir à créer un projet Firebase
- Sécurité renforcée, car si votre code appelle accidentellement des ressources non émulées (de production), il n'y a aucune chance de modification, d'utilisation et de facturation des données.
- Meilleure compatibilité hors connexion, car vous n'avez pas besoin d'accéder à Internet pour télécharger la configuration de votre SDK.
Workflow de prototypage principal
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 Hosting localement. Lors des tests en local, Firebase diffuse votre application Web sur une URL hébergée localement.
(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.). 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
À partir de la racine du répertoire de votre projet local, exécutez la commande suivante :
firebase emulators:start
Ouvrez votre application Web à l'URL locale renvoyée par la CLI (généralement
http://localhost:5000).Pour mettre à jour l'URL locale avec les modifications, actualisez votre navigateur.
Tester depuis d'autres appareils locaux
Par défaut, les émulateurs ne répondent qu'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 effectuer des tests à partir d'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 reposent sur Firebase Hosting, vous devrez vous connecter à l'aide d'un jeton pour exécuter firebase emulators:exec. Les autres émulateurs ne nécessitent aucune connexion.
Pour générer un jeton, exécutez firebase login:ci dans votre environnement local. Cette opération ne doit pas être effectuée à 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 pour tous les builds. 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 CLI Firebase détecte automatiquement la variable d'environnement FIREBASE_TOKEN, et les émulateurs démarrent correctement.
En dernier recours, vous pouvez simplement inclure le jeton dans votre script de compilation, mais assurez-vous que les parties non approuvées 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 maintenant ?
- Suivez un guide de démarrage rapide avec l'émulateur Hosting en suivant l'atelier de programmation Web sur Firebase.
- Découvrez comment créer des prototypes de fonctions HTTPS à l'aide de l'émulateur Hosting, comme décrit dans les guides d'hébergement pour les fonctions.
- Pour découvrir un ensemble organisé de vidéos et d'exemples détaillés, suivez la playlist de formation sur les émulateurs Firebase.