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 直接访问管理后台

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Nginx的配置文件结构和各种配置指令

    Nginx的配置文件结构和各种配置指令

    Nginx是一款高性能的Web服务器和反向代理服务器,常常被用作Web服务器、负载均衡器、反向代理和缓存服务器等,本文将详细介绍Nginx的配置文件结构和各种配置指令,帮助你理解和正确配置Nginx 服务器
    2024-03-03
  • 使用google-perftools优化nginx在高并发时的性能的教程(完整版)

    使用google-perftools优化nginx在高并发时的性能的教程(完整版)

    如果使用googler开发的google-perftools优化Nginx和MySQL的内存管理,性能将会有一定程度的提升。特别是对高并发下的服务器,效果更明显
    2013-02-02
  • Nginx中的Gzip压缩配置介绍

    Nginx中的Gzip压缩配置介绍

    这篇文章主要介绍了Nginx中的Gzip压缩配置介绍,本文先是对这些指令做了讲解,然后给出一个配置示例,需要的朋友可以参考下
    2014-12-12
  • nginx日志打印请求头信息示例详解

    nginx日志打印请求头信息示例详解

    这篇文章主要介绍了nginx日志打印请求头信息的相关资料,文章介绍了如何在Nginx中打印请求头中的自定义字段,并解决由于下划线导致的字段无法正确打印的问题,需要的朋友可以参考下
    2024-11-11
  • 基于Nginx实现访问控制、连接限制

    基于Nginx实现访问控制、连接限制

    Nginx自带的模块支持对并发请求数进行限制, 还有对请求来源进行限制。可以用来防止DDOS攻击。这篇文章主要介绍了基于Nginx实现访问控制、连接限制的相关资料,需要的朋友可以参考下
    2019-11-11
  • Nginx服务器下配置使用索引目录的教程

    Nginx服务器下配置使用索引目录的教程

    这篇文章主要介绍了Nginx服务器下配置使用索引目录的教程,包括自带的auto_index和使用fancy插件美化的用法,需要的朋友可以参考下
    2016-01-01
  • 详解nginx前端根据$remote_addr分发方法

    详解nginx前端根据$remote_addr分发方法

    这篇文章主要介绍了详解nginx前端根据$remote_addr分发方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 解决nginx服务器上发布的新版本代码总需要清除浏览器缓存问题

    解决nginx服务器上发布的新版本代码总需要清除浏览器缓存问题

    这篇文章主要介绍了解决nginx服务器上发布的新版本代码总需要清除浏览器缓存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Nginx中alias指令的实现

    Nginx中alias指令的实现

    lias指令用于指定一个替换位置,该替换位置会替换掉location块中指定的URl,下面就来介绍一下alias指令,具有一定的参考价值,感兴趣的可以了解一下
    2024-08-08
  • Nginx(Tengine)启用 SPDY 支持的配置方法

    Nginx(Tengine)启用 SPDY 支持的配置方法

    当老迈的 HTTP 协议逐渐不能满足人们需求的时候,Google 的 SPDY 协议出现在面前,那么这个长期以来一直被认为是 HTTP 2.0 唯一可行选择的 SPDY 是什么呢?当下我们如何能部署上 SPDY 呢
    2014-12-12

最新评论