ด้วยการกำหนดค่าเพิ่มเติม คุณสามารถสร้างฟังก์ชัน CLI ที่รับรู้เฟรมเวิร์กพื้นฐานได้ เพื่อขยายการรองรับการผสานรวมไปยังเฟรมเวิร์กอื่นที่ไม่ใช่ Angular และ Next.js
ก่อนที่คุณจะเริ่ม
ก่อนที่คุณจะเริ่มปรับใช้แอปของคุณกับ Firebase โปรดตรวจสอบข้อกำหนดและตัวเลือกต่อไปนี้:
- Firebase CLI เวอร์ชัน 12.1.0 หรือใหม่กว่า ตรวจสอบให้แน่ใจว่า ได้ติดตั้ง CLI โดยใช้วิธีที่คุณต้องการ
- ทางเลือก: เปิดใช้งานการเรียกเก็บเงินในโปรเจ็กต์ Firebase ของคุณ (จำเป็นหากคุณวางแผนที่จะใช้ SSR)
เริ่มต้น Firebase
ในการเริ่มต้น ให้เริ่มต้น Firebase สำหรับโปรเจ็กต์เฟรมเวิร์กของคุณ ใช้ Firebase CLI สำหรับโปรเจ็กต์ใหม่ หรือแก้ไข firebase.json
สำหรับโปรเจ็กต์ที่มีอยู่
เริ่มต้นโครงการใหม่
- ใน Firebase CLI ให้เปิดใช้งานการแสดงตัวอย่างเฟรมเวิร์กเว็บ:
firebase experiments:enable webframeworks
รันคำสั่งการเริ่มต้นจาก CLI จากนั้นปฏิบัติตามพร้อมท์:
firebase init hosting
ตอบว่าใช่เป็น "คุณต้องการใช้เว็บเฟรมเวิร์กหรือไม่ (ทดลอง)"
เลือกไดเร็กทอรีต้นทางโฮสติ้งของคุณ นี่อาจเป็นเว็บแอปที่มีอยู่แล้ว
หากได้รับแจ้ง ให้เลือก Express.js / custom
เริ่มต้นโครงการที่มีอยู่
เปลี่ยนการกำหนดค่าโฮสติ้งใน firebase.json
เพื่อให้มีตัวเลือก source
ที่มา แทนที่จะเป็นตัวเลือก public
ตัวอย่างเช่น:
{
"hosting": {
"source": "./path-to-your-express-directory"
}
}
ให้บริการเนื้อหาแบบคงที่
ก่อนที่จะปรับใช้เนื้อหาคงที่ คุณจะต้องกำหนดค่าแอปพลิเคชันของคุณ
กำหนดค่า
หากต้องการทราบวิธีปรับใช้แอปพลิเคชันของคุณ Firebase CLI จะต้องสามารถสร้างแอปของคุณและรู้ว่าเครื่องมือของคุณวางสินทรัพย์ที่กำหนดไว้สำหรับโฮสติ้งไว้ที่ใด ซึ่งสามารถทำได้ด้วยสคริปต์บิลด์ npm และคำสั่งไดเร็กทอรี CJS ใน package.json
รับ package.json ต่อไปนี้:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
…
}
Firebase CLI เรียกใช้สคริปต์บิลด์ของคุณเท่านั้น ดังนั้น คุณจะต้องแน่ใจว่าสคริปต์บิลด์ของคุณครบถ้วนสมบูรณ์
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack && npm run static && npm run prerender",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
…
}
หากเฟรมเวิร์กของคุณไม่รองรับการเรนเดอร์ล่วงหน้าทันที ให้พิจารณาใช้เครื่องมือเช่น Rendertron Rendertron จะอนุญาตให้คุณส่งคำขอ Chrome แบบ headless กับอินสแตนซ์ในเครื่องของแอปของคุณ ดังนั้นคุณจึงสามารถบันทึก HTML ที่เป็นผลลัพธ์เพื่อให้บริการบนโฮสติ้งได้
สุดท้ายแล้ว เฟรมเวิร์กและเครื่องมือสร้างที่แตกต่างกันจะจัดเก็บอาร์ติแฟกต์ไว้ในที่ต่างกัน ใช้ directories.serve
เพื่อบอก CLI ว่าสคริปต์บิลด์ของคุณส่งออกส่วนผลลัพธ์ที่เป็นผลลัพธ์ไปที่ใด:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack && npm run static && npm run prerender",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
"directories": {
"serve": "dist"
},
…
}
ปรับใช้
หลังจากกำหนดค่าแอปของคุณแล้ว คุณสามารถให้บริการเนื้อหาคงที่ด้วยคำสั่งการปรับใช้มาตรฐาน:
firebase deploy
ให้บริการเนื้อหาแบบไดนามิก
หากต้องการให้บริการแอป Express บนฟังก์ชันคลาวด์สำหรับ Firebase ตรวจสอบให้แน่ใจว่าแอป Express ของคุณ (หรือตัวจัดการ URL แบบด่วน) ได้รับการส่งออกในลักษณะที่ Firebase สามารถค้นหาได้หลังจากที่ไลบรารีของคุณได้รับการแพ็ก NPM แล้ว
เพื่อให้บรรลุเป้าหมายนี้ ตรวจสอบให้แน่ใจว่าคำสั่ง files
ของคุณมีทุกสิ่งที่จำเป็นสำหรับเซิร์ฟเวอร์ และจุดเข้าใช้งานหลักของคุณได้รับการตั้งค่าอย่างถูกต้องใน package.json
:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack && npm run static && npm run prerender",
"static": "cp static/* dist",
"prerender": "ts-node tools/prerender.ts"
},
"directories": {
"serve": "dist"
},
"files": ["dist", "server.js"],
"main": "server.js",
...
}
ส่งออกแอปด่วนของคุณจากฟังก์ชันชื่อ app
:
// server.js
export function app() {
const server = express();
…
return server;
}
หรือหากคุณต้องการส่งออกตัวจัดการ URL แบบด่วน ให้ตั้งชื่อว่า handle
:
export function handle(req, res) {
res.send(‘hello world’);
}
ปรับใช้
firebase deploy
การดำเนินการนี้จะปรับใช้เนื้อหาคงที่ของคุณกับโฮสติ้งของ Firebase และอนุญาตให้ Firebase ถอยกลับไปยังแอป Express ของคุณที่โฮสต์บนฟังก์ชันคลาวด์สำหรับ Firebase
ทางเลือก: ผสานรวมกับ Firebase Authentication
เครื่องมือปรับใช้ Firebase ที่รับรู้ถึงเฟรมเวิร์กเว็บจะรักษาสถานะไคลเอ็นต์และเซิร์ฟเวอร์ให้ตรงกันโดยอัตโนมัติโดยใช้คุกกี้ ในการเข้าถึงบริบทการตรวจสอบสิทธิ์ อ็อบเจ็กต์ Express res.locals
อาจมีอินสแตนซ์แอป Firebase ที่ผ่านการรับรองความถูกต้อง ( firebaseApp
) และผู้ใช้ที่ลงชื่อเข้าใช้ในปัจจุบัน ( currentUser
)