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 cơ bản của CLI nhận biết khung để mở rộng khả nă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ắ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ở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 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ó lựa chọn source thay vì lựa 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 tạo ứng dụng và biết vị trí mà công cụ của bạn đặ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à chỉ thị thư mục CJS trong package.json.
Cho trước package.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 của bạn, vì vậy, bạn cần đảm bảo rằng tập lệnh bản dựng của bạn là đầ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, hãy cân nhắc sử dụng một công cụ như Rendertron. Rendertron sẽ cho phép bạn đưa ra các yêu cầu đối với Chrome không có giao diện người dùng dựa trên một phiên bản cục bộ của ứng dụng, nhờ đó, bạn có thể lưu HTML kết quả để phân phát trên Hosting.
Cuối cùng, các khung và công cụ tạo bản dựng khác nhau sẽ lưu trữ các cấu phần phần mề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 bản dựng đang xuất các cấu phần phần mềm kết quả:
{
"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 tiêu 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 ứng dụng Express (hoặc trình xử lý URL theo kiểu Express) đượ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 bằng npm.
Để thực hiện việc này, hãy đảm bảo rằng chỉ thị 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 đúng cách 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 của bạn từ một hàm có tên là 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 theo kiểu express, 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 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 có nhận biết khung web sẽ tự động đồng bộ hoá trạng thái máy chủ và máy khách bằng cookie. Để truy cập vào ngữ cảnh xác thực, đối tượng res.locals Express có thể 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).