Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Diffusez du contenu dynamique et hébergez 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.

Fonctions Cloud pour Firebase vous permet d' exécuter automatiquement le code back - end en réponse aux demandes 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 faire évoluer vos propres serveurs.

Par exemple , les cas d'utilisation et des échantillons pour les fonctions de Cloud intégrés avec Firebase hébergement, visitez notre aperçu serverless .

Connecter les fonctions Cloud à l'hébergement Firebase

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

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

Étape 1: Mettre en place des fonctions de Cloud

  1. Assurez-vous que vous disposez de la dernière version de la CLI Firebase et que vous avez initialisé Firebase Hosting.

    Pour obtenir des instructions détaillées sur l' installation de la CLI et l' initialisation d' hébergement, consultez le Get Started pour l' hébergement .

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

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

    • Si vous ne l' avez pas configuré Fonctions Cloud:

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

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

      3. Vérifiez que vous avez un functions dans votre répertoire de projet local (par la commande Firebase créé vous venez RAN). Cette functions répertoire est où le code pour les fonctions de Cloud vit.

Étape 2: Créer et tester une fonction HTTPS pour 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 HTTPS (nom bigben ) que les réponses aux demandes HTTPS avec 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. Testez vos fonctions localement en utilisant l' émulateur local Firebase Suite .

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

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

Visitez la documentation Fonctions - Cloud pour en savoir plus sur les demandes HTTPS.

L'étape suivante vous guide à travers la façon d'accéder à cette fonction HTTPS à partir d' une URL Firebase d' hébergement afin qu'il puisse générer du contenu dynamique pour votre site hébergé Firebase.

Étape 3: Direct HTTPS demande à votre fonction

Avec des règles de réécriture , vous pouvez diriger les demandes qui correspondent à des modèles spécifiques à une seule destination. Les étapes suivantes vous montrent comment diriger toutes les demandes du chemin ../bigben sur votre site d' hébergement pour exécuter la bigben fonction.

  1. Ouvrez votre firebase.json fichier .

  2. Ajoutez ce qui suit rewrite configuration sous l' hosting section:

    "hosting": {
      // ...
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/bigben",
        "function": "bigben"
      } ]
    }
    
  3. Confirmez que votre redirection fonctionne comme prévu en testant à nouveau avec les émulateurs Firebase.

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

      firebase emulators:start
    2. Visitez l'URL hébergée localement pour votre site tel qu'il est retourné par la CLI (généralement localhost:5000 ), mais ajouter l'URL avec bigben , comme ceci: http://localhost:5000/bigben

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

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

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

Étape 4: Déployer votre fonction

Une fois que votre fonction fonctionne comme souhaité dans l'émulateur, vous pouvez passer à déployer, tester et fonctionner avec des ressources réelles du projet. Ceci est un bon moment pour envisager de définir les options d'exécution pour contrôler le comportement de mise à l' échelle pour les fonctions en cours d' exécution dans la production.

  1. Déployez votre fonction ainsi que votre contenu et votre configuration d'hébergement sur votre site en exécutant la commande suivante à partir de la racine de votre répertoire de projet local :

    firebase deploy --only functions,hosting
  2. Accédez à votre site en direct et à votre fonction aux URL suivantes :

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

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

Utiliser un framework web

Vous pouvez utiliser les frameworks web, comme express.js , dans les fonctions Cloud pour servir votre contenu dynamique application et écrire 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 dans votre functions répertoire:

    npm install express --save
  2. Ouvrez votre /functions/index.js fichier, puis importer et initialiser express.js:

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

    1. Ajouter le premier critère pour servir l'indice 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 final pour retourner le BONG compte comme une 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 firebase.json fichier, toutes les requêtes à l' app fonction. Cette réécriture permet express.js de servir les différents sous - chemin que nous avons configuré (dans cet exemple, / et /api ).

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

Ajouter un middleware

Poursuivant notre exemple, maintenant que vous utilisez express.js, vous pouvez ajouter middleware express.js de la manière typique. Par exemple, vous pouvez activer CORS demandes sur nos critères d' évaluation.

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

    npm install --save cors
  2. Ouvrez votre /functions/index.js fichier, puis ajoutez cors à votre application express.js, comme ceci:

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

Visitez la documentation Fonctions - Cloud pour en savoir plus sur l' utilisation Firebase avec les applications et modules middleware Express.

Prochaines étapes