nginx部署Vue和SpringBoot（前后端多服务混合）

Posted 2023-02-18 BerryJamLv

场景需求

公司目前有三套系统
1、门户网站，SpringBoot搭建的前后端一体框架
2、HR系统，SpringBoot做后端、Vue做前端
3、CRM系统，SpringBoot做后端、Vue做前端

要求三个网站统一部署在服务器80端口上：
1、根路径 / 访问 门户网站
2、路径 /hr/ 访问 HR系统
3、路径 /crm/ 访问 CRM系统

测试环境

下文部署所用的环境均为Mac系统下的本地测试环境 ，服务地址均为 http://localhost/

nginx配置

Mac下Nginx的配置路径：
静态文件存放根路径为 /usr/local/var/www
配置文件存放根路径为 /usr/local/etc/nginx / nginx.conf

可能用到的命令：

 nginx -s reload // 重载配置文件

1）nginx.conf 配置解析

首先放出配置文件

# 门户网站
location / 
    proxy_pass http://localhost:8001; # 门户网站部署地址


# hr系统vue前端
location /hr/ 
    root  html;
    index  index.html index.htm;
    try_files $uri $uri/ /hr/index.html;  # 防止vue页面刷新出现404

# hr系统SpringBoot后端 (提供给前端做代理使用)
location /hr-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:8002/; # SpringBoot后端部署地址


# crm系统vue前端
location /crm/ 
    root  html;
    index  index.html index.htm;
    try_files $uri $uri/ /crm/index.html;  # 防止vue页面刷新出现404

# crm系统SpringBoot后端 (提供给前端做代理使用)
location /crm-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:8003/; # SpringBoot后端部署地址

注释及说明见以上配置文档

2）vue前端配置分析

以HR系统为例：
1.修改vue.config.js 中 publicPath: '/hr/'

2.修改vue-router src/router/index.js 添加 base: '/hr/'

3.修改axios请求baseURL 为 /hr-api


本例中我将修改文件 /.env.production 中的 VUE_APP_BASE_API = '/hr-api'

• CRM系统部署同HR系统，故不再赘述

3）项目部署文件结构

使用 npm run build 命令打包前端项目 ，将打包好的文件放入 /usr/local/var/www

项目文件存放路径及文件夹命名方法如下图

重载Nginx配置文件，启动后端服务，系统至此部署完成