Serve Static — Tài liệu NestJS tiếng Việt

Để phục vụ nội dung tĩnh (static content) như một Single Page Application (SPA), chúng ta có thể dùng ServeStaticModule từ package @nestjs/serve-static.

Cài đặt

Đầu tiên chúng ta cần cài package cần thiết:

$ npm install --save @nestjs/serve-static

Bootstrap

Sau khi cài đặt xong, chúng ta có thể import ServeStaticModule vào AppModule gốc và cấu hình nó bằng cách truyền vào một object cấu hình cho method forRoot().

import { Module } from '@nestjs/common';
import { AppController } from './app.controller.js';
import { AppService } from './app.service.js';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'node:path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(import.meta.dirname, '..', 'client'),
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Sau khi thiết lập xong, hãy build website tĩnh và đặt nội dung của nó vào vị trí được chỉ định bởi thuộc tính rootPath.

Cấu hình

ServeStaticModule có thể được cấu hình với nhiều tùy chọn khác nhau để tùy biến hành vi của nó. Bạn có thể thiết lập path để render app tĩnh của mình, chỉ định các path bị loại trừ, bật hoặc tắt việc thiết lập header response Cache-Control, v.v. Xem danh sách đầy đủ các tùy chọn tại đây.

Chú ý renderPath mặc định của Static App là * (tất cả các path), và module sẽ trả về file “index.html” trong response. Điều này cho phép bạn tạo Client-Side routing cho SPA của mình. Các path được chỉ định trong controller của bạn sẽ fallback về server. Bạn có thể thay đổi hành vi này bằng cách thiết lập serveRoot, renderPath kết hợp cùng các tùy chọn khác. Ngoài ra, tùy chọn serveStaticOptions.fallthrough đã được triển khai trong Fastify adapter để mô phỏng hành vi fallthrough của Express, và cần được đặt là true để trả về index.html thay vì lỗi 404 đối với route không tồn tại.

Ví dụ

Một ví dụ hoạt động đầy đủ có tại đây.

Ghi chú người dịch Về bản chất, ServeStaticModule chỉ là một wrapper quanh middleware phục vụ file tĩnh (giống express.static() trong Express, hoặc http.FileServer trong Go). Phần đáng chú ý là cơ chế fallback: vì SPA dùng client-side router (React Router, Vue Router…), mọi path không khớp route API nào ở backend cần trả về index.html để router phía client tự xử lý — chứ không phải trả 404.