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

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

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

ดูกรณีการใช้งานและตัวอย่างสําหรับ Cloud Functions ที่ผสานรวมกับ Firebase Hosting ได้ที่ภาพรวมเกี่ยวกับ Serverless

เชื่อมต่อ 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

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

ขั้นตอนถัดไปจะอธิบายวิธีเข้าถึงฟังก์ชัน HTTPS นี้จาก Firebase HostingURL เพื่อให้สร้างเนื้อหาแบบไดนามิกสําหรับเว็บไซต์ที่โฮสต์ใน 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);

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

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