只要額外設定一些額外設定,您就能以基本的架構感知 CLI 功能為基礎,將整合支援延伸至 Angular 和 Next.js 以外的架構。
事前準備
在開始將應用程式部署至 Firebase 之前,請先詳閱下列要求和選項:
- Firebase CLI 12.1.0 以上版本。請務必使用您偏好的方法安裝 CLI。
- 選用:Firebase 專案已啟用計費功能 (如要使用 SSR,此為必要選項)
初始化 Firebase
如要開始使用,請為您的架構專案初始化 Firebase。針對新專案使用 Firebase CLI,或是修改現有專案的 firebase.json
。
初始化新專案
- 在 Firebase CLI 中,啟用網路架構預覽:
firebase experiments:enable webframeworks
從 CLI 執行初始化指令,然後按照提示操作:
firebase init hosting
以「您要使用網路架構嗎?」回答「是」。(實驗功能)
選擇代管來源目錄 (這可以是現有的網頁應用程式)。
如果出現提示訊息,請選擇 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
)。