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...
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
