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

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

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

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

חיבור של Cloud Functions אל Firebase Hosting

בקטע הזה מופיעה דוגמה מפורטת לחיבור פונקציה ל-Firebase Hosting.

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

שלב 1: הגדרת Cloud Functions

  1. מוודאים שמותקנת הגרסה העדכנית של Firebase CLI ושהפעלתם את 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. מהרמה הבסיסית (root) של ספריית הפרויקט המקומית, מריצים את הפקודה הבאה:

      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. מהרמה הבסיסית (root) של ספריית הפרויקט המקומית, מריצים את הפקודה הבאה:

      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 הבאות:

שימוש ב-Web Framework

אתם יכולים להשתמש במסגרות אינטרנט, כמו 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"
   } ]
 }
}

הוספת תוכנת ביניים

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

  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 ומודולים של תוכנת ביניים.

השלבים הבאים