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 cơ bản có 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.

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 xây dựng ứng dụng vừa biết vị trí mà công cụ của bạn đặt các nội dung dành cho Hosting. Đ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.

Giả sử package.json sau:

{
    "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 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 bạn là toàn diện.

{
    "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 ngay lập tức, 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, để 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ụ xây dựng khác nhau lưu trữ các cấu phần phần mềm của chúng ở những vị trí khác nhau. Sử dụng directories.serve để cho CLI biết vị trí mà tập lệnh xây dựng của bạn đ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 npm.

Để thực hiện việc này, hãy đảm bảo rằng chỉ thị files bao gồm mọi thứ cần thiết cho máy chủ và điểm nhậ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 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 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 sẽ triển khai nội dung tĩnh của bạn lê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 Xác thực Firebase

Công cụ triển khai Firebase có nhận biết khung web sẽ tự động giữ cho trạng thái máy khách và máy chủ được đồng bộ hoá bằng cookie. Để truy cập vào ngữ cảnh xác thực, đối tượng Express res.locals tuỳ chọn 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).