מילוי בקשות לתוכן דינמי ואירוח מיקרו-שירותים (microservices) באמצעות Cloud Functions

אפשר להתאים בין Cloud Functions ל-Firebase Hosting כדי ליצור תוכן דינמי ולהציג אותו, או כדי ליצור ממשקי API ל-REST כמיקרו-שירותים.

Cloud Functions for Firebase מאפשר להריץ באופן אוטומטי קוד לקצה העורפי בתגובה לבקשות HTTPS. הקוד מאוחסן בענן של Google ופועל בסביבה מנוהלת. אין צורך לנהל ולשנות את קנה המידה של השרתים שלכם.

תרחישים לדוגמה ודוגמאות ל-Cloud Functions בשילוב עם Firebase Hosting זמינים בסקירה הכללית שלנו בנושא שירותים ללא שרת.

חיבור Cloud Functions אל Firebase Hosting

בקטע הזה מוסבר איך לחבר פונקציה ל-Firebase Hosting.

חשוב לזכור: כדי לשפר את הביצועים של הצגת תוכן דינמי, אפשר לשנות את הגדרות המטמון.

שלב 1: מגדירים את Cloud Functions

  1. מוודאים שמשתמשים בגרסה העדכנית של CLI של Firebase ושאתם מפעילים את Firebase Hosting.

    הוראות מפורטות להתקנת ה-CLI ולהפעלת Hosting מפורטות במדריך למתחילים בנושא Hosting.

  2. ודאו שהגדרתם את Cloud Functions:

    • אם כבר הגדרתם את Cloud Functions, תוכלו להמשיך אל שלב 2: יצירת בדיקה של פונקציית HTTPS.

    • אם לא הגדרתם את Cloud Functions:

      1. מאתחלים את Cloud Functions על ידי הפעלת הפקודה הבאה בתיקיית השורש של הפרויקט:

        firebase init functions
      2. כשמופיעה בקשה, בוחרים באפשרות JavaScript (בדוגמה הזו נעשה שימוש ב-JS).

      3. בודקים שיש ספרייה functions בספריית הפרויקט המקומית (שנוצרה על ידי הפקודה של Firebase שרציתם עכשיו). הספרייה functions היא המקום שבו נמצא הקוד של Cloud Functions.

שלב 2: יוצרים פונקציית HTTPS ובודקים אותה באתר Hosting

  1. פותחים את /functions/index.js בכלי העריכה המועדף.

  2. מחליפים את תוכן הקובץ בקוד הבא.

    הקוד הזה יוצר פונקציית HTTPS (שנקראת bigben) שמשיבים לה בקשות HTTPS עם BONG לכל שעה ביום, בדיוק כמו שעון.

    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. בודקים את הפונקציות באופן מקומי באמצעות Firebase Local Emulator Suite.

    1. מריצים את הפקודה הבאה מהשורש של ספריית הפרויקט המקומית:

      firebase emulators:start
    2. ניגשים לפונקציה דרך כתובת ה-URL המקומית שמוחזרת על ידי ה-CLI, לדוגמה: http://localhost:5001/PROJECT_ID/us-central1/bigben.

מידע נוסף על בקשות HTTPS זמין במסמכי התיעוד של Cloud Functions.

בשלב הבא נסביר איך לגשת לפונקציית ה-HTTPS הזו מכתובת URL מסוג Firebase Hosting כדי שתוכל ליצור תוכן דינמי לאתר שמתארח ב-Firebase.

שלב 3: מפנים בקשות HTTPS לפונקציה

בעזרת כללי כתיבה מחדש, אפשר להפנות בקשות שתואמות לדפוסים ספציפיים ליעד יחיד. השלבים הבאים מראים איך להפנות את כל הבקשות מהנתיב ../bigben באתר Hosting כדי להריץ את הפונקציה bigben.

  1. פותחים את קובץ ה-firebase.json.

  2. מוסיפים את הגדרת rewrite הבאה בקטע 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. כדי לוודא שההפניה האוטומטית פועלת כצפוי, צריך לבדוק אותה שוב באמצעות המהדמנים של Firebase.

    1. מריצים את הפקודה הבאה מהשורש של ספריית הפרויקט המקומי:

      firebase emulators:start
    2. נכנסים לכתובת ה-URL של האתר שמתארח באופן מקומי, כפי שהיא הוחזרה על ידי ה-CLI (בדרך כלל localhost:5000), אבל מוסיפים לכתובת ה-URL את הערך bigben, כך: http://localhost:5000/bigben

  4. בודקים את הפונקציה ואת הפונקציונליות שלה באתר. אפשר להשתמש באמולטורים של Firebase כדי לבדוק את הגרסאות האלה.

