Nginx 同一个域名且80端口，代理多个项目不同的项目

zhu.lin

已于 2024-04-26 20:01:39 修改

阅读量1.1k

点赞数

文章标签： nginx 运维

于 2023-08-21 22:48:37 首次发布

zhulin

本文链接：https://blog.csdn.net/weixin_47164700/article/details/132418166

版权

1.一个域名代理多个前端项目，在域名后面用前缀做区分

2.例如：www.baidu.com，指向多个项目：www.baidu.com/a 、www.baidu.com/b

注：项目打包一定要放在主域名项目的根路径下面

3.nginx配置如下

# nginx配置如下 
server {
       listen       80;
       server_name  www.baidu.com;
       client_max_body_size 10m; #（改成你想要的数值）
       location / {
         root   /www/wwwroot/h5/;
         index  index.html;
       }
       location /a {
         alias  /www/wwwroot/a/;
         index  index.html;
       }
       location /b {
         alias  /www/wwwroot/b/;
         index  index.html;
       }
}

4.uniapp 项目配置

# manifest.json  配置
 "h5" : {
        "publicPath" : "/a/",    # 如果Nginx代理多个前端项目，此路径为Nginx前端的前缀，否则为空
        "devServer" : {
            "https" : false,
            "proxy" : {
                "/api" : {
                    "target" : "http://www.baidu.com", //后端的服务器地址
                    "changeOrigin" : true,
                    "ws" : true,
                    "pathRewrite" : {
                        "^/api" : ""
                    }
                }
            }
        },
        "router" : {
            "base" : "/a/"   # 如果Nginx代理多个前端项目，此路径为Nginx前端的前缀，否则为空
        }
}

5.请求后端接口封装的http.js配置

const baseUrl = '/a/api';      // nginx 配置代理，前端项目的前缀

const baseUrl = '/b/api';      // nginx 配置代理，前端项目的前缀


location /a {  // 前端uniapp项目代理的路径
      alias   /www/wwwroot/hscj/h5/a;
      index   index.html;
}

以上的api后端请求的前缀，要以nginx代理后端的前缀一致
location /api { 
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:8085/;
}