Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

จับคู่ Cloud Functions กับ Firebase Hosting เพื่อสร้างและให้บริการเนื้อหาแบบไดนามิกของคุณ หรือสร้าง REST API เป็นไมโครเซอร์วิส

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

สำหรับกรณีการใช้งานตัวอย่างและตัวอย่างสำหรับฟังก์ชั่นคลาวด์รวมกับ Firebase Hosting ไปที่ ภาพรวม serverless

เชื่อมต่อ Cloud Functions กับ Firebase Hosting

ส่วนนี้แสดงตัวอย่างแนะนำการเชื่อมต่อฟังก์ชันกับ Firebase Hosting

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

ขั้นตอนที่ 1: การตั้งค่าฟังก์ชั่นคลาวด์

  1. ตรวจสอบให้แน่ใจว่าคุณมี Firebase CLI เวอร์ชันล่าสุด และคุณได้เริ่มต้น Firebase Hosting แล้ว

    สำหรับคำแนะนำรายละเอียดเกี่ยวกับการติดตั้ง CLI และการเริ่มต้นโฮสติ้ง, ดู คู่มือการเริ่มต้นรับสำหรับ Hosting

  2. ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่า Cloud Functions:

    • หากคุณได้ตั้งค่าฟังก์ชั่นคลาวด์คุณสามารถดำเนินการ ขั้นตอนที่ 2: สร้างและทดสอบฟังก์ชั่น HTTPS

    • หากคุณไม่ได้ตั้งค่าฟังก์ชั่นคลาวด์:

      1. เริ่มต้น Cloud Functions โดยการรันคำสั่งต่อไปนี้จากรูทของไดเร็กทอรีโปรเจ็กต์ของคุณ:

        firebase init functions
      2. เมื่อได้รับแจ้ง ให้เลือก JavaScript (ตัวอย่างแนะนำการใช้งานนี้ใช้ JS)

      3. ตรวจสอบว่าคุณมี functions ไดเรกทอรีในไดเรกทอรีโครงการท้องถิ่นของคุณ (ที่สร้างขึ้นโดยคำสั่ง Firebase คุณเพียงแค่วิ่ง) นี้ functions ไดเรกทอรีที่รหัสสำหรับ Cloud ชีวิตฟังก์ชั่น

ขั้นตอนที่ 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 ท้องถิ่น Emulator ห้องสวีท

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

      firebase emulators:start
    2. การเข้าถึงฟังก์ชั่นผ่านทาง URL ท้องถิ่นที่ส่งกลับโดย CLI ตัวอย่างเช่น: http://localhost:5001/ PROJECT_ID /us-central1/bigben

เยี่ยมชม เอกสารฟังก์ชั่นคลาวด์ ที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการร้องขอ HTTPS

ขั้นตอนต่อไปที่คุณเดินผ่านวิธีการเข้าถึงฟังก์ชั่นนี้จาก HTTPS URL ที่ Firebase Hosting เพื่อที่จะสามารถสร้างเนื้อหาแบบไดนามิกสำหรับเว็บไซต์ Firebase โฮสต์ของคุณ

ขั้นตอนที่ 3: https โดยตรงการร้องขอไปยังการทำงานของคุณ

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

  1. เปิดของคุณ firebase.json ไฟล์

  2. เพิ่มต่อไปนี้ rewrite กำหนดค่าภายใต้ hosting ส่วน:

    "hosting": {
      // ...
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/bigben",
        "function": "bigben"
      } ]
    }
    
  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 ในฟังก์ชั่นคลาวด์ที่จะให้บริการเนื้อหาแบบไดนามิกของแอปพลิเคชันและเขียนเว็บที่ซับซ้อนได้ง่ายขึ้น

ส่วนต่อไปนี้แสดงตัวอย่างแนะนำการใช้งาน 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 ที่จะให้บริการที่แตกต่างกัน subpath ที่เรากำหนดค่า (ในตัวอย่างนี้ / และ /api )

    {
     "hosting": {
       // ...
    
       // Add the "rewrites" attribute within "hosting"
       "rewrites": [ {
         "source": "**",
         "function": "app"
       } ]
     }
    }
    

เพิ่มมิดเดิลแวร์

อย่างต่อเนื่องตัวอย่างของเราตอนนี้ที่คุณกำลังใช้ Express.js คุณสามารถเพิ่ม Express.js มิดเดิ้ล ด้วยวิธีปกติ ตัวอย่างเช่นคุณสามารถเปิดใช้งาน คำขอปลายทางของเรา

  1. ติดตั้ง cors มิดเดิลแวร์โดยใช้คำสั่งต่อไปนี้:

    npm install --save cors
  2. เปิดของคุณ /functions/index.js ไฟล์แล้วเพิ่ม cors ไปยังแอป Express.js ของคุณเช่นดังนั้น:

    const cors = require('cors')({origin: true});
    app.use(cors);
    

เยี่ยมชม เอกสารฟังก์ชั่นคลาวด์ เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ Firebase กับแอพพลิเค Express และโมดูลมิดเดิลแวร์

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