Với giao diện dòng lệnh (CLI) nhận biết được 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.
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
Chạy Firebase
Để bắt đầu, hãy khởi chạy Firebase cho dự án khung của bạn.
Sử dụng Giao diện dòng lệnh (CLI) của 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 dự án mới
- Trong Giao diện dòng lệnh (CLI) của 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 "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 chạy một dự án hiện có
Hãy thay đổi cấu hình lưu trữ của bạn 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. Firebase CLI yêu cầu Express Engine:
ng add @nguniversal/express-engine
Xem Hướng dẫn chung về Angular để 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 tệp guessRoutes hoặc routes.txt trong thư mục gốc của máy chủ 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ủ của bạn và kết xuất trước ứng dụng. Các phần tử này được triển khai cho tính năng Lưu trữ và Chức năng đám mây cho Firebase.
Triển khai tuỳ chỉnh
Firebase CLI giả định rằng bạn có các bước gửi máy chủ, tạo và kết xuất trước trong giản đồ có 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à chỉ phân phát nội dung kết xuất trước 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 Firebase JS SDK
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ị của 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 sẽ tự động đồng bộ hoá trạng thái của máy khách và máy chủ bằng cookie. Đối tượng Express res.locals (không bắt buộc) sẽ chứa một thực thể Ứng dụng Firebase đã xác thực (firebaseApp) và người dùng hiện đang đăng nhập (currentUser). Bạn có thể chèn thực thể này vào mô-đun của mình thông qua mã thông báo REQUEST (được xuất từ @nguniversal/ex-engine/tokens).