Skip to main content

静态资源(Static File)

静态资源一般用来托管前端文件(js/css/html/png)等。 ​

在 @midwayjs/web 使用#

Egg.js 默认提供了 static 插件,只需配置插件启用即可。

// src/config/plugin.tsexports.static = true;

egg-static 插件基于 koa-static-cache 模块,支持其所有的配置。 ​

插件默认的 config 配置为:

{    prefix: '/public/',  dir: path.join(appInfo.baseDir, 'app/public'),}

prefix 表示 URL 路径前缀,dir 表示静态文件存放的位置。比如 ${baseDir}/app/public/a.js 这个文件,在开启插件后,所访问的 URL 为 http://127.0.0.1:7001/public/a.js

更多配置,请查看 koa-static-cache 文档。

在 @midwayjs/koa 使用#

和 Egg.js 类似,我们可以直接引入 koa-static-cache 模块。

$ npm i koa-static-cache --save

然后在 configuration.ts 中直接加入中间件即可。 ​

下面的示例,我们将资源目录放到了项目目录下的 public 目录中。

// src/configuration.ts
import { Configuration, App } from '@midwayjs/decorator';import { Application } from '@midwayjs/koa';import * as staticCache from 'koa-static-cache';
@Configuration()export class AutoConfiguration {  @App()  app: Application;
  async onReady() {    this.app.use(      staticCache({        prefix: '/public/',        dir: path.join(this.app.getAppDir(), 'public'),      })    );  }}

更多配置,请查看 koa-static-cache 文档。

在 @midwayjs/express 使用#

Express 中自带了 static 的支持,直接在 configuration.ts 中直接加入中间件即可。

// src/configuration.ts
import { Configuration, App } from '@midwayjs/decorator';import { Application } from '@midwayjs/express';import * as express from 'express';
@Configuration()export class AutoConfiguration {  @App()  app: Application;
  async onReady() {    this.app.use(express.static('public'));  }}

现在,可以访问位于 public 目录中的文件:

http://localhost:3000/images/kitten.jpghttp://localhost:3000/css/style.csshttp://localhost:3000/js/app.jshttp://localhost:3000/images/bg.pnghttp://localhost:3000/hello.html
caution

注意:Express 相对于静态目录查找文件,因此静态目录的名称不是此 URL 的一部分。

如果你想修改路由,可以通过下面的 API。

app.use('/static', express.static(path.join(__dirname, 'public')));

更多配置,请参考 express 文档。 ​

在 Serverless 场景使用#

Serverless 场景较为特殊,网关不支持流式处理,所以在使用时,需要寻找支持 buffer 返回的库。

koa-static-cache 模块支持 buffer 返回。

$ npm i koa-static-cache --save

然后在 configuration.ts 中直接加入中间件。

// src/configuration.ts
import { Configuration, App } from '@midwayjs/decorator';import { Application } from '@midwayjs/faas';import * as staticCache from 'koa-static-cache';
@Configuration()export class AutoConfiguration {  @App()  app: Application;
  async onReady() {    this.app.use(      staticCache({        prefix: '/public/',        dir: join(__dirname, '../public'),        dynamic: true,        preload: false,        buffer: true, // 注意,这里是 true        maxFiles: 1000,      })    );  }}

非高密度场景下(普通函数),需要提供一个 /* 的路由函数,否则不会进入函数逻辑(自然就走不到中间件中)。 ​

比如,为了中间件可进入,我们增加一个空的 Get /public/* 的路由即可(写 public/* 的目的是防止其他非 public 静态资源的路由走到这个函数)。

import { Inject, Provide, Controller, Get } from '@midwayjs/decorator';import { Context } from '@midwayjs/faas';
@Provide()export class ServerlessHelloService {
  @Inject()  ctx: Context;
  // 普通路由  @ServerlessTrigger(ServerlessTriggerType.HTTP, {    path: '/:user_id',    method: 'get',  })  async hello1() {    return 22;  }
  @ServerlessTrigger(ServerlessTriggerType.HTTP, {    path: '/public/*',    method: 'get',  })  async render() {    // 这个函数的作用是为了让 static 全局中间件被执行。  }}

更多配置,请参考 koa-static-cache 模块文档。