nginx部署多套vue项目,共用一套后端配置过程
更新时间:2025年12月25日 10:05:53 作者:客官酒来了
文章介绍了如何在一套后端服务下部署多个Web应用,包括H5页面和后台管理端的配置方法,涵盖了前端打包、路由配置、Java打包、Nginx配置以及访问路径的设置
一套后端,多web部署
1.H5打包配置
baseUrl: ‘https://www.xxxx.com/prod-api’,后端请求地址

2.后台管理端打包
修改vue.config.js

index.js 修改Router路由 base路径(看项目用法)

3.修改java打包方式
context-path: /prod-api

4.配置nginx文件
nginx配置 nginx.conf配置文件

server {
listen 80;
server_name www.xxxx.com; # 直接使用 IP 或替换为域名
rewrite ^/(.*) https://$server_name/$1 permanent; # http强制跳转到https
}
server {
listen 443 ssl;
server_name www.xxxx.com; # 直接使用 IP 或替换为域名
ssl_certificate /etc/nginx/cert/server.crt; # 证书文件路径
ssl_certificate_key /etc/nginx/cert/server.key; # 私钥文件路径
ssl_verify_depth 1;
keepalive_timeout 70;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES128-SHA256:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES256-GCM-SHA384:AES128-GCM-SHA256:AES256-SHA256:AES128-SHA256:AES256-SHA:AES128-SHA:DES-CBC3-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
#让http请求重定向到https请求
error_page 497 https://$host$uri?$args;
# 代理H5前端
location / {
root /data/web;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
#图片显示
location /profile/ {
proxy_pass http://127.0.0.1:8181/profile/;
}
# 代理管理端
location /admin {
alias /data/dist/;
try_files $uri $uri/ /admin/index.html;
index index.html index.htm;
}
# 代理后端 API
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://127.0.0.1:8181;
}
}
5.访问服务
https://www.xxxx.com 直接访问H5页面
https://www.xxxx.com/admin 直接访问管理后台
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
使用google-perftools优化nginx在高并发时的性能的教程(完整版)
如果使用googler开发的google-perftools优化Nginx和MySQL的内存管理,性能将会有一定程度的提升。特别是对高并发下的服务器,效果更明显2013-02-02
解决nginx服务器上发布的新版本代码总需要清除浏览器缓存问题
这篇文章主要介绍了解决nginx服务器上发布的新版本代码总需要清除浏览器缓存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01


最新评论