koa-nginx-反向代理

Posted on   |  

背景

最近在做一个基于koa的微信公众平台脚手架（过一段时间会放到我的github上），由于我只有一个域名demozhan.com，现在同时有好几个web应用在上面挂载着，所以只能做一下反向代理，可是反向代理只能代理动态文件，对于静态资源貌似没有什么好的解决方法

本文针对以上问题进行逐步解决，通过修改nginx相关配置，并结合koa-router以及koa-static，就可以解决上述问题。

配置koa-static解决端口下静态文件的问题

1
2
3
var serve = require('koa-static');
// 使用./public下的静态文件
app.use(serve(__dirname + '/public'));

通过以上配置就可以将public文件夹作为静态文件夹，在请求http://localhost:3333/login/css/index.css的时候就会去查找本地文件夹

通过以上过程就解决了，不做反向代理情况下的静态文件的配置

配置nginx实现反向代理

配置nginx

1
2
3
location /weixin {
		proxy_pass http://localhost:3333;
}

这个没什么好讲的，可是直接这样的操作导致整个页面都访问不到

直接反向代理请求/weixin/login/会代理到3333端口，但是请求的path依旧是/weixin/login/

解决方案：添加router前缀，保证请求链接一致

1
2
3
var router = new Router({
  prefix: '/weixin'
});

通过以上方法，请求/weixin/login链接就对应router中的login

静态文件失效

通过以上配置，login页面渲染出来了，可是加载的css文件都404了。

通过调试koa-static分析原因，由于修改了router的前缀了，所以所有静态文件请求都变成/weixin/css/login.css；请求链接错误

解决方法

大概思路就是通过传入一个参数，表示要去除的路径，改变path路径，koa-static的具体原理我还没有深入

修改koa-static源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if (!opts.defer) {
  return function * serve(next) {
    if (this.method == 'HEAD' || this.method == 'GET') {
      //在默认情况下this.path = '/css/style.css' 会转变为本地.../public/css/style.css文件路径
      //由于做了反向代理this.path = '/weixin/css/style.css'
      //由于做了反向代理需要修改静态文件的path = '/css/style.css'
      var path
      if (opts.proxy) {
        path = this.path.replace(opts.proxy, '');
      } else {
        path = this.path;
      }
      if (yield send(this, path, opts)) return;
    }
    yield* next;
  };
}

汇总

index.js的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var koa = require('koa');
var Router = require('koa-router');
var serve = require('koa-static');
var app = koa();
var Weixin = require('./weixin/weixin')('zhanfang');
var router = new Router({
  prefix: '/weixin'
});
//路由配置
router.get('/login', Weixin.webLogin());
// 使用./public下的静态文件
app.use(serve(__dirname + '/public', {
  proxy: '/weixin'
}));
app.use(logger());
app.use(router.routes())
  .use(router.allowedMethods());
app.on('error', function(err) {
  console.log(err);
})
app.listen(3333);

login.html的部分代码

1
2
<link rel="stylesheet" href="css/style.css" charset="utf-8">
<link rel="stylesheet" href="css/login.css" charset="utf-8">