背景

近来在做一个基于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…