如果一个应用需要被部署在一个子路径上, 如 www.xxx.com/app ,则需要对前后端以及nginx等做一些配置.
后端:
以springboot应用为例, 如果jar包部署, 则不需要设置context-path, 直接部署启动, 如果端口为 8080, 则nginx参考配置可以为:
server { listen 80; server_name www.xxx.com; location /app/prod-api/ { proxy_pass http://127.0.0.1:8080/; } }
PS: '/app/prod-api/' 最后的 '/' 不能少, 否则在请求转发之后可能会出现url里面 双斜杠 (//) 的情况, 可能会导致java web服务器如(tomcat) 报错, 'proxy_pass http://127.0.0.1:8080/' 最后的 '/' 也不能少, 这样配置nginx会在转发之后把匹配的整个路径丢弃.
war包部署则可以放在tomcat容器里, 与上面不同的是只需要在 proxy_pass 的转发url后面加上tomcat部署的文件夹名称即可.
前端:
以基于Vue的前后端分离版ruoyi框架为例, 需要配置三个方面:
1. css,js等资源文件的路径: 可以默认以当前路径为基础的相对路径, 如在vue.config.js文件中配置 publicPath: process.env.NODE_ENV === "production" ? "" : "/" 这样如果当前环境为production的话, 则打包出来的index.html中引用的资源文件路径是相对路径
如当前url为 www.xxx.com/app 则资源文件请求会以这个url为基础url.
2. vue router的基础路径: 依然可以参考css,js等的配置, 在 new Router中加入base参数 如下面代码所示:
export default new Router({ mode: 'history', // 去掉url中的# base: process.env.NODE_ENV === "production" ? "/app" : "/", scrollBehavior: () => ({ y: 0 }), routes: constantRoutes })
3. 后端接口的url路径: 在.env.production文件中配置 VUE_APP_BASE_API = '/app/prod-api' 其原理为在所有后端api的url前面加上前缀, 让它可以匹配到上面nginx配置中的后端路径
后端+前端nginx示例配置文件:
server { listen 80; server_name www.xxx.com; location /app/prod-api/ { proxy_pass http://127.0.0.1:8080/; } location /app { alias D:/application/web/app; try_files $uri $uri/ /index.html?$query_string; index index.html; } }
与正常配置不同的是不能使用root指定文件目录, 需要使用alias, 因为不能把url中的 /app 带入目录中查找文件