Tester votre application Web localement, partager les modifications avec d'autres utilisateurs, puis la déployer en production

Avant de déployer les modifications sur votre site en ligne, vous devez les afficher et les tester. Firebase Hosting vous permet d'afficher et de tester les modifications localement, et d'interagir avec les ressources de projet backend émulé. Si vous avez besoin que vos coéquipiers consultent et testent vos modifications, Hosting peut créer des URL de prévisualisation temporaires et partageables pour votre site. Nous proposons même une intégration GitHub pour déployer à partir d'une demande d'extraction.

Avant de commencer

Suivez les étapes décrites sur la page Hosting Premiers pas, en particulier les tâches suivantes :

  1. Installez ou mettez à jour la CLI Firebase vers sa dernière version.
  2. Associez 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 Hosting de votre application, mais ce n'est pas une condition préalable pour les étapes de cette page.

Étape 1 : Testez en local

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

Hosting fait partie de Firebase Local Emulator Suite, qui permet à votre application d'interagir avec le contenu et la configuration émulés de Hosting, ainsi qu'avec les ressources de projet émulées (fonctions, bases de données et règles) si vous le souhaitez.

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

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

    firebase emulators:start

  3. Ouvrez votre application Web à l'URL locale renvoyée par l'interface de ligne de commande (généralement http://localhost:5000).

  4. 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 provenant 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"
    }
  }

Étape 2 : Prévisualiser et partager

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

Une fois que vous avez déployé votre application Web sur un canal de prévisualisation, Firebase la diffuse sur une "URL de prévisualisation", qui est une URL temporaire et partageable. Lorsque vous utilisez une URL de prévisualisation, votre application Web interagit avec votre vrai backend pour toutes les ressources du projet (à l'exception des fonctions "épinglées" dans votre configuration de réécriture).

Notez que, bien que les URL d'aperçu soient difficiles à deviner (car elles contiennent un hachage aléatoire), elles sont publiques. Toute personne connaissant l'URL peut donc y accéder.

  1. À partir de 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 espace (par exemple, feature_mission-2-mars). Cet ID sera utilisé pour créer l'URL d'aperçu associée au canal d'aperçu.

  2. Ouvrez votre application Web à l'URL d'aperçu renvoyée par l'interface de ligne de commande. Cela ressemblerait à quelque chose comme ceci : PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Pour mettre à jour l'URL de l'aperçu avec les modifications, exécutez à nouveau la même commande. Veillez à spécifier le même CHANNEL_ID dans la commande.

Découvrez comment gérer les chaînes d'aperçu, y compris comment définir la date d'expiration d'une chaîne.

Firebase Hosting est compatible avec 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. Découvrez comment configurer et utiliser cette action GitHub.

Étape 3 : Déployez en direct

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

Option 1 : Cloner une chaîne de prévisualisation sur votre chaîne principale

Cette option vous permet d'être sûr de déployer sur votre chaîne en direct le contenu et la configuration exacts que vous avez testés dans une chaîne d'aperçu. En savoir plus sur le clonage de versions

  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 les éléments suivants :

    • SOURCE_SITE_ID et TARGET_SITE_ID : ID des sites Hosting contenant les chaînes.

      • Pour votre site Hosting 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 des projets Firebase différents.

    • SOURCE_CHANNEL_ID : identifiant du canal qui diffuse actuellement la version que vous souhaitez déployer sur votre canal de production.

      • Pour une chaîne en direct, utilisez live comme ID de chaîne.

  2. Affichez vos 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 au canal de production ou de déployer même si vous n'avez pas utilisé de canal d'aperçu.

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

    firebase deploy --only hosting

  2. Affichez vos modifications (étape suivante).

Étape 4 : Affichez vos modifications sur votre site en ligne

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

  • Les sous-domaines provisionnés par Firebase pour votre site Hosting par défaut et tous les sites Hosting 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 associés à 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 les autres informations de déploiement dans le tableau de bord Hosting de la console Firebase. Exemple :

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

Ajouter des tâches scriptées avant et après le déploiement

Vous pouvez éventuellement associer des scripts shell à la commande firebase deploy pour effectuer des tâches avant ou après le déploiement. Par exemple, un hook post-déploiement peut avertir les administrateurs des nouveaux déploiements de contenu sur le site. 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 met automatiquement le contenu en cache sur le CDN. Si vous redéployez le contenu de votre site, Firebase efface automatiquement tout votre contenu statique mis en cache sur le CDN afin que les nouvelles requêtes reçoivent votre nouveau contenu.

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

Diffusion 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 n'autorisent pas les utilisateurs à charger du "contenu mixte" (trafic SSL et non SSL).

Supprimer des fichiers

Dans Firebase Hosting, la principale façon de supprimer des fichiers sélectionnés d'un site déployé consiste à supprimer les fichiers en local, puis à redéployer le site.

Étapes suivantes