จับคู่ Cloud Functions กับโฮสติ้งของ Firebase เพื่อสร้างและให้บริการ เนื้อหาแบบไดนามิก หรือสร้าง REST API เป็น Microservice
ฟังก์ชันระบบคลาวด์สำหรับ Firebase ช่วยให้คุณเรียกใช้แบ็กเอนด์ได้โดยอัตโนมัติ ในการตอบกลับคำขอ HTTPS โค้ดของคุณจัดเก็บอยู่ในระบบคลาวด์ของ Google และ ทำงานในสภาพแวดล้อมที่มีการจัดการ ไม่จำเป็นต้องจัดการและปรับขนาดของคุณเอง เซิร์ฟเวอร์
ตัวอย่าง Use Case และตัวอย่างสำหรับ Cloud Functions ที่ผสานรวมกับ โฮสติ้งของ Firebase โปรดไปที่ ภาพรวมแบบ Serverless
เชื่อมต่อ Cloud Functions กับโฮสติ้งของ Firebase
ส่วนนี้จะแสดงตัวอย่างขั้นตอนสำหรับการเชื่อมต่อฟังก์ชันกับ โฮสติ้งของ Firebase
โปรดทราบว่า เพื่อปรับปรุงประสิทธิภาพการแสดงเนื้อหาแบบไดนามิก คุณสามารถ (ไม่บังคับ) ปรับการตั้งค่าแคช
ขั้นตอนที่ 1: ตั้งค่า Cloud Functions
ตรวจสอบว่าคุณมี Firebase CLI เวอร์ชันล่าสุด คุณได้เริ่มต้นโฮสติ้งของ Firebase แล้ว
สำหรับคำแนะนำโดยละเอียดเกี่ยวกับการติดตั้ง CLI และการเริ่มต้นใช้งาน โฮสติ้ง โปรดดู คู่มือเริ่มต้นใช้งานสำหรับโฮสติ้ง
ตรวจสอบว่าได้ตั้งค่า Cloud Functions ไว้แล้ว โดยทำดังนี้
หากตั้งค่า Cloud Functions ไว้แล้ว คุณจะดำเนินการต่อไปยัง ขั้นตอนที่ 2: สร้างและทดสอบฟังก์ชัน HTTPS
หากคุณไม่ได้ตั้งค่า Cloud Functions จะมีผลดังนี้
เริ่มต้น Cloud Functions โดยการเรียกใช้คำสั่งต่อไปนี้จาก รากของไดเรกทอรีโปรเจ็กต์ของคุณ:
firebase init functions
เมื่อมีข้อความแจ้ง ให้เลือก JavaScript (ตัวอย่างคำแนะนำแบบทีละขั้นนี้ใช้ JS)
ตรวจสอบว่าคุณมีไดเรกทอรี
functions
ในโปรเจ็กต์ในเครื่อง (สร้างโดยคำสั่ง Firebase ที่คุณเพิ่งเรียกใช้) ช่วงเวลานี้ ไดเรกทอรีfunctions
คือที่เก็บโค้ดสำหรับ Cloud Functions
ขั้นตอนที่ 2: สร้างและทดสอบฟังก์ชัน HTTPS สำหรับเว็บไซต์โฮสติ้ง
เปิด
/functions/index.js
ในเครื่องมือแก้ไขที่คุณชื่นชอบแทนที่เนื้อหาของไฟล์ด้วยโค้ดต่อไปนี้
โค้ดนี้จะสร้างฟังก์ชัน 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>`); });
ทดสอบฟังก์ชันในเครื่องโดยใช้ ชุดโปรแกรมจำลองภายในของ Firebase
จากรูทของไดเรกทอรีโปรเจ็กต์ในเครื่อง ให้เรียกใช้คำสั่งต่อไปนี้ คำสั่ง:
firebase emulators:start
เข้าถึงฟังก์ชันผ่าน URL ในเครื่องที่ CLI แสดงผลสำหรับ ตัวอย่าง:
.http://localhost:5001/PROJECT_ID/us-central1/bigben
ไปที่เอกสารประกอบ Cloud Functions เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับคำขอ HTTPS
ขั้นตอนต่อไปจะแนะนำวิธีเข้าถึงฟังก์ชัน HTTPS จาก URL โฮสติ้งของ Firebase เพื่อให้สร้างเนื้อหาแบบไดนามิกสำหรับ เว็บไซต์ที่โฮสต์ด้วย Firebase
ขั้นตอนที่ 3: ส่งคำขอ HTTPS ไปยังฟังก์ชันโดยตรง
ด้วย
กฎการเขียนใหม่ คุณสามารถส่งคำขอโดยตรง
ที่ตรงกับรูปแบบที่เฉพาะเจาะจงกับปลายทางเดียว ขั้นตอนต่อไปนี้จะแสดง
วิธีส่งคำขอทั้งหมดจากเส้นทาง ../bigben
ในโฮสติ้งของคุณ
ที่จะเรียกใช้ฟังก์ชัน bigben
เพิ่มการกำหนดค่า
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) } } ] }
ยืนยันว่าการเปลี่ยนเส้นทางทำงานตามที่คาดไว้โดยการทดสอบอีกครั้งกับ โปรแกรมจำลอง Firebase
จากรูทของไดเรกทอรีโปรเจ็กต์ในเครื่อง ให้เรียกใช้คำสั่งต่อไปนี้ คำสั่ง:
firebase emulators:start
ไปที่ URL ที่โฮสต์ไว้ในเครื่องของเว็บไซต์ตามที่ CLI แสดงผล (โดยปกติจะเป็น
localhost:5000
) แต่ให้ต่อท้าย URL ด้วยbigben
เช่นhttp://localhost:5000/bigben
ทำซ้ำฟังก์ชันและฟังก์ชันการทำงานของเว็บไซต์ ใช้เมนู โปรแกรมจำลอง Firebase เพื่อทดสอบการทำซ้ำเหล่านี้
เพื่อประสิทธิภาพที่ดีที่สุด คุณควรย้ายฟังก์ชันโดยใช้โฮสติ้งโดย เลือกภูมิภาคใดภูมิภาคหนึ่งต่อไปนี้
us-west1
us-central1
us-east1
europe-west1
asia-east1
ไปที่หน้าการกำหนดค่าโฮสติ้งสำหรับ รายละเอียดเพิ่มเติมเกี่ยวกับกฎการเขียนใหม่ คุณสามารถ รวมถึงเรียนรู้เกี่ยวกับ ลำดับความสำคัญของการตอบกลับ สำหรับการกำหนดค่าโฮสติ้งที่หลากหลาย
โปรดทราบว่า เพื่อปรับปรุงประสิทธิภาพการแสดงเนื้อหาแบบไดนามิก คุณสามารถ (ไม่บังคับ) ปรับการตั้งค่าแคช
ขั้นตอนที่ 4: ทำให้ฟังก์ชันใช้งานได้
เมื่อฟังก์ชันของคุณทำงานได้ตามที่ต้องการในโปรแกรมจำลองแล้ว คุณสามารถดำเนินการต่อ ติดตั้งใช้งาน ทดสอบ และใช้งานด้วยทรัพยากรโปรเจ็กต์จริง นี่คือ ถึงเวลาที่ควรพิจารณาตั้งค่าตัวเลือกรันไทม์เป็น ควบคุมพฤติกรรมการปรับขนาด สำหรับฟังก์ชันที่ทำงานในเวอร์ชันที่ใช้งานจริง
ทำให้ฟังก์ชันและเนื้อหาโฮสติ้งใช้งานได้ ตลอดจนกำหนดค่าลงใน ไซต์โดยเรียกใช้คำสั่งต่อไปนี้จากรูทของโปรเจ็กต์ในเครื่อง ไดเรกทอรี:
firebase deploy --only functions,hosting
เข้าถึงเว็บไซต์ที่ใช้งานอยู่และฟังก์ชันของคุณได้ที่ URL ต่อไปนี้
โดเมนย่อย Firebase:
PROJECT_ID.web.app/bigben
และPROJECT_ID.firebaseapp.com/bigben
โดเมนที่กำหนดเองทั้งหมดที่เชื่อมต่อ:
CUSTOM_DOMAIN/bigben
ใช้เว็บเฟรมเวิร์ก
คุณสามารถใช้เว็บเฟรมเวิร์ก เช่น Express.js ใน Cloud Functions เพื่อ แสดงเนื้อหาแบบไดนามิกของแอป และเขียนเว็บแอปที่ซับซ้อนได้ง่ายขึ้น
ส่วนต่อไปนี้จะให้ตัวอย่างการใช้งาน Express.js กับ โฮสติ้งของ Firebase และ Cloud Functions
ติดตั้ง Express.js ในโปรเจ็กต์ในเครื่องโดยเรียกใช้คำสั่งต่อไปนี้ จากไดเรกทอรี
functions
ของคุณ:npm install express --save
เปิดไฟล์
/functions/index.js
จากนั้นนำเข้าและเริ่มต้น Express.js ด้วยคำสั่งต่อไปนี้const functions = require('firebase-functions'); const express = require('express'); const app = express();
เพิ่มปลายทาง 2 แห่งต่อไปนี้
เพิ่มปลายทางแรกเพื่อแสดงดัชนีของเว็บไซต์ของเราที่
/
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>`); });
และอีกปลายทางหนึ่งที่จะแสดงผลการนับ
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)}); });
ส่งออกแอป Express.js เป็นฟังก์ชัน HTTPS:
exports.app = functions.https.onRequest(app);
ในไฟล์
firebase.json
ให้ส่งคำขอทั้งหมดไปยังฟังก์ชันapp
การเขียนใหม่นี้จะช่วยให้ Express.js สามารถแสดงเส้นทางย่อยต่างๆ ที่เรา ที่กำหนดค่าไว้ (ในตัวอย่างนี้คือ/
และ/api
){ "hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "**", "function": "app" } ] } }
เพิ่มมิดเดิลแวร์
จากตัวอย่างของเรา นั่นคือเมื่อคุณใช้ Express.js คุณสามารถเพิ่ม มิดเดิลแวร์ Express.js ด้วยวิธีทั่วไป ตัวอย่างเช่น คุณสามารถเปิดใช้ CORS คำขอปลายทาง
ติดตั้งมิดเดิลแวร์
cors
โดยเรียกใช้คำสั่งต่อไปนี้npm install --save cors
เปิดไฟล์
/functions/index.js
แล้วเพิ่มcors
ลงในแอป Express.js ดังนี้const cors = require('cors')({origin: true}); app.use(cors);
ไปที่เอกสารประกอบ Cloud Functions เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Firebase กับแอป Express และโมดูลมิดเดิลแวร์
ขั้นตอนถัดไป
ตั้งค่าการแคชสำหรับเนื้อหาแบบไดนามิกบน CDN ทั่วโลก
โต้ตอบกับบริการอื่นๆ ของ Firebase โดยใช้ Firebase Admin SDK
ตรวจสอบราคาและ โควต้าและขีดจำกัดสำหรับ Cloud Functions