前情提要

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

事情是这样的,原来演示环境有很多服务,每个服务都是对外单独开一个端口,比如 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. 从零开始的DIY智能家居 - 基于 ESP32 的智能光照传感器

    前言 上周出差有点急,结果家里灯没关,开了整整一周的时间(T▽T),整个人都裂开了,准备做一个能够远程控制灯的东西,让我以后出差能远程把家里灯关了. 第一步就是做这期的主题 - 智能光照传感器,因为我 ...

  2. Python Linux Ubuntu apt安装PyCharm

    PyCharm一个是Python集成开发环境,它既提供收费的专业版,也提供免费的社区版本.PyCharm带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Proj ...

  3. 『学了就忘』Linux基础 — 16、Linux系统与Windows系统的不同

    目录 1.Linux严格区分大小写 2.Linux一切皆文件 3.Linux不靠扩展名区分文件类型 4.Linux中所有的存储设备都必须在挂载之后才能使用 5.Windows下的程序不能直接在Linu ...

  4. Centos7上安装docker (新手版本)

    1首先要有一个安装好的Centos7 2打开终端,输入一下命令(自动安装最新版本) curl -fsSL https://get.docker.com | bash -s docker --mirro ...

  5. Spring Cloud Alibaba 使用Feign进行服务消费

    为什么使用Feign? Feign可以把Rest的请求进行隐藏,伪装成类似SpringMVC的Controller一样.你不用再自己拼接url,拼接参数等等操作,一切都交给Feign去做. 使用Fei ...

  6. 【java+selenium3】模拟键盘操作 (十二)

    一.键盘操作 用代码来模拟键盘的Enter或一系列的组合键,前面使用sendkeys()方法模拟键盘的输入,除此之外还可以模拟键盘组合键输入如下: 整理一些比较常用的键盘操作如下: sendKeys( ...

  7. 登录、注销&用户和用户组管理

    登录.注销 # 立刻关机 shutdown -h now # 1分钟后,关机 shutdown -h 1 # 立刻重启 shutdown -r now # 2分钟后,重启 shutdown -r 2 ...

  8. C# 获取PDF中的数字签名证书

    PDF中的加数字签名是对文档权威性的有效证明.我们在向PDF文档添加签名时,需要准备可信任的签名证书.同时,对已有的签名,可验证签名是否有效,也可以获取文档中的签名证书信息.下面,以C#代码示例展示如 ...

  9. 猿猿有责,维持整洁的 Git 提交记录,三个锦囊送给你

    背景 大家都有学习如何规范简洁的编写代码,但却很少学习如何规范简洁的提交代码.现在大家基本上都用 Git 作为源码管理的工具,Git 提供了极大的灵活性,我们按照各种 workflow 来提交/合并 ...

  10. [loj3503]滚榜

    一个小问题:题意中关于$b_{i}$的顺序只需要单调不降即可,相同时可任意选择 考虑$i$优于$j$的条件,即$val_{i}\ge val_{j}+[i>j]$,并记$del_{i,j}=\m ...