Testez localement, partagez les modifications, puis déployez en direct

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 de prévisualisation temporaires partageables pour votre site. Nous soutenons même une intégration GitHub à déployer à partir d' une demande de traction.

Avant que tu commences

Effectuez les étapes indiquées sur la Get hébergement page Mise en route , en particulier les tâches suivantes:

  1. Installez ou mettez à jour la Firebase CLI vers sa dernière version.
  2. Connectez le répertoire de 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 aux étapes de cette page.

Étape 1: Test sur place

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 d'hébergement et configurer localement. Lors des tests locaux, Firebase diffuse votre application Web sur une URL hébergée localement.

Hébergement fait partie de l' Emulator Local Firebase Suite , qui permet à votre application d'interagir avec votre émulé d' hébergement de contenu et config, ainsi qu'éventuellement vos ressources de projet émulés (fonctions, bases de données et des règles).

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

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

    firebase emulators:start
  3. Ouvrez votre application Web à l'adresse locale retourné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 demandes de localhost . Cela signifie que vous pourrez accéder à votre contenu hébergé à partir du navigateur Web de votre ordinateur, mais pas à partir d'autres appareils de votre réseau. Si vous souhaitez tester d'autres périphériques locaux, configurer votre firebase.json comme ceci:

"emulators": {
    // ...

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

Étape 2: Aperçu et partager

Si vous souhaitez que d'autres personnes voient les modifications apportées à votre application Web avant la mise en ligne, vous pouvez utiliser les canaux de prévisualisation.

Après le déploiement sur un canal de prévisualisation, Firebase diffuse votre application Web sur une "URL de prévisualisation", qui est une URL temporaire partageable. Lorsque vous utilisez une URL d'aperçu, votre application Web interagit avec votre back - end réel pour toutes les ressources du projet.

Notez que bien que les URL de prévisualisation soient difficiles à deviner (car elles contiennent un hachage aléatoire), elles sont publiques. Ainsi, toute personne connaissant l'URL peut y accéder.

  1. À partir de la racine de votre répertoire de projet local, exécutez la commande suivante :

    firebase hosting:channel:deploy CHANNEL_ID

    Remplacez CHANNEL_ID par une chaîne sans espace (par exemple, feature_mission-2-mars ). Cet identifiant sera utilisé pour construire l'URL de prévisualisation associée au canal de prévisualisation.

  2. Ouvrez votre application Web à l'URL d'aperçu renvoyée par la CLI. Il ressemblera à quelque chose comme ceci: PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

  3. 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.

En savoir plus sur la gestion des canaux de prévisualisation , y compris la façon de définir l'expiration d'un canal.

Firebase Hosting prend en charge une action GitHub qui crée et met à jour automatiquement une URL d'aperçu lorsque vous validez des modifications dans une demande d'extraction. Apprenez à configurer et à utiliser cette action GitHub .

Étape 3: Déploiement en direct

Lorsque vous êtes prêt à partager vos modifications avec le monde, déployez votre contenu et votre configuration d'hébergement sur votre chaîne en direct. Firebase propose différentes options pour cette étape en fonction de votre cas d'utilisation (voir les options ci-dessous).

Option 1 : Cloner à partir d'une chaîne de prévisualisation vers votre chaîne en direct

Cette option offre la confiance que vous déployez à votre chaîne en direct le contenu exact et config que vous avez testé dans un canal de prévisualisation. En savoir plus sur les versions de clonage .

  1. 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 ID des sites d' hébergement qui contiennent les canaux.

      • 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 : Ceci est la identifer pour le canal qui sert actuellement la version que vous souhaitez déployer sur votre chaîne en direct.

      • Pour un canal direct, utiliser en live comme l'ID de canal.
  2. Voir vos modifications (étape suivante).

Option 2 : Déployer à partir de votre répertoire de projet local vers votre chaîne en direct

Cette option vous offre la possibilité d'ajuster les configurations spécifiques au canal en direct ou de déployer même si vous n'avez pas utilisé de canal de prévisualisation.

  1. À partir de la racine de votre répertoire de projet local, exécutez la commande suivante :

    firebase deploy --only hosting
  2. Voir vos modifications (étape suivante).

Étape 4: Affichez vos changements sur votre site en direct

Les deux options ci-dessus déploient votre contenu et votre configuration d'hébergement sur les sites suivants :

  • Les sous-domaines provisionnés par Firebase pour votre site d'hébergement par défaut et tous les sites d'hébergement supplémentaires :
    SITE_ID .web.app (comme PROJECT_ID .web.app )
    SITE_ID .firebaseapp.com (comme PROJECT_ID .firebaseapp.com )

  • Tous les domaines personnalisés que vous avez connecté à votre site d' hébergement (s)

Pour limiter le déploiement sur un site d'hébergement spécifique, spécifiez une cible de déploiement dans votre commande CLI.

Autres activités de déploiement et informations

Ajouter un commentaire pour le déploiement

Vous pouvez éventuellement ajouter un commentaire à un déploiement. Ce commentaire affiche les autres informations de déploiement sur le tableau de bord d' hébergement dans la console Firebase. Par exemple:

firebase deploy --only hosting -m "Deploying the best new feature ever."

Ajouter des tâches scriptées de pré-déploiement et de post-déploiement

Vous pouvez en option des scripts shell de connexion à la firebase deploy commande pour effectuer des tâches de predeploy ou postdeploy. Par exemple, un hook de post-déploiement peut informer les administrateurs du déploiement de nouveau contenu de site. Reportez - vous à la documentation Firebase CLI pour plus de détails.

Mettre en cache le contenu déployé

Lorsqu'une demande est faite pour le contenu statique, Firebase Hébergement met automatiquement en cache le contenu du CDN. Si vous redéployer le contenu de votre site, Firebase efface automatiquement tout le contenu statique mis en cache à travers le CDN afin que les nouvelles demandes reçoivent votre nouveau contenu.

Notez que vous pouvez configurer la mise en cache de contenu dynamique .

Servir via HTTPS

Assurez-vous que toutes les ressources externes qui ne sont pas hébergées sur Firebase Hosting sont chargées via SSL (HTTPS), y compris les scripts externes. La plupart des navigateurs ne permettent pas aux utilisateurs de charger du « contenu mixte » (trafic SSL et non-SSL).

Prochaines étapes