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

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

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

לעיון בדוגמאות לשימוש למשל ודוגמאות עבור פונקציות ענן משולב עם 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 אירוח ופונקציות ענן.

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

הצעדים הבאים