מתאימים את Cloud Functions ל-Firebase Hosting כדי ליצור ולהציג את התוכן הדינמי, או לפתח ממשקי API ל-REST כמיקרו-שירותים (microservices).
באמצעות Cloud Functions for Firebase תוכלו להריץ אוטומטית קוד בקצה העורפי בתגובה לבקשות HTTPS. הקוד מאוחסן בענן של Google ופועל בסביבה מנוהלת. אין צורך לנהל ולשנות את קנה המידה של השרתים שלכם.
תרחישים לדוגמה ודוגמאות ל-Cloud Functions בשילוב עם Firebase Hosting זמינים בסקירה הכללית שלנו בנושא שירותים ללא שרת.
חיבור Cloud Functions אל Firebase Hosting
בקטע הזה מוסבר איך לחבר פונקציה ל-Firebase Hosting.
שימו לב שכדי לשפר את הביצועים של הצגת תוכן דינמי, אפשר לכוונן את הגדרות המטמון (אופציונלי).
שלב 1: הגדרה של Cloud Functions
מוודאים שמשתמשים בגרסה העדכנית של CLI של Firebase ושאתם מפעילים את Firebase Hosting.
הוראות מפורטות להתקנת ה-CLI ולהפעלת Hosting מפורטות במדריך למתחילים בנושא Hosting.
חשוב לוודא שהגדרתם את Cloud Functions:
אם כבר הגדרתם את Cloud Functions, אתם יכולים להמשיך לשלב 2: יצירה ובדיקה של פונקציית HTTPS.
אם לא הגדרתם את Cloud Functions:
כדי לאתחל את Cloud Functions, מריצים את הפקודה הבאה מהרמה הבסיסית (root) של ספריית הפרויקט:
firebase init functions
כשמופיעה בקשה, בוחרים באפשרות JavaScript (ההדרכה המפורטת הזו משתמשת ב-JS).
בודקים שיש ספרייה
functions
בספריית הפרויקט המקומית (שנוצרה על ידי הפקודה של Firebase שרציתם עכשיו). הספרייהfunctions
היא המקום שבו נמצא הקוד של Cloud Functions.
שלב 2: יוצרים פונקציית HTTPS ובודקים אותה באתר Hosting
פתיחת
/functions/index.js
בעורך המועדף עליך.מחליפים את תוכן הקובץ בקוד הבא.
הקוד הזה יוצר פונקציית 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>`); });
בודקים את הפונקציות באופן מקומי באמצעות Firebase Local Emulator Suite.
ברמה הבסיסית (root) של ספריית הפרויקט המקומית, מריצים את הפקודה הבאה:
firebase emulators:start
ניגשים לפונקציה דרך כתובת ה-URL המקומית שמוחזרת על ידי ה-CLI, לדוגמה:
.http://localhost:5001/PROJECT_ID/us-central1/bigben
מידע נוסף על בקשות HTTPS זמין במסמכי התיעוד של Cloud Functions.
בשלב הבא מוסבר איך לגשת לפונקציית ה-HTTPS מכתובת URL של Firebase Hosting, כדי שהיא תוכל ליצור תוכן דינמי לאתר שמתארח ב-Firebase.
שלב 3: מפנים בקשות HTTPS לפונקציה
בעזרת כללי כתיבה מחדש, אפשר להפנות בקשות שתואמות לדפוסים ספציפיים ליעד יחיד. בשלבים הבאים מוסבר איך להפנות את כל הבקשות מהנתיב ../bigben
באתר Hosting כדי להפעיל את הפונקציה bigben
.
פותחים את קובץ ה-
firebase.json
.מוסיפים את ההגדרות הבאות של
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) } } ] }
כדי לוודא שההפניה האוטומטית פועלת כצפוי, צריך לבדוק אותה שוב באמצעות המהדמנים של Firebase.
מריצים את הפקודה הבאה מהשורש של ספריית הפרויקט המקומית:
firebase emulators:start
נכנסים לכתובת ה-URL של האתר שמתארח באופן מקומי, כפי שהיא הוחזרה על ידי ה-CLI (בדרך כלל
localhost:5000
), אבל מוסיפים לכתובת ה-URL את הערךbigben
, כך:http://localhost:5000/bigben
בודקים את הפונקציה ואת הפונקציונליות שלה באתר. אפשר להשתמש באמולטורים של Firebase כדי לבדוק את הגרסאות האלה.
כדי להשיג את הביצועים הטובים ביותר, כדאי למקם את הפונקציות שלכם באותו מיקום גיאוגרפי עם Hosting. לשם כך, בוחרים באחת מהאזורים הבאים:
us-west1
us-central1
us-east1
europe-west1
asia-east1
בדף ההגדרות של Hosting תוכלו לקרוא פרטים נוספים על כללי הכתיבה מחדש. תוכלו גם לקרוא על סדר העדיפויות של התשובות בהגדרות שונות של Hosting.
חשוב לזכור: כדי לשפר את הביצועים של הצגת תוכן דינמי, אפשר לשנות את הגדרות המטמון.
שלב 4: פורסים את הפונקציה
אחרי שהפונקציה פועלת כמצופה במהדורת האימולטור, אפשר להמשיך לפריסה, לבדיקה ולהפעלה שלה באמצעות משאבי הפרויקט האמיתיים. זהו זמן טוב להגדיר אפשרויות בסביבת זמן הריצה כדי לשלוט בהתנהגות ההתאמה לעומס של פונקציות שפועלות בסביבת הייצור.
כדי לפרוס את הפונקציה, את התוכן ואת קובץ התצורה של Hosting באתר, מריצים את הפקודה הבאה משורשי ספריית הפרויקט המקומית:
firebase deploy --only functions,hosting
אפשר לגשת לאתר הפעיל ולפונקציה שלכם בכתובות ה-URL הבאות:
תת-הדומיינים של Firebase:
PROJECT_ID.web.app/bigben
וגםPROJECT_ID.firebaseapp.com/bigben
כל הדומיינים המותאמים אישית שמחוברים:
CUSTOM_DOMAIN/bigben
שימוש במסגרת אינטרנט
אפשר להשתמש במסגרות אינטרנט, כמו Express.js, ב-Cloud Functions כדי להציג את התוכן הדינמי של האפליקציה ולכתוב אפליקציות אינטרנט מורכבות בקלות רבה יותר.
בקטע הבא מפורטת דוגמה מפורטת לשימוש ב-Express.js עם Firebase Hosting ו-Cloud Functions.
כדי להתקין את Express.js בפרויקט המקומי, מריצים את הפקודה הבאה מהספרייה
functions
:npm install express --save
פותחים את הקובץ
/functions/index.js
, מייבאים את Express.js ומפעילים אותו:const functions = require('firebase-functions/v1'); const express = require('express'); const app = express();
מוסיפים את שתי נקודות הקצה הבאות:
מוסיפים את נקודת הקצה הראשונה כדי להציג את האינדקס של האתר שלנו בכתובת
/
.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>`); });
ונקודת קצה נוספת שתחזיר את הספירה של
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)}); });
מייצאים את אפליקציית Express.js כפונקציית HTTPS:
exports.app = functions.https.onRequest(app);
בקובץ
firebase.json
, מפנים את כל הבקשות לפונקציהapp
. הכתיבה מחדש מאפשרת ל-Express.js להציג את נתיב המשנה השונה שהגדרתם (בדוגמאות האלה,/
ו-/api
).{ "hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "**", "function": "app" } ] } }
הוספת שכבת middleware
בהמשך לדוגמה שלנו, עכשיו כשאתם משתמשים ב-Express.js, תוכלו להוסיף Middleware של Express.js בדרך הרגילה. לדוגמה, אפשר להפעיל בקשות CORS בנקודות הקצה שלנו.
מריצים את הפקודה הבאה כדי להתקין את שכבת הביניים
cors
:npm install --save cors
פותחים את הקובץ
/functions/index.js
ומוסיפים אתcors
לאפליקציית Express.js, באופן הבא:const cors = require('cors')({origin: true}); app.use(cors);
במסמכי התיעוד של Cloud Functions תוכלו לקרוא מידע נוסף על שימוש ב-Firebase עם אפליקציות Express ומודולים של שכבת הביניים.
השלבים הבאים
הגדרת שמירה במטמון של התוכן הדינמי שלכם ב-CDN גלובלי.
אינטראקציה עם שירותים אחרים של Firebase באמצעות Firebase Admin SDK.
המחירון והמכסות והמגבלות של Cloud Functions