ให้บริการเนื้อหาแบบไดนามิกและโฮสต์ไมโครเซอร์วิสด้วย Cloud Functions

จับคู่ Cloud Functions กับ Firebase Hosting เพื่อสร้างและให้บริการเนื้อหาแบบไดนามิกของคุณ หรือสร้าง REST API เป็นไมโครเซอร์วิส

Cloud Functions for Firebase ช่วยให้คุณเรียกใช้แบ็กเอนด์โค้ดโดยอัตโนมัติเพื่อตอบสนองต่อคำขอ HTTPS รหัสของคุณถูกเก็บไว้ในระบบคลาวด์ของ Google และทำงานในสภาพแวดล้อมที่มีการจัดการ ไม่จำเป็นต้องจัดการและปรับขนาดเซิร์ฟเวอร์ของคุณเอง

ตัวอย่างเช่น กรณีใช้งานและตัวอย่างสำหรับ Cloud Functions ที่ผสานรวมกับ Firebase Hosting ไปที่ ภาพรวมแบบไร้เซิร์ฟเวอร์ ของเรา

เชื่อมต่อ Cloud Functions กับ Firebase Hosting

ส่วนนี้แสดงตัวอย่างแนะนำการเชื่อมต่อฟังก์ชันกับ Firebase Hosting

โปรดทราบว่าในการปรับปรุงประสิทธิภาพการแสดงเนื้อหาแบบไดนามิก คุณสามารถเลือกปรับ การตั้งค่าแคช

ขั้นตอนที่ 1: ตั้งค่า Cloud Functions

  1. ตรวจสอบให้แน่ใจว่าคุณมี Firebase CLI เวอร์ชันล่าสุด และคุณได้เริ่มต้น Firebase Hosting แล้ว

    สำหรับคำแนะนำโดยละเอียดเกี่ยวกับการติดตั้ง CLI และการเริ่มต้นโฮสต์ โปรดดู คู่มือเริ่มต้นใช้งานสำหรับโฮสติ้ง

  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 สำหรับไซต์โฮสติ้งของคุณ

  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. เข้าถึงฟังก์ชันผ่าน URL ในเครื่องที่ส่งคืนโดย CLI เช่น http://localhost:5001/ PROJECT_ID /us-central1/bigben

ไปที่ เอกสาร Cloud Functions เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคำขอ 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",
        "region": "us-central1"  // optional (see note below)
      } ]
    }
    
  3. ยืนยันว่าการเปลี่ยนเส้นทางของคุณทำงานได้ตามที่คาดไว้โดยการทดสอบอีกครั้งด้วยโปรแกรมจำลอง Firebase

    1. จากรูทของไดเร็กทอรีโปรเจ็กต์ในพื้นที่ของคุณ ให้รันคำสั่งต่อไปนี้:

      firebase emulators:start
    2. เยี่ยมชม URL ที่โฮสต์ในเครื่องสำหรับเว็บไซต์ของคุณตามที่ CLI ส่งคืน (โดยปกติคือ localhost:5000 ) แต่ต่อท้าย URL ด้วย bigben เช่น: http://localhost:5000/bigben

  4. ทำซ้ำในฟังก์ชันและฟังก์ชันการทำงานสำหรับไซต์ของคุณ ใช้โปรแกรมจำลอง Firebase เพื่อทดสอบการทำซ้ำเหล่านี้

ไปที่หน้าการกำหนดค่าโฮสติ้งสำหรับ รายละเอียดเพิ่มเติมเกี่ยวกับกฎการเขียนใหม่ คุณยังสามารถเรียนรู้เกี่ยวกับ ลำดับความสำคัญของการตอบกลับ สำหรับการกำหนดค่าโฮสติ้งต่างๆ

โปรดทราบว่าในการปรับปรุงประสิทธิภาพการแสดงเนื้อหาแบบไดนามิก คุณสามารถเลือกปรับ การตั้งค่าแคช

ขั้นตอนที่ 4: ปรับใช้ฟังก์ชันของคุณ

เมื่อฟังก์ชันของคุณทำงานตามที่ต้องการในอีมูเลเตอร์ คุณสามารถดำเนินการปรับใช้ ทดสอบ และรันด้วยทรัพยากรของโปรเจ็กต์ จริง ได้ นี่เป็นเวลาที่เหมาะสมในการพิจารณาการตั้งค่าตัวเลือกรันไทม์เพื่อ ควบคุมลักษณะการปรับขนาด สำหรับฟังก์ชันที่ทำงานอยู่ในเวอร์ชันที่ใช้งานจริง

  1. ปรับใช้ฟังก์ชันของคุณเช่นเดียวกับเนื้อหาการโฮสต์และกำหนดค่าไปยังไซต์ของคุณโดยเรียกใช้คำสั่งต่อไปนี้จากรูทของไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ:

    firebase deploy --only functions,hosting
  2. เข้าถึงไซต์สดและฟังก์ชันของคุณได้ที่ URL ต่อไปนี้:

ใช้เว็บเฟรมเวิร์ก

คุณสามารถใช้เว็บเฟรมเวิร์ก เช่น 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);
    

ไปที่ เอกสาร Cloud Functions เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ Firebase กับแอป Express และโมดูลมิดเดิลแวร์

ขั้นตอนถัดไป