แสดงเนื้อหาแบบไดนามิกและโฮสต์ Microservice ด้วย 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 และการเริ่มต้นใช้งาน Hosting ได้ที่ คู่มือเริ่มต้นใช้งานสำหรับ Hosting

  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 สำหรับเว็บไซต์ Hosting

  1. เปิด /functions/index.js ในตัวแก้ไขที่ต้องการ

  2. แทนที่เนื้อหาของไฟล์ด้วยโค้ดต่อไปนี้

    โค้ดนี้จะสร้างฟังก์ชัน HTTPS (ชื่อ bigben) ที่ตอบกลับคำขอ HTTPS ด้วย BONG ทุกชั่วโมงของวัน เช่นเดียวกับนาฬิกา

    const functions = require('firebase-functions/v1');

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับคำขอ HTTPS ได้ที่เอกสารประกอบของ Cloud Functions

ขั้นตอนถัดไปจะแนะนำวิธีเข้าถึงฟังก์ชัน HTTPS นี้ จาก Firebase Hosting URL เพื่อให้ฟังก์ชันสร้างเนื้อหาแบบไดนามิกสำหรับ เว็บไซต์ที่โฮสต์ใน Firebase ได้

ขั้นตอนที่ 3: ส่งคำขอ HTTPS ไปยังฟังก์ชัน

กฎการเขียนใหม่ช่วยให้คุณส่งคำขอ ที่ตรงกับรูปแบบที่เฉพาะเจาะจงไปยังปลายทางเดียวได้ ขั้นตอนต่อไปนี้จะแสดง วิธีส่งคำขอทั้งหมดจากเส้นทาง ../bigben ในเว็บไซต์ Hosting เพื่อเรียกใช้ฟังก์ชัน bigben

  1. เปิดไฟล์ firebase.json

  2. เพิ่มการกำหนดค่า rewrite ต่อไปนี้ในส่วน hosting

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": {
      "functionId": "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 เพื่อทดสอบการทำซ้ำเหล่านี้

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

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

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

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

ขั้นตอนที่ 4: ติดตั้งใช้งานฟังก์ชัน

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

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

    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/v1');
const express = require('express');
const app = express();

  3. เพิ่ม 2 จุดสิ้นสุดต่อไปนี้

    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 กับแอป Express และโมดูลมิดเดิลแวร์ได้ที่Cloud Functionsเอกสารประกอบ

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