koa中利用nginx反向代理动态及静态文件

背景

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

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

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

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

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

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

配置nginx实现反向代理

配置nginx

location /weixin {
        proxy_pass http://localhost:3333;
}

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

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

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

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源码

  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的代码

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的部分代码

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

原文地址

http://demozhan.com/2016/03/30/koa-nginx...