透過 Firebase 架構感知 CLI,您可以將 Angular 應用程式部署至 Firebase,並向使用者提供動態內容。
事前準備
開始將應用程式部署至 Firebase 之前,請先詳閱下列需求和選項:
- Firebase CLI 12.1.0 以上版本。請務必使用偏好的方法安裝 CLI。
選用:Firebase 專案已啟用計費功能 (如要使用伺服器端算繪,則必須啟用)
選用:AngularFire
初始化 Firebase
如要開始使用,請為架構專案初始化 Firebase。如果是新專案,請使用 Firebase CLI;如果是現有專案,請修改 firebase.json
。
初始化新專案
- 在 Firebase CLI 中,啟用網頁架構預覽功能:
firebase experiments:enable webframeworks
從 CLI 執行初始化指令,然後按照提示操作:
firebase init hosting
回答「是」來使用網路架構。(實驗功能)
選擇託管來源目錄,這可以是現有的 Angular 應用程式。
如果出現提示,請選擇 Angular。
初始化現有專案
在 firebase.json
中變更代管設定,將 public
選項改為 source
選項。例如:
{
"hosting": {
"source": "./path-to-your-angular-workspace"
}
}
提供靜態內容
初始化 Firebase 後,您可以使用標準部署指令提供靜態內容:
firebase deploy
預先算繪動態內容
如要在 Angular 中預先算繪動態內容,您必須設定 Angular SSR。
ng add @angular/ssr
詳情請參閱 Angular 預先算繪 (SSG) 指南。
選用:新增伺服器模組
部署
使用 firebase deploy
部署時,Firebase 會建構瀏覽器套件、伺服器套件,並預先算繪應用程式。這些元素會部署至 Hosting 和 Cloud Functions for Firebase。
自訂部署
Firebase CLI 會假設您在 angular.json
中定義了單一應用程式,並具有正式版建構設定。
如要調整 CLI 的假設,可以使用 FIREBASE_FRAMEWORKS_BUILD_TARGET
環境變數,或新增 AngularFire 並修改 angular.json
:
{
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"version": 2,
"buildTarget": "OVERRIDE_YOUR_BUILD_TARGET"
}
}
}
選用:與 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');
使用伺服器端算繪提供完全動態的內容
選用:與 Firebase 驗證整合
Firebase 部署工具可辨識網路架構,並自動使用 Cookie 讓用戶端和伺服器狀態保持同步。Express res.locals
物件會選擇性包含已驗證的 Firebase 應用程式例項 (firebaseApp
) 和目前登入的使用者 (currentUser
)。這可透過 REQUEST 符記 (從 @nguniversal/express-engine/tokens 匯出) 插入模組。