转载

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);

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

原文 https://segmentfault.com/a/1190000004834948

正文到此结束

所属分类：编程技术

本文标签： Nginx UI 参数 web 配置 list cat HTML App js 域名 https 代码 ACE 端口 CSS http 源码调试解决方法
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

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

背景

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

配置nginx实现反向代理

配置nginx

静态文件失效

解决方法

汇总

原文地址

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流