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

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

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

ดูตัวอย่าง Use Case และตัวอย่างสำหรับ 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

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

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

ใช้งานได้

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

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

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