NestJS 静态文件

举报
AnRFDev 发表于 2021/07/11 15:56:49 2021/07/11
【摘要】 使用NestJs,允许访问服务器上的静态文件。

为了提供静态资源,我们可以用@nestjs/serve-static包里的ServeStaticModule
服务器上的静态资源,一般指的是文件,比如图片、音频、视频、文本文件或者二进制文件等等。

或者是一些单页面应用程序(Single Page Application, SPA)。从服务器上请求得到网页,然后网页再执行自己的业务。

安装

首先我们需要安装@nestjs/serve-static包。
在工程路径下

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

安装完成后,工程的package.json里会多出

  "dependencies": {
    "@nestjs/serve-static": "^2.1.4",
  }

使用

在root AppModule中,引入ServeStaticModule模块。

import { ServeStaticModule } from '@nestjs/serve-static';

@Module({
  imports: [
  ServeStaticModule.forRoot({
    rootPath: join(__dirname, '..', 'rustfisherData'),
    exclude: ['/api*'],
  }),],
})
export class AppModule { }

imports里添加了ServeStaticModule模块。需要用到ServeStaticModule.forRoot方法。

  • rootPath 指定了静态文件的根目录
  • exclude 表明排除在外的文件和目录

路径说明

我们关心的是,服务器上哪个目录可以让客户端访问,哪个目录是不开放的。

__dirname 获取到的是当前目录的路径。
使用join()方法,拼接出一个新的路径。

工程编译出来的文件放在dist目录中。app.module.js文件也在里面。
此时__dirname表示的是dist目录的路径。
那么join(__dirname, '..', 'rustfisherData')得到的路径就是与dist目录同级的rustfisherData

假设我们服务器上运行目录是/home/rustfisher/server/rf-server-nest/dist
那么静态文件存放的目录就是/home/rustfisher/server/rf-server-nest/rustfisherData

配置

ServeStaticModule提供了丰富的自定义控制。开发者可以自定义它的行为。
比如像前面那样设置静态文件根目录rootPath;设置排除的路径exclude

GitHub上有详细配置

注意
访问目录时,默认会找index.html文件发送回去。后文会有更多说明。

客户端访问

假设服务部署好了(并不是真实项目),网址是 https://rustfisher.com 。部署好服务后,我们测试一下。

打开浏览器,访问url: https://rustfisher.com/some/path/to/img/11.jpg
可以在网页上看到图片(并不是真实项目)。

如果访问一个不存在的路径(文件),它会返回一个默认的index.html。如果没有这个文件,则会报一个ENOENT错误信息

[Nest] 32378   - 07/10/2021, 8:15:00 PM   [ExceptionsHandler] ENOENT: no such file or directory, 
stat '/home/rustfisher/server/rf-server-nest/rustfisherData/index.html' +234539ms

不想让它报这个错,我们可以自己弄一个index.html文件放到对应路径上。
这样做的话,访问目录或者不存在的文件会默认返回index.html文件。

小结

提供访问静态文件的功能比较常见。客户端使用一个url,就能访问服务器上的文件。
现在很常见的做法是把文件放在CDN上,减轻服务器的io压力和网络压力。
在Linux服务器上,nginx和同类的服务也能轻松实现类似的提供静态文件的功能。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。