ผสานรวมเฟรมเวิร์กอื่นๆ กับ 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 / 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 )