koa中利用nginx反向代理動態(tài)及靜態(tài)文件

figofuture 發(fā)布于2019-07-25 13:38 / 2066人閱讀

摘要：背景最近在做一個基于的微信公眾平臺腳手架，由于我只有一個域名，現(xiàn)在同時有好幾個應(yīng)用在上面掛載著，所以只能做一下反向代理，可是反向代理只能代理動態(tài)文件，對于靜態(tài)資源貌似沒有什么好的解決方法本文針對以上問題進(jìn)行逐步解決，通過修改相關(guān)配置，并結(jié)合

背景

最近在做一個基于koa的微信公眾平臺腳手架，由于我只有一個域名demozhan.com，現(xiàn)在同時有好幾個web應(yīng)用在上面掛載著，所以只能做一下反向代理，可是反向代理只能代理動態(tài)文件，對于靜態(tài)資源貌似沒有什么好的解決方法

本文針對以上問題進(jìn)行逐步解決，通過修改nginx相關(guān)配置，并結(jié)合koa-router以及koa-static，就可以解決上述問題。

配置koa-static解決端口下靜態(tài)文件的問題

var serve = require("koa-static");
// 使用./public下的靜態(tài)文件
app.use(serve(__dirname + "/public"));

通過以上配置就可以將public文件夾作為靜態(tài)文件夾，在請求 http://localhost:3333/login/css/index.cs... 的時候就會去查找本地文件夾

通過以上過程就解決了，不做反向代理情況下的靜態(tài)文件的配置

配置nginx實(shí)現(xiàn)反向代理 配置nginx

location /weixin {
        proxy_pass http://localhost:3333;
}

這個沒什么好講的，可是直接這樣的操作導(dǎo)致整個頁面都訪問不到

直接反向代理請求/weixin/login/會代理到3333端口，但是請求的path依舊是/weixin/login/

解決方案：添加router前綴，保證請求鏈接一致

var router = new Router({
  prefix: "/weixin"
});

通過以上方法，請求/weixin/login鏈接就對應(yīng)router中的login

靜態(tài)文件失效

通過以上配置，login頁面渲染出來了，可是加載的css文件都404了。

通過調(diào)試koa-static分析原因，由于修改了router的前綴了，所以所有靜態(tài)文件請求都變成/weixin/css/login.css；請求鏈接錯誤

解決方法

大概思路就是通過傳入一個參數(shù)，表示要去除的路徑，改變path路徑，koa-static的具體原理我還沒有深入

修改koa-static源碼

  if (!opts.defer) {
    return function * serve(next) {
      if (this.method == "HEAD" || this.method == "GET") {
        //在默認(rèn)情況下this.path = "/css/style.css" 會轉(zhuǎn)變?yōu)楸镜?../public/css/style.css文件路徑
        //由于做了反向代理this.path = "/weixin/css/style.css"
        //由于做了反向代理需要修改靜態(tài)文件的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下的靜態(tài)文件
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...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/39255.html

發(fā)表評論

登陸后可評論

0條評論

figofuture

男|高級講師

我要關(guān)注我要私信

TA的文章

國內(nèi)云主機(jī)為什么那么貴？主要從4個方面來決定！

閱讀 2668·2021-11-22 13:53
寶塔面板搭建uptime-kuma – 自建一個TCP/HTTP網(wǎng)站監(jiān)控程序

閱讀 4223·2021-09-28 09:47
商城用什么主機(jī)-買什么游戲主機(jī)好？

閱讀 955·2021-09-22 15:33
UCloud快杰云主機(jī) 提升糖豆App運(yùn)營與質(zhì)量實(shí)戰(zhàn)

閱讀 921·2020-12-03 17:17
CSS結(jié)構(gòu)與布局

閱讀 3377·2019-08-30 13:13
前端每日實(shí)戰(zhàn)：90# 視頻演示如何用 CSS 和 D3 創(chuàng)作一個無盡的六邊形空間

閱讀 2189·2019-08-29 16:09
VUE，關(guān)于導(dǎo)航列表樣式切換（VUE Router：router-link-active）

閱讀 1247·2019-08-29 12:24
CSS實(shí)現(xiàn)元素水平居中

閱讀 2521·2019-08-28 18:14

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

koa中利用nginx反向代理動態(tài)及靜態(tài)文件

相關(guān)文章