Với CLI có nhận biết khung của 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.
Trước khi bắt đầu
Trước khi bắt đầu triển khai ứng dụng lên 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. Đảm bảo bạn 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 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 động Firebase cho dự án khung của bạn.
Sử dụng CLI Firebase cho một dự án mới hoặc sửa đổi firebase.json cho một dự án hiện có.
Khởi chạy một dự án mới
- Trong giao diện dòng lệnh (CLI) Firebase, hãy bật bản dùng thử cá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 câu hỏi "Bạn có muốn sử dụng một 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ó lựa chọn source thay vì lựa 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 SSR Angular.
ng add @angular/ssr
Hãy xem hướng dẫn về Kết xuất trước Angular (SSG) để biết thêm thông tin.
Không bắt buộc: thêm một 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ủa bạn. Các phần tử này được triển khai đến Hosting và Cloud Functions for Firebase.
Triển khai tuỳ chỉnh
Giao diện dòng lệnh Firebase giả định rằng bạn có một ứng dụng duy nhất được xác định trong angular.json với cấu hình bản dựng phát hành chính thức.
Nếu cần điều chỉnh các giả định của CLI, bạn có thể sử dụng biến môi trường FIREBASE_FRAMEWORKS_BUILD_TARGET hoặc thêm AngularFire và sửa đổi angular.json:
{
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"version": 2,
"buildTarget": "OVERRIDE_YOUR_BUILD_TARGET"
}
}
}
Không bắt buộc: tích hợp với Firebase JS SDK
Khi đưa các phương thức Firebase JS SDK vào cả gói máy chủ và gói ứng dụng, hãy ngăn chặn 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 Firebase Admin SDK
Các 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 của bạn, 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 một 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 linh hoạt 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 có nhận biết khung web sẽ tự động đồng bộ hoá trạng thái ứng dụng và máy chủ bằng cookie. Đối tượng Express res.locals sẽ tuỳ ý chứa một phiên bản Ứng dụng Firebase đã xác thực (firebaseApp) và người dùng hiện đã đăng nhập (currentUser). Bạn có thể chèn đối tượng này vào mô-đun của mình thông qua mã thông báo REQUEST (được xuất từ @nguniversal/express-engine/tokens).