Nodejs Nestjs静态文件服务插件@nestjs/serve-static的使用

Nodejs Nestjs静态文件服务插件@nestjs/serve-static的使用
[@nestjs](/user/nestjs)/serve-static 是一个用于在 NestJS 应用程序中提供静态文件服务的插件。它允许你通过简单的配置来为你的应用程序提供静态资源（如图片、CSS 文件和 JavaScript 文件等）。下面是如何安装和配置这个插件的基本步骤。

1. 安装依赖

首先，你需要安装 [@nestjs](/user/nestjs)/serve-static 和 serve-static 包：

npm install [@nestjs](/user/nestjs)/serve-static serve-static

2. 配置模块

接下来，在你的 NestJS 模块中配置 ServeStaticModule。你可以通过传递一个配置对象来指定静态文件的位置和一些其他选项。

基本配置

假设你有一个名为 public 的目录，里面存放了所有的静态文件，你可以这样配置：

import { Module } from '[@nestjs](/user/nestjs)/common';
import { ServeStaticModule } from '[@nestjs](/user/nestjs)/serve-static';
import * as path from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: path.join(__dirname, '..', 'public'),
    }),
  ],
})
export class AppModule {}

这里的 rootPath 参数指定了静态文件的根目录路径。

动态配置

你也可以动态地为不同的路径提供不同的静态文件服务：

import { Module } from '[@nestjs](/user/nestjs)/common';
import { ServeStaticModule } from '[@nestjs](/user/nestjs)/serve-static';
import * as path from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: path.join(__dirname, '..', 'public'),
      serveRoot: '/static',
    }),
    ServeStaticModule.forChild({
      rootPath: path.join(__dirname, '..', 'images'),
      serveRoot: '/images',
    }),
  ],
})
export class AppModule {}

在这个例子中，我们为 /static 路径提供了 public 目录下的文件，而 /images 路径则指向 images 目录。

3. 使用静态文件

一旦配置完成，你可以通过浏览器访问这些静态文件。例如，如果你配置了 serveRoot: '/static'，并且你的 public 目录下有一个名为 style.css 的文件，那么你可以通过 http://localhost:3000/static/style.css 来访问它。

注意事项

  • 确保你的静态文件目录结构与你在代码中配置的一致。
  • 在生产环境中，考虑使用更高效的方式来提供静态文件，比如 Nginx 或者 AWS S3。

以上就是如何在 NestJS 中使用 [@nestjs](/user/nestjs)/serve-static 插件来提供静态文件服务的基本方法。希望这对你有所帮助！


3 回复

当然，没问题！想象一下，@nestjs/serve-static就像是给你的NestJS应用添加了一个魔法盒子，让你可以轻松地分享那些藏在你项目深处的静态文件，比如图片、CSS或JavaScript文件。

首先，你需要用npm或者yarn安装这个魔法盒子：

npm install [@nestjs](/user/nestjs)/serve-static

然后，在你的模块文件（比如app.module.ts）里，你需要召唤这个魔法盒子，并告诉它哪些文件夹是你的秘密宝库：

import { Module } from '[@nestjs](/user/nestjs)/common';
import { ServeStaticModule } from '[@nestjs](/user/nestjs)/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'static'), // 这里指向你的静态文件夹
    }),
  ],
})
export class AppModule {}

现在，任何存放在static文件夹里的东西都可以通过网络直接访问了。比如，如果你有一张图片存放在static/images/cat.jpg，那么它就能通过http://yourdomain.com/images/cat.jpg被看到啦！

是不是很简单呢？这下你可以放心大胆地分享你的文件了！


@nestjs/serve-static 是一个NestJS插件，用于将静态文件服务集成到你的NestJS应用中。它基于Express的express-serve-static-core中间件，允许你为应用提供静态资源，如HTML、CSS、JavaScript、图片等。

安装

首先，你需要安装@nestjs/serve-static和serve-static（如果你还没有的话）：

npm install @nestjs/serve-static serve-static

配置

  1. 导入模块：在你的模块文件（通常是app.module.ts）中导入ServeStaticModule。

  2. 配置静态文件路径：使用forRoot()方法来指定静态文件所在的目录以及URL路径。

以下是一个基本示例，假设你的静态文件存放在项目根目录下的public文件夹中，并且你想通过/static路径访问它们：

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    // ServeStaticModule.forRoot() 接受一个对象作为参数，
    // 可以设置多个选项，如 rootPath, prefix 等。
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'public'), // 静态文件所在目录
      serveRoot: '/static', // URL路径前缀
    }),
  ],
})
export class AppModule {}

动态配置

如果需要在运行时动态设置静态文件服务的配置，可以使用forRootAsync方法：

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRootAsync({
      useFactory: () => ({
        rootPath: join(__dirname, '..', 'public'),
        serveRoot: '/dynamic-static',
      }),
    }),
  ],
})
export class AppModule {}

使用

配置完成后，你可以通过配置的路径访问静态文件。例如，如果配置了/static作为静态文件的服务路径，那么位于public文件夹中的index.html可以通过http://localhost/static/index.html访问。

这样，你就成功地将静态文件服务集成为NestJS应用的一部分了。

@nestjs/serve-static 是一个NestJS插件，用于提供静态文件服务。首先安装该插件和依赖：

npm install @nestjs/serve-static express serve-static

然后在模块中配置并使用它：

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'public'), // 静态文件存放目录
    }),
  ],
})
export class AppModule {}

这样配置后，NestJS应用就能通过指定路径访问 public 目录下的静态文件了。

回到顶部