Google s'est engagé à promouvoir l'équité raciale pour les communautés noires. Regarde comment.
Cette page a été traduite par l'API Cloud Translation.
Switch to English

Servir 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éer 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é. Il n'est pas nécessaire de gérer et de mettre à l'échelle vos propres serveurs.

Par exemple, des cas d'utilisation et des exemples pour les fonctions Cloud intégrées à Firebase Hosting, visitez notre présentation sans serveur .

Connectez Cloud Functions à Firebase Hosting

Cette section fournit un exemple de connexion d'une fonction à Firebase Hosting.

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

Étape 1: configurer les fonctions cloud

  1. Sois sûr que:

    Pour obtenir des instructions détaillées sur l'installation de l'interface de ligne de commande et l'initialisation de l'hébergement, consultez le guide Prise en main de l'hébergement .

  2. Si vous avez déjà configuré Cloud Functions, vous pouvez passer à l' étape 2: créer une fonction HTTP .

  3. Si vous n'avez pas encore 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 pas à pas utilise JS).

    3. Assurez-vous que vous disposez d'un répertoire de functions dans votre répertoire de projet local. C'est dans ce répertoire de functions réside le code de Cloud Functions.

Étape 2: Créez une fonction HTTP sur votre site d'hébergement

  1. Ouvrez /functions/index.js dans votre éditeur préféré.

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

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

     const functions = require('firebase-functions');
    
    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. Déployez cette fonction sur votre site en exécutant la commande suivante à partir de la racine de votre répertoire de projet:

    firebase deploy

    La fonction est maintenant accessible à l'URL
    https://us-central1- PROJECT_ID .cloudfunctions.net/bigben .

Consultez la documentation Cloud Functions pour en savoir plus sur les requêtes HTTP.

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

Étape 3: Dirigez les demandes d'hébergement vers votre fonction

Avec les règles de réécriture , vous pouvez diriger les demandes correspondant à des modèles spécifiques vers une seule destination. Par exemple, pour diriger toutes les requêtes de la page /bigben sur votre site d'hébergement pour exécuter la fonction bigben .

  1. Ouvrez votre fichier firebase.json .

  2. Ajoutez la configuration de rewrite suivante dans la section d' hosting :

    "hosting": {
     // ...
    
     // Add the "rewrites" attribute within "hosting"
     "rewrites": [ {
       "source": "/bigben",
       "function": "bigben"
     } ]
    }
    
  3. Exécutez à nouveau la commande de firebase deploy .

    Votre fonction est désormais accessible via les URL suivantes:

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

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

Visitez la page de configuration de l'hébergement pour plus de détails sur les règles de réécriture . Vous pouvez également en savoir plus sur l' ordre de priorité des réponses pour diverses configurations d'hébergement.

Utilisez un framework Web

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

La section suivante fournit un exemple d'utilisation d'Express.js avec Firebase Hosting et Cloud Functions.

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

    npm install express --save
  2. Ouvrez votre fichier /functions/index.js , puis importez et initialisez Express.js:

    const functions = require('firebase-functions');
    const express = require('express');
    const app = express();
    
  3. Ajoutez les deux points de terminaison suivants:

    1. Ajoutez le premier point de terminaison pour servir 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. Et un autre point de terminaison pour renvoyer le nombre de BONG en tant qu'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 HTTP:

    exports.app = functions.https.onRequest(app);
    
  5. Dans votre fichier firebase.json , dirigez toutes les requêtes vers la fonction d' app . Cette réécriture permet à Express.js de servir 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 continuant notre exemple, maintenant que vous utilisez Express.js, vous pouvez ajouter le middleware Express.js de la 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 des cors à votre application Express.js, comme ceci:

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

Tester localement

Vous pouvez servir et exécuter vos fonctions HTTP localement à l'aide de la CLI Firebase. Cela vous permet d'afficher et de tester votre projet Firebase avant de le déployer en production.

  1. Assurez-vous que la CLI Firebase et le SDK firebase-functions sont les dernières versions disponibles. Pour mettre à jour les deux, exécutez les deux commandes suivantes à partir du répertoire des functions de votre projet local:

    npm install -g firebase-tools
    npm install --save firebase-functions@latest
  2. Servez votre projet Firebase localement en exécutant la commande suivante à partir de la racine de votre répertoire de projet.

    Cette commande émule l'hébergement et fonctionne sur les URL hébergées localement.

    firebase serve
Lorsque vous utilisez Cloud Functions pour générer du contenu dynamique pour Firebase Hosting, firebase serve , par défaut, utilise vos fonctions HTTP locales comme proxys pour l'hébergement. Pour plus d'options de configuration pour Firebase Hosting et Cloud Functions, reportez-vous au Firebase CLI Reference .

Prochaines étapes