เมื่อกำหนดค่าเพิ่มเติม คุณจะสามารถต่อยอดฟังก์ชัน 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 แบบไม่มีส่วนหัวกับอินสแตนซ์ในเครื่องของแอป คุณจึงบันทึก 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 ใน Cloud Functions for 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",
...
}
ส่งออกแอป Express จากฟังก์ชันชื่อ 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 ที่โฮสต์อยู่ใน Cloud Functions for Firebase
ไม่บังคับ: ผสานรวมกับการตรวจสอบสิทธิ์ Firebase
เครื่องมือการติดตั้งใช้งาน Firebase ที่ตระหนักถึงเฟรมเวิร์กบนเว็บจะช่วยให้สถานะของไคลเอ็นต์และเซิร์ฟเวอร์ซิงค์กันโดยอัตโนมัติโดยใช้คุกกี้ หากต้องการเข้าถึงบริบทการตรวจสอบสิทธิ์ ออบเจ็กต์ Express res.locals
จะมีอินสแตนซ์ของแอป Firebase ที่ผ่านการตรวจสอบสิทธิ์ (firebaseApp
) และผู้ใช้ที่ลงชื่อเข้าใช้ในปัจจุบัน (currentUser
) หรือไม่ก็ได้