借助 Firebase 框架感知 CLI,您可以將 Angular 應用程式部署到 Firebase 並向使用者提供動態內容。
在你開始之前
在開始將應用程式部署到 Firebase 之前,請查看以下要求和選項:
- Firebase CLI 版本 12.1.0 或更高版本。確保使用您首選的方法安裝 CLI 。
可選:在您的 Firebase 專案上啟用計費(如果您打算使用 SSR,則需要)
可選:AngularFire
初始化 Firebase
首先,為您的框架專案初始化 Firebase。將 Firebase CLI 用於新項目,或修改現有項目的firebase.json
。
初始化一個新項目
- 在 Firebase CLI 中,啟用 Web 框架預覽:
firebase experiments:enable webframeworks
從 CLI 執行初始化指令,然後依照提示操作:
firebase init hosting
對“您想使用 Web 框架嗎?(實驗性)”回答“是”
選擇您的託管來源目錄;這可能是現有的 Angular 應用程式。
如果出現提示,請選擇 Angular。
初始化現有項目
更改firebase.json
中的託管配置以具有source
選項,而不是public
選項。例如:
{
"hosting": {
"source": "./path-to-your-angular-workspace"
}
}
提供靜態內容
初始化 Firebase 後,您可以使用標準部署指令提供靜態內容:
firebase deploy
預先渲染動態內容
要在 Angular 中預先渲染動態內容,您需要設定 Angular Universal。 Firebase CLI 需要 Express 引擎:
ng add @nguniversal/express-engine
有關更多信息,請參閱Angular 通用指南。
新增預渲染 URL
預設情況下,僅預渲染根目錄。您可以透過在angular.json
中找到預先渲染步驟並新增更多路由來新增其他路由:
{
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
},
"configurations": {
/* ... */
},
"defaultConfiguration": "production"
}
}
如果您需要進一步自訂,Firebase 也會考慮託管根目錄中的guessRoutes
或routes.txt
檔案。有關這些選項的更多信息,請參閱Angular 的預渲染指南。
可選:新增伺服器模組
部署
當您使用firebase deploy
進行部署時,Firebase 會建置您的瀏覽器套件、伺服器套件並預先渲染應用程式。這些元素部署到 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 身份驗證集成
Web 框架感知的 Firebase 部署工具會使用 cookie 自動保持用戶端和伺服器狀態同步。 Express res.locals
物件可以選擇包含經過驗證的 Firebase 應用程式實例 ( firebaseApp
) 和目前登入的使用者 ( currentUser
)。這可以透過 REQUEST 令牌(從 @nguniversal/express-engine/tokens 匯出)注入到您的模組中。