透過 Firebase 架構感知 CLI,您可以將 Angular 應用程式部署至 Firebase,並為使用者提供動態內容。
事前準備
在開始將應用程式部署至 Firebase 之前,請先詳閱下列要求和選項:
- Firebase CLI 12.1.0 以上版本。請務必使用您偏好的方法安裝 CLI。
選用:Firebase 專案已啟用計費功能 (如要使用 SSR,此為必要選項)
選用:AngularFire
初始化 Firebase
如要開始使用,請為您的架構專案初始化 Firebase。針對新專案使用 Firebase CLI,或是修改現有專案的 firebase.json
。
初始化新專案
- 在 Firebase CLI 中,啟用網路架構預覽:
firebase experiments:enable webframeworks
從 CLI 執行初始化指令,然後按照提示操作:
firebase init hosting
以「您要使用網路架構嗎?」回答「是」。(實驗功能)
選擇代管來源目錄 (可以是現有的 Angular 應用程式)。
系統提示時,請選擇 Angular。
初始化現有專案
將 firebase.json
中的託管設定變更為 source
選項,而不是 public
選項。例如:
{
"hosting": {
"source": "./path-to-your-angular-workspace"
}
}
提供靜態內容
初始化 Firebase 後,您可以使用標準部署指令提供靜態內容:
firebase deploy
預先轉譯動態內容
如要在 Angular 中預先轉譯動態內容,請設定 Angular Universal。Firebase CLI 預期的是 Express Engine:
ng add @nguniversal/express-engine
詳情請參閱 Angular 通用指南。
新增預先算繪網址
根據預設,系統只會預先算繪根目錄。如要新增其他路徑,您可以在 angular.json
中找出預先算繪步驟,並新增更多路徑:
{
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
},
"configurations": {
/* ... */
},
"defaultConfiguration": "production"
}
}
如果需要進一步自訂,Firebase 也會遵循代管根目錄中的 guessRoutes
或 routes.txt
檔案。如要進一步瞭解這些選項,請參閱 Angular 的預先轉譯指南。
選用:新增伺服器模組
進行部署
使用 firebase deploy
部署時,Firebase 會建構瀏覽器套件、伺服器套件,並預先轉譯應用程式。這些元素會部署至託管和 Cloud Functions for Firebase。
自訂部署
Firebase CLI 假設您在結構定義中設有伺服器、建構和預先轉譯步驟,而且使用了實際工作環境的設定。
如要自訂 CLI 的假設,請設定 ng deploy
並在 angular.json
中編輯設定。舉例來說,您可以移除 serverTarget
,停用 SSR 並只提供預先算繪內容:
{
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"browserTarget": "app:build:production",
"serverTarget": "app:server:production",
"prerenderTarget": "app:prerender:production"
}
}
}
選用:整合 Firebase JS SDK
在伺服器和用戶端套裝組合中納入 Firebase JS SDK 方法時,請先檢查 isSupported()
再使用產品,以避免執行階段錯誤。並非所有產品都適用於所有環境。
選用:與 Firebase Admin SDK 整合
如果瀏覽器版本中包含管理員套件,就會失敗,因此請考慮在伺服器模組中提供這類套件,並插入做為選用的依附元件:
// your-component.ts
import type { app } from 'firebase-admin';
import { FIREBASE_ADMIN } from '../app.module';
@Component({...})
export class YourComponent {
constructor(@Optional() @Inject(FIREBASE_ADMIN) admin: app.App) {
...
}
}
// app.server.module.ts
import * as admin from 'firebase-admin';
import { FIREBASE_ADMIN } from './app.module';
@NgModule({
…
providers: [
…
{ provide: FIREBASE_ADMIN, useFactory: () => admin.apps[0] || admin.initializeApp() }
],
})
export class AppServerModule {}
// app.module.ts
import type { app } from 'firebase-admin';
export const FIREBASE_ADMIN = new InjectionToken<app.App>('firebase-admin');
使用 SSR 提供完整動態內容
選用:整合 Firebase 驗證
網路架構感知 Firebase 部署工具會使用 Cookie,自動讓用戶端與伺服器的狀態保持同步。Express res.locals
物件可選擇是否包含已驗證的 Firebase 應用程式執行個體 (firebaseApp
) 和目前登入的使用者 (currentUser
)。您可以透過 REQUEST 權杖 (從 @nguniversal/express-engine/tokens 匯出),把這個物件插入模組。