Tích hợp các khung khác với Express.js

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 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)

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

  1. 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

  2. Chạy lệnh khởi chạy từ CLI rồi làm theo lời nhắc: 

    firebase init hosting

  3. Trả lời có cho "Bạn có muốn sử dụng khung web không? (thử nghiệm)"

  4. 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ó.

  5. Nếu được nhắc, hãy chọn Express.js / custom

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-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 của mình.

Định cấu hình

Để biết cách triển khai ứng dụng, Firebase CLI cần phải có khả năng tạo ứng dụng của bạn và biết vị trí công cụ của bạn đặt các tài sản dành riêng cho tính năng Lưu trữ. Bạn có thể thực hiện việc này bằng tập lệnh bản dựng npm và lệnh 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"
    },
    …
}

Firebase CLI 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 bạn đã đầ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 thực hiện 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 kết quả để phân phát trên Lưu trữ.

Cuối cùng, các khung và công cụ xây dựng khác nhau lưu trữ các cấu phần phần mềm ở 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 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 của bạn trên Cloud Functions cho 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 bao gồm mọi thông tin cần thiết cho máy chủ và điểm truy cập chính đượ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 nhanh 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 cho trình xử lý đó là handle:

export function handle(req, res) {
   res.send(‘hello world’);
}

Triển khai

firebase deploy

Việc này sẽ triển khai nội dung tĩnh của bạn sang tính năng Lưu trữ Firebase và cho phép Firebase quay lại ứng dụng Express của bạn được lưu trữ trên Cloud Functions cho 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 máy khách và máy chủ bằng cookie. Để truy cập vào ngữ cảnh xác thực, đối tượng Express res.locals có thể tuỳ ý 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).