整合其他架構與 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 您必須能夠建構應用程式，並瞭解工具在何處放置素材資源 目的地：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 (轉譯) 可讓您對應用程式的本機執行個體 應用程式，以便儲存產生的 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

提供動態內容

如要在 Cloud Functions for Firebase 上提供 Express 應用程式，請確認您的 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;
}

或者，如果您想匯出快速風格的網址處理常式，請將其命名為 handle：

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

部署

firebase deploy

這樣會將靜態內容部署至 Firebase Hosting，並允許 Firebase 執行下列操作 會改回由 Cloud Functions for Firebase 代管的 Express 應用程式。

選用：整合 Firebase 驗證

網路架構感知 Firebase 部署工具會自動確保用戶端 以及伺服器狀態如要存取驗證內容 Express res.locals 物件 (選擇性) 包含已驗證的 Firebase 應用程式執行個體 (firebaseApp) 和目前登入的使用者 (currentUser)。