將 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"
  }
}

提供靜態內容

您必須先設定應用程式，才能部署靜態內容。

設定

為瞭解如何部署應用程式，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 應用程式 (或速成式網址處理常式) 的方式，讓 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 樣式的網址處理常式，請將其命名為 handle：

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

進行部署

firebase deploy

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

選用：整合 Firebase 驗證

網路架構感知 Firebase 部署工具會透過 Cookie，自動讓用戶端與伺服器狀態保持同步。為了存取驗證內容，Express res.locals 物件選擇性包含已驗證的 Firebase 應用程式執行個體 (firebaseApp) 和目前登入的使用者 (currentUser)。