שלב מסגרות אחרות עם 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"
  }
}

הצג תוכן סטטי

לפני פריסת תוכן סטטי, תצטרך להגדיר את היישום שלך.

הגדר

כדי לדעת כיצד לפרוס את האפליקציה שלך, ה-CLI של Firebase צריך להיות מסוגל גם לבנות את האפליקציה שלך וגם לדעת היכן הכלים שלך ממקמים את הנכסים המיועדים לאירוח. זה מושג עם npm build script ו-CJS ספריות ב- package.json .

בהינתן ה-package.json הבא:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

ה-CLI של Firebase קורא רק לסקריפט ה-build שלך, אז תצטרך לוודא שסקריפט ה-build שלך ממצה.

{
    "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 שנוצר כדי להגיש ב-Hosting.

לבסוף, מסגרות שונות וכלי בנייה מאחסנים את החפצים שלהם במקומות שונים. השתמש directories.serve כדי לומר ל-CLI היכן סקריפט ה-build שלך מוציא את החפצים המתקבלים:

{
    "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",
    ...
}

ייצא את אפליקציית האקספרס שלך מפונקציה בשם app :

// server.js
export function app() {
  const server = express();
   …
   return server;
}

לחלופין, אם אתה מעדיף לייצא מטפל כתובות אתרים בסגנון אקספרס, תנו לו שם handle :

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

לפרוס

firebase deploy

זה פורס את התוכן הסטטי שלך ל-Firebase Hosting ומאפשר ל-Firebase לחזור לאפליקציית Express שלך שמתארחת ב-Cloud Functions for Firebase.

אופציונלי: שילוב עם Firebase Authentication

כלי פריסת Firebase המודע למסגרת האינטרנט ישמור אוטומטית על מצב הלקוח והשרת מסונכרנים באמצעות קובצי Cookie. כדי לגשת להקשר האימות, האובייקט Express res.locals מכיל באופן אופציונלי מופע של Firebase App מאומת ( firebaseApp ) ואת המשתמש המחובר כעת ( currentUser ).