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

จับคู่ Cloud Functions กับโฮสติ้งของ Firebase เพื่อสร้างและให้บริการ เนื้อหาแบบไดนามิก หรือสร้าง REST API เป็น Microservice

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

ตัวอย่าง Use Case และตัวอย่างสำหรับ Cloud Functions ที่ผสานรวมกับ โฮสติ้งของ Firebase โปรดไปที่ ภาพรวมแบบ Serverless

เชื่อมต่อ Cloud Functions กับโฮสติ้งของ Firebase

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

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

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

  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

    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": {
      "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 เพื่อทดสอบการทำซ้ำเหล่านี้

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

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

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

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

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

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

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

    firebase deploy --only functions,hosting

  2. เข้าถึงเว็บไซต์ที่ใช้งานอยู่และฟังก์ชันของคุณได้ที่ URL ต่อไปนี้

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

คุณสามารถใช้เว็บเฟรมเวิร์ก เช่น Express.js ใน Cloud Functions เพื่อ แสดงเนื้อหาแบบไดนามิกของแอป และเขียนเว็บแอปที่ซับซ้อนได้ง่ายขึ้น

ส่วนต่อไปนี้จะให้ตัวอย่างการใช้งาน Express.js กับ โฮสติ้งของ Firebase และ 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. เพิ่มปลายทาง 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);

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

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