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...