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