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 của mình lên Firebase và phân phát nội dung động cho người dùng của mình.

Trước khi bắt đầu

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

Firebase CLI phiên bản 12.1.0 trở lên. Đảm bảo cài đặt CLI bằng phương pháp ưa thích của bạn.
Tùy chọn: Đã bật tính năng thanh toán cho dự án Firebase của bạn (bắt buộc nếu bạn dự định sử dụng SSR)
Tùy chọn: AngularFire

Khởi tạo Firebase

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

Khởi tạo một dự án mới

Trong Firebase CLI, bật xem trước khung web:
```
firebase experiments:enable webframeworks
```
Chạy lệnh khởi tạo từ CLI rồi làm theo lời nhắc:
```
firebase init hosting
```
Trả lời có cho "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ữ của bạn; đâ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 tạo một dự án hiện có

Thay đổi cấu hình lưu trữ của bạn trong firebase.json để có tùy chọn source thay vì tùy chọn public . Ví dụ:

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

Phục vụ nội dung tĩnh

Sau khi khởi tạo 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

Để hiển thị trước nội dung động trong Angular, bạn cần thiết lập Angular Universal. Firebase CLI mong đợi Express Engine:

ng add @nguniversal/express-engine

Xem hướng dẫn 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 sẽ được hiển thị trước. Bạn có thể thêm các tuyến đường bổ sung bằng cách định vị bước kết xuất trước trong angular.json và thêm các tuyến đường khác:

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

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

Tùy chọn: thêm mô-đun máy chủ

Triển khai

Khi bạn triển khai bằng firebase deploy , Firebase sẽ xây dựng gói trình duyệt, gói máy chủ của bạn và hiển thị trước ứng dụng. Các phần tử này được triển khai vào Chức năng lưu trữ và đám mây cho Firebase.

Triển khai tùy chỉnh

Firebase CLI 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ơ đồ của mình 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 ng deploy và chỉnh sửa cấu hình trong angular.json . Ví dụ: bạn có thể tắt SSR và chỉ phân phát nội dung được kết xuất trước bằng cách xóa serverTarget :

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

Tùy chọn: tích hợp với SDK Firebase JS

Khi bao gồm các phương thức SDK Firebase JS trong cả gói máy chủ và máy khách, hãy đề phòng các 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 tất cả các sản phẩm đều được hỗ trợ trong mọi môi trường .

Tùy chọn: tích hợp với SDK quản trị Firebase

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

// 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ục vụ nội dung động hoàn toàn với SSR

Tùy chọn: tích hợp với Xác thực Firebase

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