將其他框架與 Express.js 集成

透過一些額外的配置,您可以建立基本的框架感知 CLI 功能,將整合支援擴展到 Angular 和 Next.js 以外的框架。

在你開始之前

在開始將應用程式部署到 Firebase 之前,請查看以下要求和選項:

  • Firebase CLI 版本 12.1.0 或更高版本。確保使用您首選的方法安裝 CLI
  • 可選:在您的 Firebase 專案上啟用計費(如果您打算使用 SSR,則需要)

初始化 Firebase

首先,為您的框架專案初始化 Firebase。將 Firebase CLI 用於新項目,或修改現有項目的firebase.json

初始化一個新項目

  1. 在 Firebase CLI 中,啟用 Web 框架預覽:
    firebase experiments:enable webframeworks
  2. 從 CLI 執行初始化指令,然後依照提示操作:

    firebase init hosting

  3. 對“您想使用 Web 框架嗎?(實驗性)”回答“是”

  4. 選擇您的託管來源目錄;這可能是現有的網路應用程式。

  5. 如果出現提示,請選擇 Express.js / 自訂

初始化現有項目

更改firebase.json中的託管配置以具有source選項,而不是public選項。例如:

{
  "hosting": {
    "source": "./path-to-your-express-directory"
  }
}

提供靜態內容

在部署靜態內容之前,您需要設定您的應用程式。

配置

為了了解如何部署您的應用程序,Firebase CLI 需要能夠建立您的應用程式並了解您的工具將用於託管的資產放置在何處。這是透過package.json中的 npm 建立腳本和 CJS 目錄指令來完成的。

給出以下 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 要求,因此您可以儲存產生的 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

提供動態內容

要在 Cloud Functions for Firebase 上提供 Express 應用程序,請確保您的 Express 應用程式(或 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函數匯出您的 Express 應用程式:

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

或者,如果您想要匯出 Express 樣式的 URL 處理程序,請將其命名為handle

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

部署

firebase deploy

這會將您的靜態內容部署到 Firebase 託管,並允許 Firebase 回退到 Cloud Functions for Firebase 上託管的 Express 應用程式。

可選:與 Firebase 身份驗證集成

Web 框架感知的 Firebase 部署工具將使用 cookie 自動保持用戶端和伺服器狀態同步。若要存取驗證上下文,Express res.locals物件可以選擇包含經過驗證的 Firebase 應用程式實例 ( firebaseApp ) 和目前登入的使用者 ( currentUser )。