Avant de les déployer sur votre site en ligne, vous devez examiner et tester vos modifications. Firebase Hosting vous permet d'afficher et de tester les modifications en local, et d'interagir avec des ressources de projet backend émulées. Si vous avez besoin que vos coéquipiers voient et testent vos modifications, Hosting peut créer des URL d'aperçu temporaires et partageables pour votre site. Nous acceptons même un Intégration GitHub à déployer à partir d'une méthode pull requête.
Avant de commencer
Suivez la procédure indiquée sur le Hosting Démarrer, en particulier la tâches suivantes:
- Installez ou mettez à jour la CLI Firebase vers sa dernière version.
- Connectez le répertoire local du projet (contenant le contenu de votre application) à votre projet Firebase.
Vous pouvez éventuellement déployer le contenu et la configuration Hosting de votre application, mais ne constituent pas une condition préalable pour les étapes de cette page.
Étape 1 : Effectuez des tests en local
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. Lorsque vous effectuez des tests en local, Firebase diffuse votre application Web dans un environnement hébergé localement URL.
Hosting fait partie de Firebase Local Emulator Suite, qui permet à votre application d'interagir avec votre contenu Hosting émulé et et éventuellement les ressources de votre projet émulées (fonctions, bases de données et règles).
(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
À partir de la racine du répertoire local de votre projet, 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 un test à partir
autres appareils locaux, configurez votre firebase.json
comme suit:
"emulators": {
// ...
"hosting": {
"port": 5000,
"host": "0.0.0.0"
}
}
Étape 2 : Prévisualiser et partager
Si vous souhaitez que d'autres utilisateurs puissent consulter les modifications apportées à votre application Web avant de les mettre en ligne, vous pouvez utiliser les canaux d'aperçu.
Une fois le déploiement effectué, Firebase diffuse votre application Web "preview URL" (URL d'aperçu) est une URL temporaire partageable. Lorsque vous utilisez une URL d'aperçu, Votre application Web interagit avec votre backend réel pour toutes les ressources du projet (avec à l'exception des "épinglés" dans vos réécritures ).
Bien que les URL d'aperçu soient difficiles à deviner (car elles contiennent une valeur aléatoire), (hachage), elles sont publiques. Ainsi, toute personne connaissant l'URL peut y accéder.
À partir de la racine du répertoire local de votre projet, 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 ID servira à créer 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. Elle aura l'apparence suivante : quelque chose comme ceci:
PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app
Pour mettre à jour l'URL d'aperçu, exécutez de nouveau la même commande. Marque veillez à spécifier le même
CHANNEL_ID
dans la commande.
Découvrez comment gérer les canaux de prévisualisation, y compris comment définir la date d'expiration d'un canal.
Firebase Hosting accepte une action GitHub qui crée et met à jour une URL d'aperçu lorsque vous validez les modifications apportées à une demande d'extraction. Découvrez comment configurer et utiliser cette action GitHub.
Étape 3:Déploiement en ligne
Lorsque vous êtes prêt à partager vos modifications avec le monde entier, déployez votre Hosting et la configuration à votre chaîne en direct. Firebase propose deux options disponibles pour cette étape en fonction de votre cas d'utilisation (voir les options ci-dessous).
Option 1: Cloner une version d'aperçu vers une chaîne en direct
Cette option vous permet d'être certain que vous déployez sur votre chaîne en direct exact (exact) que vous avez testé dans une version preview. En savoir plus environ des versions de clonage.
À partir de 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: il s'agit des ID. des Hosting sites qui contiennent les critères.
- Pour votre site Hosting par défaut, utilisez l'ID de votre projet Firebase.
- Vous pouvez spécifier des sites appartenant au même projet Firebase différents projets Firebase.
SOURCE_CHANNEL_ID : il s'agit de l'identifiant du canal 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.
- Pour une chaîne en direct, utilisez
Affichez les modifications (étape suivante).
Option 2 : Déployer depuis votre répertoire de projet local vers votre chaîne en direct
Cette option vous permet d'ajuster les configurations spécifiques en direct ou de le déployer même si vous n'avez pas utilisé de version preview.
À partir de la racine du répertoire local de votre projet, exécutez la commande suivante:
firebase deploy --only hosting
Affichez les modifications (étape suivante).
Étape 4 : Afficher vos modifications sur votre site en ligne
Les deux options ci-dessus déploient votre contenu et votre configuration Hosting sur le sites suivants:
Sous-domaines provisionnés par Firebase pour votre site Hosting par défaut et tout autre site Hosting autres sites:
SITE_ID.web.app
(commePROJECT_ID.web.app
)
SITE_ID.firebaseapp.com
(commePROJECT_ID.firebaseapp.com
)Les domaines personnalisés auxquels vous êtes associé votre ou vos sites Hosting
Pour limiter le déploiement à un site Hosting spécifique, spécifiez une cible de déploiement dans votre commande CLI.
Autres activités et informations de déploiement
Ajouter un commentaire pour le déploiement
Vous pouvez éventuellement ajouter un commentaire à un déploiement. Ce commentaire s'affichera avec le d'autres informations sur le déploiement Tableau de bord Hosting dans la console Firebase. Exemple :
firebase deploy --only hosting -m "Deploying the best new feature ever."
Ajouter des tâches de prédéploiement et post-déploiement
Vous pouvez éventuellement connecter des scripts shell à la commande firebase deploy
pour
d'effectuer des tâches de prédéploiement ou de post-déploiement. Par exemple, un hook de post-déploiement peut
informer les administrateurs du déploiement du nouveau contenu du site. Consultez le
Pour en savoir plus, consultez la documentation de la CLI Firebase.
Mettre en cache le contenu déployé
Lorsqu'une requête est envoyée pour du contenu statique, Firebase Hosting automatiquement met en cache le contenu sur le CDN. Si vous redéployez le contenu de votre site, Firebase efface automatiquement tout le contenu statique mis en cache sur le CDN, afin que les nouvelles reçoivent votre nouveau contenu.
Notez que vous pouvez configurer mise en cache du contenu dynamique.
Diffuser via HTTPS
Veillez à ce que toutes les ressources externes Les Firebase Hosting sont chargés via SSL (HTTPS),y compris tous les scripts externes. La plupart des navigateurs ne permettent pas aux utilisateurs de charger du "contenu mixte". (SSL et non SSL) le trafic routier).
Supprimer des fichiers
Dans Firebase Hosting, le principal moyen de supprimer des fichiers sélectionnés d'un site déployé consiste à les supprimer localement, puis à les redéployer.
Étapes suivantes
Intégrez GitHub et itérez votre contenu prévisualisé en configurant l'action GitHub.
Découvrez d'autres fonctionnalités d'hébergement :
Consultez la documentation complète de la CLI Firebase.
Préparez le lancement de votre application:
- Définir un budget des alertes pour votre projet dans la console Google Cloud.
- Surveillez l'utilisation et la facturation. tableau de bord dans la console Firebase pour obtenir une vue d'ensemble de l'état dans plusieurs services Firebase. Vous pouvez également consulter la page Hosting Utilisation tableau de bord pour en savoir plus des informations détaillées sur son utilisation.
- Consultez la checklist avant le lancement de Firebase.