כדי להשיג את הביצועים הטובים ביותר, כדאי למקם את הפונקציות שלכם באותו מיקום גיאוגרפי עם Hosting. לשם כך, בוחרים באחת מהאזורים הבאים:

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

בדף ההגדרה Hosting תוכלו לקרוא פרטים נוספים על כללי הכתיבה מחדש. תוכלו גם לקרוא על סדר העדיפויות של התשובות בהגדרות שונות של Hosting.

חשוב לזכור: כדי לשפר את הביצועים של הצגת תוכן דינמי, אפשר לשנות את הגדרות המטמון.

שלב 4: פורסים את הפונקציה

אחרי שהפונקציה פועלת כמצופה במהדורת האימולטור, אפשר להמשיך לפריסה, לבדיקה ולהפעלה שלה באמצעות משאבי הפרויקט האמיתיים. זהו זמן טוב להגדיר אפשרויות בסביבת זמן הריצה כדי לשלוט בהתנהגות ההתאמה לעומס של פונקציות שפועלות בסביבת הייצור.

  1. כדי לפרוס את הפונקציה, את התוכן ואת קובץ התצורה של Hosting באתר, מריצים את הפקודה הבאה משורשי ספריית הפרויקט המקומית:

    firebase deploy --only functions,hosting
  2. אפשר לגשת לאתר ולפונקציה שלכם בגרסה הפעילה בכתובות ה-URL הבאות:

שימוש במסגרת אינטרנט

אפשר להשתמש במסגרות אינטרנט, כמו Express.js, ב-Cloud Functions כדי להציג את התוכן הדינמי של האפליקציה ולכתוב אפליקציות אינטרנט מורכבות בקלות רבה יותר.

בקטע הבא מופיעה דוגמה מפורטת לשימוש ב-Express.js עם Firebase Hosting ו-Cloud Functions.

  1. כדי להתקין את Express.js בפרויקט המקומי, מריצים את הפקודה הבאה מהספרייה functions:

    npm install express --save
  2. פותחים את הקובץ /functions/index.js, מייבאים את Express.js ומפעילים אותו:

    const functions = require('firebase-functions/v1');
    const express = require('express');
    const app = express();
    
  3. מוסיפים את שתי נקודות הקצה הבאות:

    1. מוסיפים את נקודת הקצה הראשונה כדי להציג את האינדקס של האתר שלנו בכתובת /.

      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. וגם נקודת קצה נוספת להחזרת ספירת BONG כ-API, בפורמט JSON, בקטע /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. מייצאים את אפליקציית Express.js כפונקציית HTTPS:

    exports.app = functions.https.onRequest(app);
    
  5. בקובץ firebase.json, מפנים את כל הבקשות לפונקציה app. הכתיבה מחדש מאפשרת ל-Express.js להציג את נתיב המשנה השונה שהגדרתם (בדוגמאות האלה, / ו-/api).

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

הוספת שכבת middleware

בהמשך לדוגמה שלנו, עכשיו כשאתם משתמשים ב-Express.js, תוכלו להוסיף Middleware של Express.js בדרך הרגילה. לדוגמה, אפשר להפעיל בקשות CORS בנקודות הקצה שלנו.

  1. מריצים את הפקודה הבאה כדי להתקין את שכבת הביניים cors:

    npm install --save cors
  2. פותחים את הקובץ /functions/index.js ומוסיפים את cors לאפליקציית Express.js, כך:

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

במסמכי התיעוד של Cloud Functions תוכלו לקרוא מידע נוסף על שימוש ב-Firebase עם אפליקציות Express ומודולים של שכבת הביניים.

השלבים הבאים