Diffuser du contenu dynamique et héberger des microservices avec Cloud Functions

Associez Cloud Functions à Firebase Hosting pour générer et diffuser votre contenu dynamique, ou créez des API REST en tant que microservices.

Cloud Functions for Firebase vous permet d'exécuter automatiquement du code backend en réponse aux requêtes HTTPS. Votre code est stocké dans le cloud de Google et s'exécute dans un environnement géré. Vous n'avez pas besoin de gérer ni de mettre à l'échelle vos propres serveurs.

Pour obtenir des exemples de cas d'utilisation et des exemples de Cloud Functions intégré à Firebase Hosting, consultez notre présentation de l'informatique sans serveur.

Connecter Cloud Functions à Firebase Hosting

Cette section fournit un exemple de procédure pour connecter une fonction à Firebase Hosting.

Notez que, pour améliorer les performances de diffusion de contenu dynamique, vous pouvez éventuellement ajuster vos paramètres de cache.

Étape 1 : Configurez Cloud Functions

  1. Assurez-vous de disposer de la dernière version de la CLI Firebase et d'avoir initialisé Firebase Hosting.

    Pour obtenir des instructions détaillées sur l'installation de la CLI et l'initialisation de Hosting, consultez le guide de démarrage pour Hosting.

  2. Assurez-vous d'avoir configuré Cloud Functions :

    • Si vous avez déjà configuré Cloud Functions, vous pouvez passer à l'étape 2 : Créer et tester une fonction HTTPS.

    • Si vous n'avez pas configuré Cloud Functions :

      1. Initialisez Cloud Functions en exécutant la commande suivante à partir de la racine du répertoire de votre projet :

        firebase init functions

      2. Lorsque vous y êtes invité, sélectionnez JavaScript (cet exemple de procédure utilise JS).

      3. Vérifiez que vous disposez d'un répertoire functions dans le répertoire de votre projet local (créé par la commande Firebase que vous venez d'exécuter). Le répertoire functions contient le code de Cloud Functions.

Étape 2 : Créez et testez une fonction HTTPS pour votre site Hosting

  1. Ouvrez /functions/index.js dans l'éditeur de votre choix.

  2. Remplacez le contenu du fichier par le code suivant.

    Ce code crée une fonction HTTPS (nommée bigben) qui répond aux requêtes HTTPS avec un BONG pour chaque heure de la journée, comme une horloge.

    const functions = require('firebase-functions/v1');

exports.bigben = functions.https.onRequest((req, res) => {
  const hours = (new Date().getHours() % 12) + 1  // London is UTC + 1hr;
  res.status(200).send(`<!doctype html>
    <head>
      <title>Time</title>
    </head>
    <body>
      ${'BONG '.repeat(hours)}
    </body>
  </html>`);
});

  3. Testez vos fonctions localement à l'aide de Firebase Local Emulator Suite.

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

      firebase emulators:start

    2. Accédez à la fonction via l'URL locale renvoyée par la CLI, par exemple : http://localhost:5001/PROJECT_ID/us-central1/bigben.

Pour en savoir plus sur les requêtes HTTPS, consultez la documentation Cloud Functions.

L'étape suivante vous explique comment accéder à cette fonction HTTPS à partir d'une URL Firebase Hosting afin qu'elle puisse générer du contenu dynamique pour votre site hébergé sur Firebase.

Étape 3 : Redirigez les requêtes HTTPS vers votre fonction

Les règles de réécriture vous permettent de rediriger les requêtes qui correspondent à des modèles spécifiques vers une seule destination. Les étapes suivantes vous montrent comment rediriger toutes les requêtes du chemin d'accès ../bigben sur votre site Hosting pour exécuter la fonction bigben.

  1. Ouvrez votre fichier firebase.json.

  2. Ajoutez la configuration rewrite suivante sous la section hosting :

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": {
      "functionId": "bigben",
      "region": "us-central1"  // optional (see note below)
      "pinTag": true           // optional (see note below)
    }
  } ]
}

  3. Vérifiez que votre redirection fonctionne comme prévu en effectuant un nouveau test avec les émulateurs Firebase.

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

      firebase emulators:start

    2. Accédez à l'URL hébergée en local pour votre site, telle qu'elle est renvoyée par la CLI (généralement localhost:5000), mais ajoutez bigben à l'URL, comme suit : http://localhost:5000/bigben

  4. Itérez sur votre fonction et sa fonctionnalité pour votre site. Utilisez les émulateurs Firebase pour tester ces itérations.

