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

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

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

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

กำหนดค่า

เพื่อให้ทราบวิธีทำให้แอปพลิเคชันใช้งานได้ Firebase CLI ต้องสามารถสร้างแอปและทราบตำแหน่งที่เครื่องมือวางเนื้อหาที่กำหนดไว้สำหรับHosting ซึ่งทำได้ด้วยสคริปต์บิวด์ npm และคำสั่ง CJS Directories ใน 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 ที่ได้เพื่อแสดงผลบน 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 สไตล์ Express) ในลักษณะที่ 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 สไตล์ Express ให้ตั้งชื่อว่า handle

export function handle(req, res) {
   res.send(‘hello world’);
}

ทำให้ใช้งานได้

firebase deploy

การดำเนินการนี้จะทำให้เนื้อหาแบบคงที่ใช้งานได้ใน Firebase Hosting และอนุญาตให้ Firebase กลับไปใช้แอป Express ที่โฮสต์ใน Cloud Functions for Firebase

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

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