Với một số cấu hình bổ sung, bạn có thể xây dựng dựa trên chức năng CLI nhận biết khung cơ bản để mở rộng hỗ trợ tích hợp cho các khung không phải Angular và Next.js.
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 cho dự án Firebase của bạn (bắt buộc nếu bạn dự định sử dụng SSR)
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 "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 web hiện có.
Nếu được nhắc, hãy chọn Express.js/tuỳ chỉnh
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-express-directory"
}
}
Phân phát nội dung tĩnh
Trước khi triển khai nội dung tĩnh, bạn cần định cấu hình ứng dụng.
Định cấu hình
Để biết cách triển khai ứng dụng, CLI Firebase cần có khả năng vừa tạo ứng dụng vừa biết vị trí công cụ đặt các thành phần dành cho Hosting. Việc này được thực hiện bằng tập lệnh bản dựng npm và lệnh thư mục CJS trong package.json.
Cho gói.json sau đây:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
…
}
CLI Firebase chỉ gọi tập lệnh bản dựng, vì vậy, bạn cần đảm bảo rằng tập lệnh bản dựng của mình đầy đủ.
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack && npm run static && npm run prerender",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
…
}
Nếu khung của bạn không hỗ trợ tính năng kết xuất trước ngay từ đầu, hãy cân nhắc sử dụng một công cụ như Rendertron. Rendertron sẽ cho phép bạn tạo các yêu cầu Chrome không có giao diện người dùng đối với một thực thể cục bộ của ứng dụng, nhờ đó, bạn có thể lưu HTML thu được để phân phát trên Hosting.
Cuối cùng, các khung và công cụ xây dựng khác nhau sẽ lưu trữ cấu phần phần mềm ở các vị trí khác nhau. Sử dụng directories.serve để cho CLI biết vị trí tập lệnh bản dựng đang xuất các cấu phần phần mềm thu được:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack && npm run static && npm run prerender",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
"directories": {
"serve": "dist"
},
…
}
Triển khai
Sau khi định cấu hình ứng dụng, bạn có thể phân phát nội dung tĩnh bằng lệnh triển khai chuẩn:
firebase deploy
Phân phát nội dung động
Để phân phát ứng dụng Express trên Cloud Functions for Firebase, hãy đảm bảo rằng bạn xuất ứng dụng Express (hoặc trình xử lý URL kiểu Express) theo cách mà Firebase có thể tìm thấy sau khi thư viện của bạn đã được đóng gói npm.
Để thực hiện việc này, hãy đảm bảo rằng lệnh files của bạn bao gồm mọi thứ cần thiết cho máy chủ và điểm truy cập chính của bạn được thiết lập chính xác trong package.json:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack && npm run static && npm run prerender",
"static": "cp static/* dist",
"prerender": "ts-node tools/prerender.ts"
},
"directories": {
"serve": "dist"
},
"files": ["dist", "server.js"],
"main": "server.js",
...
}
Xuất ứng dụng Express từ một hàm có tên app:
// server.js
export function app() {
const server = express();
…
return server;
}
Hoặc nếu bạn muốn xuất trình xử lý URL kiểu nhanh, hãy đặt tên là handle:
export function handle(req, res) {
res.send(‘hello world’);
}
Triển khai
firebase deploy
Thao tác này sẽ triển khai nội dung tĩnh của bạn đến Firebase Hosting và cho phép Firebase quay lại ứng dụng Express được lưu trữ trên Cloud Functions for Firebase.
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 dựa trên khung web sẽ tự động đồng bộ hoá trạng thái của ứng dụng và máy chủ bằng cookie. Để truy cập vào ngữ cảnh xác thực, đối tượng res.locals của Express có thể 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).