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

opengps 发布于2019-08-19 18:01 / 2871人阅读

摘要：背景最近在做一个基于的微信公众平台脚手架，由于我只有一个域名，现在同时有好几个应用在上面挂载着，所以只能做一下反向代理，可是反向代理只能代理动态文件，对于静态资源貌似没有什么好的解决方法本文针对以上问题进行逐步解决，通过修改相关配置，并结合

背景

最近在做一个基于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);

原文地址

http://demozhan.com/2016/03/30/koa-nginx...

服务器托管云服务器 nginx反向代理 nginx 反向代理cdn nginx反向代理https nginx反向代理nodejs

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79087.html

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

摘要：背景最近在做一个基于的微信公众平台脚手架，由于我只有一个域名，现在同时有好几个应用在上面挂载着，所以只能做一下反向代理，可是反向代理只能代理动态文件，对于静态资源貌似没有什么好的解决方法本文针对以上问题进行逐步解决，通过修改相关配置，并结合背景最近在做一个基于koa的微信公众平台脚手架，由于我只有一个域名demozhan.com，现在同时有好几个web应用在上面挂载着，所以只能做一...

figofuture 2019-07-25 13:38 评论0 收藏0
下一代基于Koa的NodeJS全栈开发框架

Github上的脚手架实在太多，可能大多数都是只专注在前端的web开发，例如流行的React生态中的create-react-app和Vue生态中的Vue-cli, 但是可能作为像我一样的全栈开发，一个只关注在前端开发的脚手架满足不了所有的需求，我们可能需要开发更复杂的全栈JS的项目，所以这里介绍又一个基于NodeJS的全栈开发框架 koa-web-kit，不一定适合所有人，但至少又多了个选择?。...

oliverhuang 2019-08-22 16:22 评论0 收藏0
老项目改造记

摘要：前言老项目，项目情况端配置运行环境方面有些人开发环境是，有些是。以我的开发环境为例老项目的运行，开发时需要先执行一个脚本经历过一次风波之后做的人走光啦，但是老项目要继续维护。老项目改造其实还有不少坑，等我想起来再慢慢更新。前言老项目，React + PHP + nginx 项目情况 PHP端配置 PHP运行环境方面：有些人开发环境是wamp（apache + PHP），有些是np...

SimonMa 2019-08-20 15:11 评论0 收藏0
Nginx

摘要：此外，其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的，第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机（启用网卡二并使用桥接模式）:A服务器：192.168.0.103 主B服务器：192.168.0.104 主（备）前端工程师学习 Nginx ...

syoya 2019-07-25 14:06 评论0 收藏0