If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.

Trang này được dịch bởi Cloud Translation API.

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 tính 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 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 trên 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 câu hỏi "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ữ; đâ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.

Với 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 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 của bạn đang xuất ra 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 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 kiểu Express) được xuất theo cách mà Firebase có thể tìm thấy ứng dụng đó 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 nhận biết khung web sẽ tự động đồng bộ hoá trạng thái máy chủ và ứng dụng 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).