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

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 แบบเร่งด่วน) ในลักษณะที่ 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)