ผสานรวมเฟรมเวิร์กอื่นๆ กับ Express.js

ในการกำหนดค่าเพิ่มเติม คุณสามารถต่อยอดจาก ฟังก์ชัน CLI ที่รับรู้เฟรมเวิร์ก เพื่อขยายการสนับสนุนการผสานรวมไปยังเฟรมเวิร์กอื่นๆ นอกเหนือจาก Angular และ Next.js

ก่อนเริ่มต้น

ก่อนเริ่มทำให้แอปใช้งานได้กับ Firebase อ่านข้อกำหนดและตัวเลือกต่อไปนี้

• Firebase CLI เวอร์ชัน 12.1.0 ขึ้นไป อย่าลืมติดตั้ง CLI โดยใช้วิธีที่ต้องการ
• ไม่บังคับ: เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์ Firebase แล้ว (ต้องระบุหากคุณวางแผนที่จะใช้ SSR)

เริ่มต้น Firebase

หากต้องการเริ่มต้นใช้งาน ให้เริ่มต้น Firebase สำหรับโปรเจ็กต์เฟรมเวิร์ก ใช้ Firebase CLI สำหรับโปรเจ็กต์ใหม่หรือแก้ไข firebase.json สำหรับ ที่มีอยู่

เริ่มต้นโปรเจ็กต์ใหม่

1. ใน Firebase CLI ให้เปิดใช้ตัวอย่างเว็บเฟรมเวิร์ก ดังนี้

   firebase experiments:enable webframeworks

2. เรียกใช้คำสั่งการเริ่มต้นจาก CLI จากนั้นทำตามข้อความแจ้ง

   firebase init hosting

3. ตอบว่า "ใช่" สำหรับ "คุณต้องการใช้เว็บเฟรมเวิร์กไหม (ทดลอง)"

4. เลือกไดเรกทอรีแหล่งที่มาของโฮสติ้ง นี่อาจเป็นเว็บแอปที่มีอยู่

5. หากได้รับข้อความแจ้ง ให้เลือก Express.js / กำหนดเอง

เริ่มต้นโปรเจ็กต์ที่มีอยู่

เปลี่ยนการกําหนดค่าโฮสติ้งใน firebase.json ให้ใช้ตัวเลือก source แทนตัวเลือก public เช่น

{
  "hosting": {
    "source": "./path-to-your-express-directory"
  }
}

แสดงเนื้อหาแบบคงที่

ก่อนที่จะทำให้เนื้อหาคงที่ใช้งานได้ คุณจะต้องกำหนดค่าแอปพลิเคชันของคุณก่อน

กำหนดค่า

หากต้องการดูวิธีทำให้แอปพลิเคชันใช้งานได้ CLI ของ Firebase จะต้อง สามารถสร้างแอปและรู้ว่าเครื่องมือของคุณวางเนื้อหาไว้ที่ใด กำหนดสำหรับ Hosting ซึ่งดำเนินการได้ด้วยสคริปต์บิลด์ 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"
    },
    …
}

CLI ของ Firebase จะเรียกเฉพาะสคริปต์บิลด์เท่านั้น คุณจึงต้องตรวจสอบว่า สคริปต์บิลด์ของคุณครบถ้วนสมบูรณ์

{
    "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 ที่ได้เพื่อแสดงใน Hosting

และสุดท้าย เฟรมเวิร์กและเครื่องมือการสร้างต่างๆ จะจัดเก็บอาร์ติแฟกต์ไว้ที่ สถานที่ ใช้ 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 Hosting และช่วยให้ Firebase ดำเนินการต่อไปนี้ได้ กลับไปใช้แอป Express ที่โฮสต์ในวันที่ Cloud Functions for Firebase

ไม่บังคับ: ผสานรวมกับการตรวจสอบสิทธิ์ Firebase

เครื่องมือทำให้ใช้งานได้ของ Firebase ที่รองรับเฟรมเวิร์กเว็บจะซิงค์สถานะไคลเอ็นต์และเซิร์ฟเวอร์โดยอัตโนมัติโดยใช้คุกกี้ วิธีเข้าถึงบริบทการตรวจสอบสิทธิ์ ออบเจ็กต์ Express res.locals จะมี Firebase ที่ผ่านการตรวจสอบสิทธิ์ด้วยหรือไม่ก็ได้ อินสแตนซ์ของแอป (firebaseApp) และผู้ใช้ที่ลงชื่อเข้าใช้ในปัจจุบัน (currentUser)