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

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

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

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

กำหนดค่า

Firebase CLI ต้องสามารถทั้งสร้างแอปและรู้ว่าเครื่องมือวางชิ้นงานที่กำหนดไว้สำหรับ 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"
    },
    …
}

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 รูปแบบด่วน ให้ตั้งชื่อว่า 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 App ที่ตรวจสอบสิทธิ์แล้ว (firebaseApp) และผู้ใช้ที่ลงชื่อเข้าใช้ในปัจจุบัน (currentUser)