Avant de déployer sur votre site en ligne, vous souhaiterez afficher et tester vos modifications. Firebase Hosting vous permet d'afficher et de tester les modifications localement et d'interagir avec les ressources de projet backend émulées. Si vous avez besoin que vos coéquipiers visualisent et testent vos modifications, Hosting peut créer des URL d'aperçu temporaires et partageables pour votre site. Nous prenons même en charge une intégration GitHub à déployer à partir d'une pull request.
Avant que tu commences
Effectuez les étapes répertoriées sur la page Démarrage de l'hébergement , en particulier les tâches suivantes :
- Installez ou mettez à jour la CLI Firebase vers sa dernière version.
- Connectez le répertoire du projet local (contenant le contenu de votre application) à votre projet Firebase.
Vous pouvez éventuellement déployer le contenu et la configuration d'hébergement de votre application, mais ce n'est pas une condition préalable pour les étapes de cette page.
Étape 1 : Testez localement
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.
L'hébergement fait partie de Firebase Local Emulator Suite , qui permet à votre application d'interagir avec votre contenu et votre configuration d'hébergement émulés , ainsi qu'éventuellement avec les ressources de votre projet émulé (fonctions, bases de données et règles).
(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
Depuis 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.
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"
}
}
Étape 2 : Prévisualiser et partager
Si vous souhaitez que d'autres personnes voient les modifications apportées à votre application Web avant de la mettre en ligne, vous pouvez utiliser les canaux de prévisualisation.
Après avoir déployé sur un canal de prévisualisation, Firebase diffuse votre application Web à une « URL de prévisualisation », qui est une URL temporaire et partageable. Lorsque vous utilisez une URL d'aperçu, votre application Web interagit avec votre véritable backend pour toutes les ressources du projet (à l'exception des fonctions "épinglées" dans votre configuration de réécriture ).
Notez que même si les URL d’aperçu sont difficiles à deviner (car elles contiennent un hachage aléatoire), elles sont publiques. Ainsi, toute personne connaissant l’URL peut y accéder.
Depuis la racine du répertoire de votre projet local, exécutez la commande suivante :
firebase hosting:channel:deploy CHANNEL_ID
Remplacez CHANNEL_ID par une chaîne sans espaces (par exemple,
feature_mission-2-mars
). Cet identifiant sera utilisé pour construire l'URL d'aperçu associée au canal d'aperçu.Ouvrez votre application Web à l'URL d'aperçu renvoyée par la CLI. Cela ressemblera à ceci :
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
Pour mettre à jour votre URL d'aperçu avec les modifications, exécutez à nouveau la même commande. Assurez-vous de spécifier le même CHANNEL_ID
dans la commande.
Étape 3 : Déployer en direct
Option 1 : Cloner d'une chaîne de prévisualisation vers votre chaîne en direct
Depuis n'importe quel répertoire, exécutez la commande suivante : firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live Remplacez chaque espace réservé par ce qui suit : SOURCE_SITE_ID et TARGET_SITE_ID : Ce sont les identifiants des sites d'hébergement qui contiennent les chaînes. Pour votre site d'hébergement par défaut, utilisez votre ID de projet Firebase. Vous pouvez spécifier des sites qui se trouvent dans le même projet Firebase ou même dans différents projets Firebase.
SOURCE_CHANNEL_ID : Il s'agit de l'identifiant de la chaîne qui diffuse actuellement la version que vous souhaitez déployer sur votre chaîne en direct. Pour une chaîne en direct, utilisez live
comme ID de chaîne.
Affichez vos modifications (étape suivante).
Option 2 : Déployer depuis le répertoire de votre projet local vers votre chaîne en direct
Depuis la racine du répertoire de votre projet local, exécutez la commande suivante : firebase deploy --only hosting Affichez vos modifications (étape suivante).
Étape 4 : Affichez vos modifications sur votre site en direct
Les sous-domaines fournis par Firebase pour votre site d'hébergement par défaut et tout site d'hébergement supplémentaire :
SITE_ID .web.app
(commePROJECT_ID .web.app
)
SITE_ID .firebaseapp.com
(commePROJECT_ID .firebaseapp.com
)Tous les domaines personnalisés que vous avez connectés à votre (vos) site(s) d'hébergement
Autres activités et informations de déploiement
Ajouter un commentaire pour le déploiement
firebase deploy --only hosting -m "Deploying the best new feature ever."
Ajouter des tâches scriptées avant et après le déploiement
firebase deploy
pour effectuer des tâches de pré-déploiement ou de post-déploiement. Par exemple, un hook post-déploiement pourrait informer les administrateurs du déploiement de nouveaux contenus de site. Reportez-vous à la documentation Firebase CLI pour plus de détails.
Mise en cache du contenu déployé
Servir via HTTPS
Prochaines étapes
Intégrez-le à GitHub et itérez votre contenu prévisualisé en configurant l'action GitHub . Découvrez d’autres capacités d’hébergement : Jetez un œil à la documentation complète de la Firebase CLI . Préparez-vous à lancer votre application : Configurez des alertes budgétaires pour votre projet dans la console Google Cloud. Surveillez le tableau de bord d'utilisation et de facturation dans la console Firebase pour obtenir une image globale de l'utilisation de votre projet sur plusieurs services Firebase. Vous pouvez également visiter le tableau de bord Utilisation de l'hébergement pour des informations d'utilisation plus détaillées. Consultez la liste de contrôle de lancement de Firebase .