จับคู่ฟังก์ชันคลาวด์กับโฮสติ้ง Firebase เพื่อสร้างและให้บริการเนื้อหาแบบไดนามิกของคุณ หรือสร้าง REST API เป็นไมโครเซอร์วิส
ฟังก์ชันคลาวด์สำหรับ Firebase ช่วยให้คุณเรียกใช้โค้ดแบ็กเอนด์โดยอัตโนมัติเพื่อตอบสนองต่อคำขอ HTTPS รหัสของคุณถูกจัดเก็บไว้ในระบบคลาวด์ของ Google และทำงานในสภาพแวดล้อมที่มีการจัดการ ไม่จำเป็นต้องจัดการและปรับขนาดเซิร์ฟเวอร์ของคุณเอง
ตัวอย่างเช่น กรณีการใช้งานและตัวอย่างสำหรับฟังก์ชันคลาวด์ที่ผสานรวมกับโฮสติ้ง Firebase โปรดไปที่ ภาพรวมแบบไร้เซิร์ฟเวอร์ ของเรา
เชื่อมต่อฟังก์ชันคลาวด์กับโฮสติ้ง Firebase
ส่วนนี้จะแสดงตัวอย่างโดยละเอียดสำหรับการเชื่อมต่อฟังก์ชันกับโฮสติ้งของ Firebase
โปรดทราบว่าเพื่อปรับปรุงประสิทธิภาพการแสดงเนื้อหาแบบไดนามิก คุณสามารถเลือกปรับแต่ง การตั้งค่าแคช ของคุณได้
ขั้นตอนที่ 1: ตั้งค่าฟังก์ชั่นคลาวด์
ตรวจสอบให้แน่ใจว่าคุณมี Firebase CLI เวอร์ชันล่าสุด และคุณได้เริ่มต้นโฮสติ้งของ Firebase แล้ว
สำหรับคำแนะนำโดยละเอียดเกี่ยวกับการติดตั้ง CLI และการเริ่มต้นโฮสติ้ง โปรดดู คู่มือเริ่มต้นใช้งานโฮสติ้ง
ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าฟังก์ชันคลาวด์แล้ว:
หากคุณ ได้ ตั้งค่าฟังก์ชันคลาวด์แล้ว คุณสามารถไปยัง ขั้นตอนที่ 2: สร้างและทดสอบฟังก์ชัน HTTPS ได้
หากคุณยัง ไม่ได้ ตั้งค่าฟังก์ชั่นคลาวด์:
เริ่มต้น Cloud Functions โดยการรันคำสั่งต่อไปนี้จากรากของไดเร็กทอรีโปรเจ็กต์ของคุณ:
firebase init functions
เมื่อได้รับแจ้ง ให้เลือก JavaScript (ตัวอย่างการแนะนำนี้ใช้ JS)
ตรวจสอบว่าคุณมีไดเร็กทอรี
functions
ในไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ (สร้างโดยคำสั่ง Firebase ที่คุณเพิ่งรัน) ไดเร็กทอรี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 Local Emulator Suite
จากรูทของไดเร็กทอรีโปรเจ็กต์ในเครื่องของคุณ ให้รันคำสั่งต่อไปนี้:
firebase emulators:start
เข้าถึงฟังก์ชันผ่าน URL ในเครื่องที่ส่งคืนโดย CLI เช่น:
http://localhost:5001/ PROJECT_ID /us-central1/bigben
ไปที่ เอกสารประกอบของ Cloud Functions เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคำขอ HTTPS
ขั้นตอนต่อไปจะอธิบายวิธีเข้าถึงฟังก์ชัน HTTPS นี้ จาก URL โฮสติ้งของ Firebase เพื่อให้สามารถสร้างเนื้อหาแบบไดนามิกสำหรับไซต์ที่โฮสต์โดย Firebase ของคุณได้
ขั้นตอนที่ 3: ส่งคำขอ HTTPS โดยตรงไปยังฟังก์ชันของคุณ
ด้วย กฎการเขียนซ้ำ คุณสามารถส่งคำขอที่ตรงกับรูปแบบเฉพาะไปยังปลายทางเดียวได้ ขั้นตอนต่อไปนี้จะแสดงให้คุณเห็นถึงวิธีการส่งคำขอทั้งหมดจากเส้นทาง ../bigben
bigben บนไซต์โฮสติ้งของคุณเพื่อดำเนินการฟังก์ชัน bigben
เปิด ไฟล์
firebase.json
ของคุณเพิ่มการกำหนดค่า
rewrite
ต่อไปนี้ในส่วนhosting
:"hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "/bigben", "function": "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 เพื่อทดสอบการวนซ้ำเหล่านี้
หากละเว้น
region
จากบล็อกfunction
ของการกำหนดค่าhosting.rewrites
Firebase CLI จะพยายามตรวจจับขอบเขตโดยอัตโนมัติจากซอร์สโค้ดของฟังก์ชัน ซึ่งหากไม่ได้ระบุ จะมีค่าเริ่มต้นเป็นus-central1
หากซอร์สโค้ดของฟังก์ชันไม่พร้อมใช้งาน CLI จะพยายามตรวจจับขอบเขตจากฟังก์ชันที่ปรับใช้ หากฟังก์ชันนี้อยู่ในหลายภูมิภาค CLI กำหนดให้ต้องระบุregion
ในการกำหนดค่าhosting.rewrites
ฟีเจอร์
pinTag
ใช้ได้เฉพาะใน Cloud Functions for Firebase (รุ่นที่ 2) เท่านั้น ด้วยคุณสมบัตินี้ คุณสามารถมั่นใจได้ว่าแต่ละฟังก์ชันสำหรับการสร้างเนื้อหาไดนามิกของไซต์ของคุณจะถูกซิงค์กับทรัพยากรโฮสติ้งแบบคงที่และการกำหนดค่าโฮสติ้งของคุณ นอกจากนี้ คุณลักษณะนี้ยังช่วยให้คุณดูตัวอย่างการเขียนใหม่ของคุณไปยังฟังก์ชันต่างๆ บนช่องแสดงตัวอย่างการโฮสต์ได้หากคุณเพิ่ม
"pinTag": true
ลงในบล็อกfunction
ของการกำหนดค่าhosting.rewrites
ฟังก์ชัน "ปักหมุด" จะถูกปรับใช้พร้อมกับทรัพยากรโฮสติ้งและการกำหนดค่าแบบคงที่ของคุณ แม้ว่าจะใช้หากคุณย้อนกลับเวอร์ชันของไซต์ของคุณ ฟังก์ชัน "ปักหมุด" ก็จะถูกย้อนกลับด้วย
firebase deploy --only hosting ฟีเจอร์นี้อาศัย แท็ก Cloud Run ซึ่งมีขีดจำกัด 1,000 แท็กต่อบริการ และ 2,000 แท็กต่อภูมิภาค ซึ่งหมายความว่าหลังจากการปรับใช้หลายร้อยครั้ง ไซต์เวอร์ชันเก่าที่สุดอาจหยุดทำงาน
เพื่อประสิทธิภาพที่ดีที่สุด ให้จัดตำแหน่งฟังก์ชันของคุณกับโฮสติ้งโดยเลือกภูมิภาคใดภูมิภาคหนึ่งต่อไปนี้:
-
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 และฟังก์ชันคลาวด์
ติดตั้ง Express.js ในโปรเจ็กต์ในเครื่องของคุณโดยรันคำสั่งต่อไปนี้จากไดเร็กทอรี
functions
ของคุณ:npm install express --save
เปิดไฟล์
/functions/index.js
ของคุณ จากนั้นนำเข้าและเริ่มต้น Express.js:const functions = require('firebase-functions'); const express = require('express'); const app = express();
เพิ่มจุดสิ้นสุดสองจุดต่อไปนี้:
เพิ่มจุดสิ้นสุดแรกเพื่อรองรับดัชนีเว็บไซต์ของเราที่
/
.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