前情提要

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

事情是这样的,原来演示环境有很多服务,每个服务都是对外单独开一个端口,比如 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)

Vue 前端配置多级目录实践(基于Nginx配置方式)的更多相关文章

  1. 前端搭建Linux云服务器,Nginx配置详解及部署自己项目到服务器上

    目录 搭建Linux云服务器 购买与基本配置 链接linux服务器 目录结构 基本命令 软件安装 Linux 系统启动 启动过程 运行级别 Nginx详解 1.安装 方式一:yum安装 方式二:自定义 ...

  2. Nginx主配置参数详解,Nginx配置网站

    1.Niginx主配置文件参数详解 a.上面博客说了在Linux中安装nginx.博文地址为:http://www.cnblogs.com/hanyinglong/p/5102141.html b.当 ...

  3. 阿里巴巴微服务与配置中心技术实践之道 配置推送 ConfigurationManagement ConfigDrivenAnyting

    阿里巴巴微服务与配置中心技术实践之道 原创: 坤宇 InfoQ 2018-02-08 在面向分布式的微服务系统中,如何通过更高效的配置管理方式,帮助微服务系统架构持续"无痛"的演进 ...

  4. nginx----------前端写了一套带有vue路由的的功能。放到nginx配置的目录下以后,刷新会报404未找到。

    1. 这是根据实际情况来写的. location /h5/activity/wechat/ {            index  index.html index.htm index.php;    ...

  5. [转] vue前端异常监控sentry实践

    1. 监控原理 1.1 onerror 传统的前端监控原理分为异常捕获和异常上报.一般使用onerror捕获前端错误: window.onerror = (msg, url, line, col, e ...

  6. apache配置Directory目录权限的一些配置

    可以使用<Directory 目录路径>和</Directory>这对语句为主目录或虚拟目录设置权限,它们是一对容器语句,必须成对出现,它们之间封装的是具体 的设置目录权限语句 ...

  7. CentOS7中配置基于Nginx+Supervisor+Gunicorn的Flask项目

    配置Nginx 1.安装nginx yum install nginx 2.安装好后在/etc/nginx/default.d中添加location的配置,并指向8001端口,以后Gunicorn会监 ...

  8. 你需要知道的Nginx配置二三事

    做服务端开发的,工作中难免会遇到处理Nginx配置相关问题.在配置Nginx时,我一直本着“照葫芦画瓢”的原则,复制已有的配置代码,自己修修改改然后完成配置需求,当有人问起Nginx相关问题时,其实仍 ...

  9. 实时监控、直播流、流媒体、视频网站开发方案流媒体服务器搭建及配置详解:使用nginx搭建rtmp直播、rtmp点播、,hls直播服务配置详解

    注意:这里不会讲到nginx流媒体模块如何安装的问题,只研究rtmp,hls直播和录制相关的nginx服务器配置文件的详细用法和说明.可以对照这些命令详解配置nginx -rtmp服务 一.nginx ...

随机推荐

  1. 6.深入TiDB:乐观事务

    本文基于 TiDB release-5.1进行分析,需要用到 Go 1.16以后的版本 我的博客地址:: https://www.luozhiyun.com/archives/620 事务模型概述 由 ...

  2. HTML基础强化

    1.如何理解HTML? HTML类似于一份word"文档" 描述文档的"结构" 有区块和大纲 2.对WEB标准的理解? Web标准是由一系列标准组合而成.一个网 ...

  3. scrapy 的response 的相关属性

    Scrapy中response介绍.属性以及内容提取   解析response parse()方法的参数 response 是start_urls里面的链接爬取后的结果.所以在parse()方法中,我 ...

  4. testNG 注解使用说明

    1.TestNG常用注解 @BeforeSuite 标记的方法:在某个测试套件(suite)开始之前运行 @BeforeTest 在某个测试(test)开始之前运行 @BeforeClass 在某个测 ...

  5. Jmeter 正则表达式提取Response Headers,Response Body里的值

    实践过程中遇到需要提取Response Headers,Response Body里的值 一.获取Response Body的值,这里采用json提取器形式 1.Response Body返回值,如下 ...

  6. spring定时任务ThreadPoolTaskScheduler使用注意事项之线程池大小

    背景 最近小伙伴解决了一个工单,描述为"手工推送案件无法推,提示token失效",当前工单状态为待关闭,解决方案为"东软接口不稳定造成的,东软的接口恢复正常后,问题解决& ...

  7. 如何解决Redis缓存雪崩、缓存穿透

    缓存雪崩 数据未加载到缓存中,或者缓存同一时间大面积的失效,从而导致所有请求都去查数据库,导致数据库CPU和内存负载过高,甚至宕机. 比如一个雪崩的简单过程: 1.redis集群大面积故障 2.缓存失 ...

  8. Springboot 整合RabbitMq ,用心看完这一篇就够了

    该篇文章内容较多,包括有rabbitMq相关的一些简单理论介绍,provider消息推送实例,consumer消息消费实例,Direct.Topic.Fanout的使用,消息回调.手动确认等. (但是 ...

  9. 问题 K: A/B Problem

    题目描述 做了A+B Problem,A/B Problem不是什么问题了吧! 输入 每组测试样例一行,首先一个号码A,中间一个或多个空格,然后一个符号( / 或者 % ),然后又是空格,后面又是一个 ...

  10. [luogu5361]热闹的聚会与尴尬的聚会

    由于两者是独立的,我们希望两者的$p$和$q$都最大 考虑最大的$p$,先全部邀请,此时要增大$p$显然必须要删去当前度数最小的点,不断删除之后将每一次度数最小值对答案取max即可 对于$q$也即最大 ...