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接口实现反向代理配置,详细的介绍了什么是反向代理及其接口反向代理的实现,非常具有实用价值,需要的朋友可以参考下
    2018-10-10
  • 使用Nginx作缓存服务器以及删除其缓存文件的方法

    使用Nginx作缓存服务器以及删除其缓存文件的方法

    这篇文章主要介绍了使用Nginx作缓存服务器以及删除其缓存文件的方法,作cache时需要注意一下磁盘的IO瓶颈,需要的朋友可以参考下
    2015-11-11
  • windows下RunHiddenConsole 启动 nginx与php(RunHiddenConsole下载)

    windows下RunHiddenConsole 启动 nginx与php(RunHiddenConsole下载)

    这篇文章主要介绍了RunHiddenConsole 启动 nginx与php的相关资料,希望通过本文能帮助到大家,让大家学会使用RunHiddenConsole,需要的朋友可以参考下
    2017-10-10
  • 解读nginx负载均衡的5种策略

    解读nginx负载均衡的5种策略

    这篇文章主要介绍了解读nginx负载均衡的5种策略,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 全面了解Nginx中的HTTP协议相关模块配置

    全面了解Nginx中的HTTP协议相关模块配置

    HTTP的处理是Nginx服务器的最重要功能,这里我们就带大家来全面了解Nginx中的HTTP协议相关模块配置,需要的朋友可以参考下
    2016-07-07
  • Nginx+Lua动态加载黑名单的实现方案

    Nginx+Lua动态加载黑名单的实现方案

    本文给大家介绍Nginx+Lua动态加载黑名单的完整技术实现方案,包含核心原理、代码实现和性能优化策略,感兴趣的朋友跟随小编一起看看吧
    2025-10-10
  • 图文详解Nginx多种匹配方式

    图文详解Nginx多种匹配方式

    nginx作为一款高性能的服务器,用途很多,下面这篇文章主要给大家介绍了Nginx多种匹配方式的相关资料,文中通过图文介绍的介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 在ubuntu下为nginx配置支持cgi脚本的方案

    在ubuntu下为nginx配置支持cgi脚本的方案

    本文的需求:让nginx能够解析.cgi后缀的文件,相信会特意看这篇文章的人对CGI是什么及其作用已经有了足够的了解,所以在这里不再赘述,直接开始配置。
    2017-02-02
  • nginx代理转发配置小结

    nginx代理转发配置小结

    Nginx配置代理转发是常见需求,涉及编辑nginx.conf文件,添加location块并配置proxy_pass指令指向后端服务器,感兴趣的可以了解一下
    2024-10-10
  • 利用njs模块在nginx配置中引入js脚本

    利用njs模块在nginx配置中引入js脚本

    这篇文章主要给大家介绍了关于利用njs模块在nginx配置中引入js脚本的相关资料,通过这个脚本实现一些更复杂的 nginx 配置功能,需要的朋友可以参考下
    2021-12-12

最新评论