Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

  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 Local Emulator Suite

    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": "bigben",
        "region": "us-central1"  // optional (see note below)
      } ]
    }
    
  3. ยืนยันว่าการเปลี่ยนเส้นทางของคุณทำงานได้ตามที่คาดไว้โดยการทดสอบอีกครั้งด้วยโปรแกรมจำลอง Firebase

    1. จากรูทของไดเร็กทอรีโปรเจ็กต์ในพื้นที่ของคุณ ให้รันคำสั่งต่อไปนี้:

      firebase emulators:start
    2. เยี่ยมชม URL ที่โฮสต์ในเครื่องสำหรับเว็บไซต์ของคุณตามที่ CLI ส่งคืน (โดยปกติคือ localhost:5000 ) แต่ต่อท้าย URL ด้วย bigben เช่น: http://localhost:5000/bigben

  4. ทำซ้ำในฟังก์ชันและฟังก์ชันการทำงานสำหรับไซต์ของคุณ ใช้โปรแกรมจำลอง Firebase เพื่อทดสอบการทำซ้ำเหล่านี้

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

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

ขั้นตอนที่ 4: ปรับใช้ฟังก์ชันของคุณ

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

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

    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');
    const express = require('express');
    const app = express();
    
  3. เพิ่มจุดสิ้นสุดสองจุดต่อไปนี้:

    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 และโมดูลมิดเดิลแวร์

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