שרת תוכן דינמי ומארח שירותי מיקרו עם פונקציות ענן

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

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

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

חבר את פונקציות הענן ל-Firebase Hosting

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

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

שלב 1: הגדר פונקציות ענן

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

    להנחיות מפורטות לגבי התקנת ה-CLI ואתחול האחסון, עיין במדריך התחל לאירוח .

  2. ודא שהגדרת פונקציות ענן:

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

    • אם לא הגדרת פונקציות ענן:

      1. אתחול פונקציות ענן על ידי הפעלת הפקודה הבאה מהשורש של ספריית הפרויקט שלך:

        firebase init functions

      2. כשתתבקש, בחר JavaScript (דוגמה זו משתמשת ב-JS).

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

שלב 2: צור ובדוק פונקציית HTTPS עבור אתר האירוח שלך

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

  2. החלף את תוכן הקובץ בקוד הבא.

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

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

    1. מהשורש של ספריית הפרויקט המקומית שלך, הפעל את הפקודה הבאה:

      firebase emulators:start

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

בקר בתיעוד של Cloud Functions כדי ללמוד עוד על בקשות HTTPS.

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

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

עם כללי כתיבה מחדש , אתה יכול להפנות בקשות התואמות דפוסים ספציפיים ליעד יחיד. השלבים הבאים מראים לך כיצד להפנות את כל הבקשות מהנתיב ../bigben באתר האחסון שלך כדי לבצע את פונקציית 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. בקר בכתובת האתר המתארחת מקומית של האתר שלך כפי שהוחזרה על ידי ה-CLI (בדרך כלל localhost:5000 ), אך הוסף את כתובת האתר עם bigben , כך: http://localhost:5000/bigben

  4. חזור על הפונקציה שלך והפונקציונליות שלה עבור האתר שלך. השתמש באמולטורים של Firebase כדי לבדוק את האיטרציות האלה.

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

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

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

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

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

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

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

    firebase deploy --only functions,hosting

  2. גש לאתר החי שלך ולתפקוד שלך בכתובות האתרים הבאות:

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

אתה יכול להשתמש במסגרות אינטרנט, כמו 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');
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 בנקודות הקצה שלנו.

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

    npm install --save cors

  2. פתח את הקובץ /functions/index.js שלך, ולאחר מכן הוסף cors לאפליקציית Express.js שלך, כך:

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

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

הצעדים הבאים