Pour des performances optimales, colocalisez vos fonctions avec Hosting en choisissant l'une des régions suivantes :

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

Consultez la page de configuration Hosting pour en savoir plus sur les règles de réécriture. Vous pouvez également en savoir plus sur l'ordre de priorité des réponses pour différentes configurations Hosting.

Notez que, pour améliorer les performances de diffusion de contenu dynamique, vous pouvez éventuellement ajuster vos paramètres de cache.

Étape 4 : Déployez votre fonction

Une fois que votre fonction fonctionne comme vous le souhaitez dans l'émulateur, vous pouvez passer à son déploiement, à son test et à son exécution avec des ressources de projet réelles. C'est le bon moment pour envisager de définir des options d'exécution afin de contrôler le comportement de scaling pour les fonctions exécutées en production.

  1. Déployez votre fonction ainsi que le contenu et la configuration de votre fichier Hosting sur votre site en exécutant la commande suivante à partir de la racine du répertoire de votre projet local :

    firebase deploy --only functions,hosting

  2. Accédez à votre site en ligne et à votre fonction aux URL suivantes :

    • Vos sous-domaines Firebase :
      PROJECT_ID.web.app/bigben et PROJECT_ID.firebaseapp.com/bigben

    • Tous les domaines personnalisés associés :
      CUSTOM_DOMAIN/bigben

Utiliser un framework Web

Vous pouvez utiliser des frameworks Web, comme Express.js, dans Cloud Functions pour diffuser le contenu dynamique de votre application et écrire plus facilement des applications Web complexes.

La section suivante fournit un exemple de procédure pas à pas pour utiliser Express.js avec Firebase Hosting et Cloud Functions.

  1. Installez Express.js dans votre projet local en exécutant la commande suivante depuis votre répertoire functions :

    npm install express --save

  2. Ouvrez votre fichier /functions/index.js, puis importez et initialisez Express.js :

    const functions = require('firebase-functions/v1');
const express = require('express');
const app = express();

  3. Ajoutez les deux points de terminaison suivants :

    1. Ajoutez le premier point de terminaison pour diffuser l'index de notre site Web à /.

      app.get('/', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.send(`
    <!doctype html>
    <head>
      <title>Time</title>
      <link rel="stylesheet" href="/style.css">
      <script src="/script.js"></script>
    </head>
    <body>
      <p>In London, the clock strikes:
        <span id="bongs">${'BONG '.repeat(hours)}</span></p>
      <button onClick="refresh(this)">Refresh</button>
    </body>
  </html>`);
});

    2. Un autre point de terminaison permet de renvoyer le nombre BONG sous forme d'API, au format JSON, sous /api :

      app.get('/api', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.json({bongs: 'BONG '.repeat(hours)});
});

  4. Exportez l'application Express.js en tant que fonction HTTPS :

    exports.app = functions.https.onRequest(app);

  5. Dans votre fichier firebase.json, redirigez toutes les requêtes vers la fonction app. Cette réécriture permet à Express.js de diffuser les différents sous-chemins que nous avons configurés (dans cet exemple, / et /api).

    {
 "hosting": {
   // ...

   // Add the "rewrites" attribute within "hosting"
   "rewrites": [ {
     "source": "**",
     "function": "app"
   } ]
 }
}

Ajouter un middleware

En reprenant notre exemple, maintenant que vous utilisez Express.js, vous pouvez ajouter un middleware Express.js de manière habituelle. Par exemple, vous pouvez activer les requêtes CORS sur nos points de terminaison.

  1. Installez le middleware cors en exécutant la commande suivante :

    npm install --save cors

  2. Ouvrez votre fichier /functions/index.js, puis ajoutez cors à votre application Express.js, comme suit :

    const cors = require('cors')({origin: true});
app.use(cors);

Consultez la documentation Cloud Functions pour en savoir plus sur l'utilisation de Firebase avec les applications Express et les modules de middleware.

Étapes suivantes