แสดงเนื้อหาแบบไดนามิกและโฮสต์ 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

ไปที่เอกสารประกอบเกี่ยวกับ 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 ต่อไปนี้

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

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

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