卷王 surveyKing 前后端分离部署卷王surveyking 前后端分离部署，前端逆向，前端添加访问前缀，ngin

一、背景说明

卷王开源地址： gitee.com/surveyking/…
现状说明：

当前只开源了后端代码，前端只提供编译后的文件。
前端静态资源context-path 为"/"只能通过根路径访问。
前端后端资源位于同一个jar中

目标：

前后端分离部署，前端通过nginx代理，后端按照原有方式，基于java -jar 的方式运行。
前端可以添加 context-path , 如 /survey进行访问，而非根路径（会占用nginx端口根路径资源）。

二、已编译的前端资源改造过程

1、资源获取

方式一：从开源仓库中直接去拿： server/api/src/main/resources/static
方式二：通过解压部署文件: surveyking-v1.7.0.jar 获取

2、改造文件添加context-path : "/survey"

改造入口文件 index.html

<!-- 样式表， 添加/survey -->
<link rel="stylesheet" href="/survey/umi.6e0d8e90.css" />

<!-- js脚本， 添加/survey -->
<script src="/survey/umi.39c404cc.js"></script>

<!-- /favicon.ico， 添加/survey -->
<link rel="icon" href="/survey/favicon.ico" type="image/x-icon" />

<!-- umi的routerbase， 由 / 调整为  /survey -->

<script>
  window.routerBase = "/survey/";
</script>

改造接口请求路径

//1、 所有的 /api 请求，修改访问路径为 /survey-server/api 
// /survey-server 为nginx 代理后端接口的 location
children: (0, c.jsx)(b.Z.PreviewGroup, {
	children: r == null ? void 0 : r.filter(function (a) {
		return W(a.originalName)
	}).map(function (a) {
		return (0, c.jsx)(b.Z, {
			width: 185,
			src: "/survey-server/api/file?id=".concat(a.id),
			alt: a.originalName,
			height: 140
		}, a.id)
	})
})

// 2、所有的 /captcha, 修改访问路径为 /survey-server/captcha

var $e = function (r) {
    return ye.hi.post("/survey-server/captcha/get", r)
};

改造 umi.xx.js 入口文件动态加载资源的 context-path

//1、.7.0 对应 umi.39c404cc.js 文件
//2、检索__webpack_require__.p="/",不同版本之间 __webpack_require__ 的key键名，会略有差异，挨个找即可。找到后将 __webpack_require__.p="/" 修改为 __webpack_require__.p="/survey

function(){__webpack_require__.p="/survey/"}

三、后端 jar 包部署，参照官方文档正常部署即可，默认开放端口 1991

surveyking.cn/help/quicks…

四、nginx前后端代理配置

# 静态资源托管
# 卷王前端路由使用的是 history 模式，需fallback到 /survey/index.html
location /survey {
        root  /home/surveyking/view/surveyking;
        index  index.html index.htm;
        try_files $uri $uri/ /survey/index.html;
}
# 后端代理，当访问 /survey-server/api 时，代理至http://1xx.xxx.xxx.xxx:1991/api
location /survey-server {
                rewrite ^/survey-server(/.*)$ $1 break;  
                proxy_pass http://1xx.xxx.xxx.xxx:1991/; 
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_redirect off;
}

# 卷王默认生成的为/s 的方式，需代理到  /survey/s
location /s/ {
        rewrite ^/s/(.*)$ /survey/s/$1 break;
        proxy_pass http://xxx.xxxx.cn;
}