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

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

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

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

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

סעיף זה מספק דוגמא להדרכה לחיבור פונקציה לאירוח Firebase.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בקר תיעוד פונקציות ענן כדי ללמוד עוד על בקשות HTTPS.

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

שלב 3: ישיר https בקשות לתפקוד שלך

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

  1. פתח שלכם firebase.json קובץ .

  2. מוסיף את הבאים rewrite התצורה תחת hosting הסעיף:

    "hosting": {
      // ...
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/bigben",
        "function": "bigben"
      } ]
    }
    
  3. ודא שההפניה מחדש פועלת כצפוי על ידי בדיקה חוזרת עם אמולטורי Firebase.

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

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

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

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

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

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

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

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

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

    • תת הדומיינים שלך ב- Firebase:
      PROJECT_ID .web.app/bigben ו PROJECT_ID .firebaseapp.com/bigben

    • כל המחוברים תחומים המנהג :
      CUSTOM_DOMAIN /bigben

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

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

הסעיף הבא מספק דוגמא להדרכה לשימוש ב- 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 עם אפליקציות אקספרס ומודולים תווכה.

הצעדים הבאים