資訊專欄INFORMATION COLUMN
摘要：背景最近在做一個(gè)基于的微信公眾平臺(tái)腳手架，由于我只有一個(gè)域名，現(xiàn)在同時(shí)有好幾個(gè)應(yīng)用在上面掛載著，所以只能做一下反向代理，可是反向代理只能代理動(dòng)態(tài)文件，對(duì)于靜態(tài)資源貌似沒有什么好的解決方法本文針對(duì)以上問題進(jìn)行逐步解決，通過修改相關(guān)配置，并結(jié)合
背景
最近在做一個(gè)基于koa的微信公眾平臺(tái)腳手架，由于我只有一個(gè)域名demozhan.com，現(xiàn)在同時(shí)有好幾個(gè)web應(yīng)用在上面掛載著，所以只能做一下反向代理，可是反向代理只能代理動(dòng)態(tài)文件，對(duì)于靜態(tài)資源貌似沒有什么好的解決方法
本文針對(duì)以上問題進(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)文件夾，在請(qǐng)求 http://localhost:3333/login/css/index.cs... 的時(shí)候就會(huì)去查找本地文件夾
通過以上過程就解決了，不做反向代理情況下的靜態(tài)文件的配置
配置nginx實(shí)現(xiàn)反向代理 配置nginxlocation /weixin {
proxy_pass http://localhost:3333;
}
這個(gè)沒什么好講的，可是直接這樣的操作導(dǎo)致整個(gè)頁(yè)面都訪問不到
直接反向代理請(qǐng)求/weixin/login/會(huì)代理到3333端口，但是請(qǐng)求的path依舊是/weixin/login/
解決方案：添加router前綴，保證請(qǐng)求鏈接一致
var router = new Router({
prefix: "/weixin"
});
通過以上方法，請(qǐng)求/weixin/login鏈接就對(duì)應(yīng)router中的login
靜態(tài)文件失效通過以上配置，login頁(yè)面渲染出來了，可是加載的css文件都404了。
通過調(diào)試koa-static分析原因，由于修改了router的前綴了，所以所有靜態(tài)文件請(qǐng)求都變成/weixin/css/login.css；請(qǐng)求鏈接錯(cuò)誤
解決方法大概思路就是通過傳入一個(gè)參數(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" 會(huì)轉(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);
login.html的部分代碼
原文地址
http://demozhan.com/2016/03/30/koa-nginx...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/39255.html
摘要：背景最近在做一個(gè)基于的微信公眾平臺(tái)腳手架，由于我只有一個(gè)域名，現(xiàn)在同時(shí)有好幾個(gè)應(yīng)用在上面掛載著，所以只能做一下反向代理，可是反向代理只能代理動(dòng)態(tài)文件，對(duì)于靜態(tài)資源貌似沒有什么好的解決方法本文針對(duì)以上問題進(jìn)行逐步解決，通過修改相關(guān)配置，并結(jié)合 背景 最近在做一個(gè)基于koa的微信公眾平臺(tái)腳手架，由于我只有一個(gè)域名demozhan.com，現(xiàn)在同時(shí)有好幾個(gè)web應(yīng)用在上面掛載著，所以只能做一...
Github上的腳手架實(shí)在太多，可能大多數(shù)都是只專注在前端的web開發(fā)，例如流行的React生態(tài)中的create-react-app和Vue生態(tài)中的Vue-cli, 但是可能作為像我一樣的全棧開發(fā)，一個(gè)只關(guān)注在前端開發(fā)的腳手架滿足不了所有的需求，我們可能需要開發(fā)更復(fù)雜的全棧JS的項(xiàng)目，所以這里介紹又一個(gè)基于NodeJS的全棧開發(fā)框架 koa-web-kit，不一定適合所有人，但至少又多了個(gè)選擇?。...
摘要：前言老項(xiàng)目，項(xiàng)目情況端配置運(yùn)行環(huán)境方面有些人開發(fā)環(huán)境是，有些是。以我的開發(fā)環(huán)境為例老項(xiàng)目的運(yùn)行，開發(fā)時(shí)需要先執(zhí)行一個(gè)腳本經(jīng)歷過一次風(fēng)波之后做的人走光啦，但是老項(xiàng)目要繼續(xù)維護(hù)。老項(xiàng)目改造其實(shí)還有不少坑，等我想起來再慢慢更新。 前言 老項(xiàng)目，React + PHP + nginx 項(xiàng)目情況 PHP端配置 PHP運(yùn)行環(huán)境方面：有些人開發(fā)環(huán)境是wamp（apache + PHP），有些是np...
閱讀 2567·2021-11-22 13:53
閱讀 4069·2021-09-28 09:47
閱讀 858·2021-09-22 15:33
閱讀 808·2020-12-03 17:17
閱讀 3315·2019-08-30 13:13
閱讀 2121·2019-08-29 16:09
閱讀 1176·2019-08-29 12:24
閱讀 2452·2019-08-28 18:14
