Catch up on highlights from Firebase at Google I/O 2023. Learn more

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

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

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

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

เชื่อมต่อฟังก์ชั่นคลาวด์กับโฮสติ้ง Firebase

ส่วนนี้แสดงตัวอย่างคำแนะนำสำหรับการเชื่อมต่อฟังก์ชันกับโฮสติ้งของ Firebase

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

ขั้นตอนที่ 1: ตั้งค่าฟังก์ชั่นคลาวด์

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

    สำหรับคำแนะนำโดยละเอียดเกี่ยวกับการติดตั้ง 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 บนไซต์โฮสติ้งของคุณเพื่อดำเนินการฟังก์ชัน 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)
    "pinTag": true           // 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 ต่อไปนี้:

    • โดเมนย่อย Firebase ของคุณ:
      PROJECT_ID .web.app/bigben และ PROJECT_ID .firebaseapp.com/bigben

    • โดเมนแบบกำหนดเอง ที่เชื่อมต่อใดๆ :
      CUSTOM_DOMAIN /bigben

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

คุณสามารถใช้เว็บเฟรมเวิร์ก เช่น 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 และโมดูลมิดเดิลแวร์

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