จับคู่ Cloud Functions กับ Firebase Hosting เพื่อสร้างและให้บริการเนื้อหาแบบไดนามิกของคุณ หรือสร้าง REST API เป็นไมโครเซอร์วิส
ฟังก์ชันคลาวด์สำหรับ Firebase ช่วยให้คุณเรียกใช้โค้ดแบ็กเอนด์เพื่อตอบสนองคำขอ HTTPS ได้โดยอัตโนมัติ รหัสของคุณจัดเก็บไว้ในระบบคลาวด์ของ Google และทำงานในสภาพแวดล้อมที่มีการจัดการ ไม่จำเป็นต้องจัดการและปรับขนาดเซิร์ฟเวอร์ของคุณเอง
ตัวอย่างกรณีการใช้งานและตัวอย่างสำหรับ Cloud Functions ที่รวมเข้ากับ Firebase Hosting ไปที่ ภาพรวมไร้เซิร์ฟเวอร์ ของเรา
เชื่อมต่อฟังก์ชั่นคลาวด์กับโฮสติ้ง Firebase
ส่วนนี้แสดงตัวอย่างคำแนะนำสำหรับการเชื่อมต่อฟังก์ชันกับโฮสติ้งของ Firebase
โปรดทราบว่าหากต้องการปรับปรุงประสิทธิภาพการแสดงเนื้อหาแบบไดนามิก คุณสามารถเลือกปรับ การตั้งค่าแคช ได้
ขั้นตอนที่ 1: ตั้งค่าฟังก์ชั่นคลาวด์
ตรวจสอบให้แน่ใจว่าคุณมี 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 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 แท็กต่อภูมิภาค ซึ่งหมายความว่าหลังจากการปรับใช้หลายร้อยครั้ง ไซต์เวอร์ชันเก่าที่สุดอาจหยุดทำงาน
ไปที่หน้าการกำหนดค่าโฮสติ้งเพื่อดู รายละเอียดเพิ่มเติมเกี่ยวกับกฎการเขียนใหม่ คุณยังสามารถเรียนรู้เกี่ยวกับ ลำดับความสำคัญของการตอบกลับ สำหรับการกำหนดค่าโฮสติ้งต่างๆ
โปรดทราบว่าหากต้องการปรับปรุงประสิทธิภาพการแสดงเนื้อหาแบบไดนามิก คุณสามารถเลือกปรับ การตั้งค่าแคช ได้
ขั้นตอนที่ 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 Hosting และ 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();
เพิ่มจุดสิ้นสุดสองจุดต่อไปนี้:
เพิ่มจุดสิ้นสุดแรกเพื่อให้บริการดัชนีของเว็บไซต์ของเราที่
/
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