Với một số cấu hình bổ sung, bạn có thể xây dựng 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ác ngoài Angular và Next.js.
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)
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 web hiện có.
Nếu được nhắc, hãy chọn Express.js/custom
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-express-directory"
}
}
Phục vụ 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 của mình.
Cấu hình
Để biết cách triển khai ứng dụng của bạn, Firebase CLI cần có khả năng vừa xây dựng ứng dụng vừa biết công cụ của bạn đặt nội dung dành cho Lưu trữ ở đâu. Điều này được thực hiện bằng tập lệnh xây dựng npm và chỉ thị thư mục CJS trong package.json .
Cho gói.json sau:
{
"name": "express-app",
"version": "0.0.0",
"scripts": {
"build": "spack",
"static": "cp static/* dist",
"prerender": "ts-node prerender.ts"
},
…
}
Firebase CLI chỉ gọi tập lệnh xây dựng của bạn, vì vậy bạn cần đảm bảo rằng tập lệnh xây 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ợ kết xuất trước, hãy cân nhắc sử dụng công cụ như Rendertron . Rendertron sẽ cho phép bạn thực hiện các yêu cầu Chrome không có giao diện người dùng đối với phiên bản cục bộ của ứng dụng, do đó bạn có thể lưu HTML kết quả để phân phối trên Hosting.
Cuối cùng, các khung và công cụ xây dựng khác nhau lưu trữ các tạo phẩm của chúng ở những nơi khác nhau. Sử dụng directories.serve để cho CLI biết nơi tập lệnh xây dựng của bạn xuất ra các tạo phẩ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 của mình, 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
Phục vụ nội dung động
Để phân phối ứng dụng Express của bạn trên Cloud Functions cho Firebase, hãy đảm bảo rằng ứng dụng Express (hoặc trình xử lý URL kiểu nhanh) của bạn được xuất 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 điều 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 vào 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 cấp tốc của bạn 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 một trình xử lý URL kiểu nhanh, hãy đặt tên cho nó là handle :
export function handle(req, res) {
res.send(‘hello world’);
}
Triển khai
firebase deploy
Điều này sẽ triển khai nội dung tĩnh của bạn lên Dịch vụ lưu trữ Firebase và cho phép Firebase quay trở lại ứng dụng Express được lưu trữ trên Cloud Functions cho Firebase.
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. Để truy cập ngữ cảnh xác thực, đối tượng Express res.locals tùy chọn 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 ).