1、系统资源结构情况
1.1、后台
11003端口
服务根路径是/qmp
1.2、前端
已有系统使用80端口,根目录为E盘的dist文件夹
nginx配置
server{
listen 80;
server_name servername;
root E:\dist\
index index.html index.htm;
}
2、实现
2.1、目标
部署新的系统前端,部署后通过nginx的80端口访问,对应本例中为:在浏览器里面输入:http://服务器IP/qmps能访问
2.2、前端Vue3 Build前设置VITE_PUBLIC_PATH
// production.env
VITE_PUBLIC_PATH =/qmps/
build命令时,会按照prod生产环境设置的路径配置,上面的配置路径应与build后要放置的文件夹名称一致。
即,前端build后,在服务器的E:\dist下新建文件夹qmps,将前端打包好的dist文件夹里面的内容拷贝到服务器的qmps目录下
2.3、nginx设置代理
添加如下到nginx配置。该配置实现在浏览器里面遇到带有qmps请求时自动转发到服务器的后端服务
location /qmps/ {
#proxy_pass http://服务器IP:后端服务端口号/后端服务的名称/;
proxy_pass http://服务器IP:11003/qmp/;
}
本例中涉及到的nginx conf配置:
server{
listen 80;
server_name servername;
root E:\dist\
index index.html index.htm;
location /qmps/ {
#proxy_pass http://服务器IP:后端服务端口号/后端服务的名称/;
proxy_pass http://服务器IP:11003/qmp/;
}
}
3、总结
1、nginx根目录下面建立存放前端的子文件夹qmps
2、前端打包时设置VITE_PUBLIC_PATH 为上述子文件夹名qmps
3、nginx设置代理,将qmps转发至后台服务
4、浏览器中输入http://服务器IP/qmps