If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.

Trang này được dịch bởi Cloud Translation API.

Tích hợp Angular Universal

Với CLI nhận biết khung Firebase, bạn có thể triển khai ứng dụng Angular lên Firebase và phân phát nội dung động cho người dùng.

Trước khi bắt đầu

Trước khi bắt đầu triển khai ứng dụng của bạn lên Firebase, hãy xem xét các yêu cầu và tuỳ chọn sau:

Firebase CLI phiên bản 12.1.0 trở lên. Hãy nhớ cài đặt CLI bằng phương thức mà bạn muốn.
Không bắt buộc: Bật tính năng thanh toán trên dự án Firebase của bạn (bắt buộc nếu bạn dự định sử dụng SSR)
Không bắt buộc: AngularFire

Khởi động Firebase

Để bắt đầu, hãy khởi chạy Firebase cho dự án khung. Sử dụng CLI Firebase cho dự án mới hoặc sửa đổi firebase.json cho dự án hiện có.

Khởi chạy dự án mới

Trong CLI Firebase, hãy bật bản xem trước khung web:
```
firebase experiments:enable webframeworks
```
Chạy lệnh khởi chạy từ CLI rồi làm theo lời nhắc:
```
firebase init hosting
```
Trả lời có cho câu hỏi "Bạn có muốn sử dụng khung web không? (thử nghiệm)"
Chọn thư mục nguồn lưu trữ; đây có thể là một ứng dụng Angular hiện có.
Nếu được nhắc, hãy chọn Angular.

Khởi chạy một dự án hiện có

Thay đổi cấu hình lưu trữ trong firebase.json để có tuỳ chọn source thay vì tuỳ chọn public. Ví dụ:

{
  "hosting": {
    "source": "./path-to-your-angular-workspace"
  }
}

Phân phát nội dung tĩnh

Sau khi khởi chạy Firebase, bạn có thể phân phát nội dung tĩnh bằng lệnh triển khai tiêu chuẩn:

firebase deploy

Kết xuất trước nội dung động

Để kết xuất trước nội dung động trong Angular, bạn cần thiết lập Angular Universal. CLI Firebase yêu cầu Công cụ Express:

ng add @nguniversal/express-engine

Xem hướng dẫn về Angular Universal để biết thêm thông tin.

Thêm URL kết xuất trước

Theo mặc định, chỉ thư mục gốc mới được kết xuất trước. Bạn có thể thêm các tuyến khác bằng cách xác định bước kết xuất trước trong angular.json và thêm các tuyến khác:

{
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
    },
    "configurations": {
      /* ... */
    },
    "defaultConfiguration": "production"
  }
}

Firebase cũng tuân theo guessRoutes hoặc tệp routes.txt trong thư mục gốc lưu trữ, nếu bạn cần tuỳ chỉnh thêm. Hãy xem hướng dẫn về tính năng kết xuất trước của Angular để biết thêm thông tin về các tuỳ chọn đó.

Không bắt buộc: thêm mô-đun máy chủ

Triển khai

Khi bạn triển khai bằng firebase deploy, Firebase sẽ tạo gói trình duyệt, gói máy chủ và kết xuất trước ứng dụng. Các phần tử này được triển khai đến Hosting và Cloud Functions for Firebase.

Triển khai tuỳ chỉnh

CLI Firebase giả định rằng bạn có các bước máy chủ, bản dựng và kết xuất trước trong sơ đồ với cấu hình sản xuất.

Nếu bạn muốn điều chỉnh các giả định của CLI, hãy định cấu hình ng deploy và chỉnh sửa cấu hình trong angular.json. Ví dụ: bạn có thể tắt SSR và phân phát nội dung kết xuất trước chỉ bằng cách xoá serverTarget:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

Không bắt buộc: tích hợp với SDK JS Firebase

Khi đưa các phương thức SDK JS Firebase vào cả gói máy chủ và ứng dụng, hãy bảo vệ khỏi lỗi thời gian chạy bằng cách kiểm tra isSupported() trước khi sử dụng sản phẩm. Không phải sản phẩm nào cũng được hỗ trợ trong mọi môi trường.

Không bắt buộc: tích hợp với SDK Quản trị Firebase

Gói quản trị sẽ không hoạt động nếu được đưa vào bản dựng trình duyệt, vì vậy, hãy cân nhắc việc cung cấp các gói này trong mô-đun máy chủ và chèn dưới dạng phần phụ thuộc không bắt buộc:

// 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');

Phân phát nội dung hoàn toàn động bằng SSR

Không bắt buộc: tích hợp với tính năng Xác thực Firebase

Công cụ triển khai Firebase nhận biết khung web tự động đồng bộ hoá trạng thái máy chủ và ứng dụng bằng cách sử dụng cookie. Đối tượng res.locals của Express sẽ chứa một thực thể Ứng dụng Firebase đã xác thực (firebaseApp) và người dùng hiện đã đăng nhập (currentUser) (không bắt buộc). Bạn có thể chèn đối tượng này vào mô-đun thông qua mã thông báo YÊU CẦU (được xuất từ @nguniversal/express-engine/tokens).