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

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

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

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

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

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

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

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

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

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

  2. ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าฟังก์ชันคลาวด์แล้ว:

    • หากคุณ ได้ ตั้งค่าฟังก์ชันคลาวด์แล้ว คุณสามารถไปยัง ขั้นตอนที่ 2: สร้างและทดสอบฟังก์ชัน HTTPS ได้

    • หากคุณยัง ไม่ได้ ตั้งค่าฟังก์ชั่นคลาวด์:

      1. เริ่มต้น Cloud Functions โดยการรันคำสั่งต่อไปนี้จากรากของไดเร็กทอรีโปรเจ็กต์ของคุณ:

        firebase init functions

      2. เมื่อได้รับแจ้ง ให้เลือก JavaScript (ตัวอย่างการแนะนำนี้ใช้ JS)

      3. ตรวจสอบว่าคุณมีไดเร็กทอรี functions ในไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ (สร้างโดยคำสั่ง Firebase ที่คุณเพิ่งรัน) ไดเร็กทอรี 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 เพื่อทดสอบการวนซ้ำเหล่านี้

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

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

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

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

ขั้นตอนที่ 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 และฟังก์ชันคลาวด์

  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 และโมดูลมิดเดิลแวร์

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