神刀安全网

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…

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » koa中利用nginx反向代理动态及静态文件

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