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 cho Firebase, hãy xem xét các yêu cầu và lựa 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 ưu tiên của bạn.

  • Không bắt buộc: Đã 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)

  • 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

  1. Trong giao diện dòng lệnh (CLI) Firebase, hãy bật chế độ xem trước khung web: 
    firebase experiments:enable webframeworks

  2. Chạy lệnh khởi chạy từ CLI rồi làm theo lời nhắc: 

    firebase init hosting

  3. Trả lời có cho câu hỏi "Bạn có muốn sử dụng khung web không? (thử nghiệm)"

  4. Chọn thư mục nguồn lưu trữ; đây có thể là một ứng dụng Angular hiện có.

  5. 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 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. Giao diện dòng lệnh (CLI) Firebase yêu cầu Express Engine:

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 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 của Firebase vào cả gói máy chủ và gói ứng dụng, hãy đề phòng 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 thành công nếu có trong 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 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).