Vue 前端配置多级目录实践(基于Nginx配置方式)

发布于 2022年 01月 12日 11:34

前情提要

有阵子没更新博客了,因为快年结了工作比较多,这不,最近公司的对外演示环境出现问题这个活儿也落到了我的头上……

事情是这样的,原来演示环境有很多服务,每个服务都是对外单独开一个端口,比如 http://a.com.cn:8080http://a.com.cn:8081 这种,通过外网域名端口映射到内网的服务器上。最近有个变化是 为了降低安全风险,公司决定启用https,并且对外演示环境只开设一个端口

之前的样子:

现在想要的效果:

看着应该会很好实现,只需要用个Nginx就可以了嘛~

看着也没什么问题嘛,而现实狠狠地给我上了一课:

Vue 前端默认是以 / 下载资源文件的!哪怕我的html的确是从服务b返回的,但html到达用户浏览器后,获取静态资源请求仍是向http://a.com.cn:8080/ 发起的!

解决思路

想解决这个问题常见有两种方案:

  • 修改 Vue 构建源码,使用自定义路径或./作为获取静态资源的基础路径
  • 使用 Nginx 获取 Referer 请求头,根据请求头的目录转发到对应的服务

方案对比

  • 方案1需要修改代理的所有前端服务,改动量虽然不是很大,除了修改还需要再次构建部署。
  • 方案2只需要修改 Nginx

综合考虑现在演示环境的程序是由不同产品线提供的稳定版本,最好不对程序进行大的修改,最后选择了方案2。

方案2的配置方式

#演示环境Hellxz
server {
  listen 8080;
  server_name a.com.cn;
  charset utf-8;

  location /b/ {
    proxy_pass  http://server-b/;
  }

  location / {
    #根据Referer区分静态资源来源
    if ($http_referer ~ "/b/") {
       add_header referer-review $http_referer; #显示静态资源来源
       proxy_pass http://server-b; # 转发到服务b,末尾不能加/
    }
    proxy_pass  http://server-a/; #门户a
  }
}

upstream server-a {
  server   192.168.0.1:8080;
}

upstream server-b {
  server   192.168.0.1:8081;
}

就这样了,虽然前端仍是向/发起请求,但请求已经转到了正确的服务上,添加的 referer-review 请求头可以清楚地看到前端静态资源是从哪级目录过来的。本文内容就这些了,如果文章内容有错误希望读者评论与我沟通,我们一起进步!

本文同步于本人博客园(hellxz.cnblogs.com) 与 CSDN(https://blog.csdn.net/u012586326)

推荐文章