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

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

ก่อนที่คุณจะเริ่มต้น

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

• Firebase CLI เวอร์ชัน 12.1.0 หรือใหม่กว่า ตรวจสอบให้แน่ใจว่า ได้ติดตั้ง CLI โดยใช้วิธีที่คุณต้องการ

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

• ไม่บังคับ: เปิดใช้งานการเรียกเก็บเงินในโครงการ 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"
  }
}

ให้บริการเนื้อหาคงที่

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

กำหนดค่า

เพื่อให้ทราบวิธีปรับใช้แอปพลิเคชันของคุณ 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 สำหรับ 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 ของคุณที่โฮสต์บน Cloud Functions สำหรับ Firebase

ทางเลือก: รวมเข้ากับการรับรองความถูกต้องของ Firebase

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