Nginx部署多个vue项目
同一台nginx 部署多个vue项目
·
文章目录
例如现在有一个需求,要在同一台Nginx上部署两个基于若依的项目,分别是projectA和projectB,projectA 部署在 http://example.com 域名下,projectB部署在http://example.com/test 下。
1. projectA 部署
1.1 前端部署
打包编译
# 进入前端项目根路径
cd projectA/ruoyi-ui
# 编译
npm run build:prod
# 编译会生成 dist目录, 里面是编译的产物
Nginx 配置
location / {
# 配置访问根路径,将打包后的dist目录放在 home目录下
root /home/dist;
index index.html index.htm;
charset utf-8;
# 防止浏览器刷新
try_files $uri $uri/ /index.html;
}
1.2 后端部署
编译出jar包,上传至服务器
Nginx 配置后端服务
location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 假设 后端服务在本机的8080端口
proxy_pass http://localhost:8080/;
}
2. projectB部署
2.1 前端部署
项目修改:
1> 找到vue.config.js 配置前缀test
publicPath: process.env.NODE_ENV === "production" ? "/test/" : "/",
2> 找到 src/router/index.js 配置
export default new Router({
mode: 'history', // 去掉url中的#
// 配置 test
base:'test',
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
// 静态资源配置根路径
export function getBaseUrl() {
let baseUrl = ''
if (process.env.NODE_ENV === 'development') {
// 开发模式
baseUrl = '/'
} else {
// 生产环境
baseUrl = '/test/'
}
return baseUrl
}
3> nginx 配置
location /test/ {
# 前端根路径,记得最后加 /
alias /home/test/dist/;
index index.html index.htm;
try_files $uri $uri/ /test/index.html;
}
2.2 后端部署和前面一样只是换了端口(如果服务location变了记得前端也要修改)
例如:
location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8082/;
}
通过以上配置就可以 通过http://example.com 访问projectA 通过http://example.com/test访问projectB
更多推荐
已为社区贡献1条内容
所有评论(0)