整合其他架構與 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 建構指令碼和 package.json 中的 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 要求,以便儲存要在 Hosting 上提供的產生 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 風格的網址處理常式) 是以可讓 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 部署工具會自動使用 Cookie 讓用戶端和伺服器狀態保持同步。如要存取驗證內容,Express res.locals 物件可選擇包含已驗證的 Firebase App 例項 (firebaseApp) 和目前登入的使用者 (currentUser)。