資訊專欄INFORMATION COLUMN
摘要：背景最近在做一個基于的微信公眾平臺腳手架，由于我只有一個域名，現在同時有好幾個應用在上面掛載著，所以只能做一下反向代理，可是反向代理只能代理動態文件，對于靜態資源貌似沒有什么好的解決方法本文針對以上問題進行逐步解決，通過修改相關配置，并結合
背景
最近在做一個基于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實現反向代理 配置nginxlocation /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的部分代碼
原文地址
http://demozhan.com/2016/03/30/koa-nginx...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79087.html
摘要：背景最近在做一個基于的微信公眾平臺腳手架，由于我只有一個域名，現在同時有好幾個應用在上面掛載著，所以只能做一下反向代理，可是反向代理只能代理動態文件，對于靜態資源貌似沒有什么好的解決方法本文針對以上問題進行逐步解決，通過修改相關配置，并結合 背景 最近在做一個基于koa的微信公眾平臺腳手架，由于我只有一個域名demozhan.com，現在同時有好幾個web應用在上面掛載著，所以只能做一...
Github上的腳手架實在太多，可能大多數都是只專注在前端的web開發，例如流行的React生態中的create-react-app和Vue生態中的Vue-cli, 但是可能作為像我一樣的全棧開發，一個只關注在前端開發的腳手架滿足不了所有的需求，我們可能需要開發更復雜的全棧JS的項目，所以這里介紹又一個基于NodeJS的全棧開發框架 koa-web-kit，不一定適合所有人，但至少又多了個選擇?。...
閱讀 1923·2021-10-11 10:59
閱讀 1032·2021-09-07 09:59
閱讀 2226·2021-08-27 16:17
閱讀 2783·2019-08-30 15:54
閱讀 2274·2019-08-30 12:58
閱讀 1773·2019-08-30 12:53
閱讀 1465·2019-08-28 18:13
閱讀 733·2019-08-26 13:35
