Vue 前端配置多级目录实践(基于Nginx配置方式)
前情提要
有阵子没更新博客了,因为快年结了工作比较多,这不,最近公司的对外演示环境出现问题这个活儿也落到了我的头上……
事情是这样的,原来演示环境有很多服务,每个服务都是对外单独开一个端口,比如 http://a.com.cn:8080
、http://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配置方式)的更多相关文章
- 前端搭建Linux云服务器,Nginx配置详解及部署自己项目到服务器上
目录 搭建Linux云服务器 购买与基本配置 链接linux服务器 目录结构 基本命令 软件安装 Linux 系统启动 启动过程 运行级别 Nginx详解 1.安装 方式一:yum安装 方式二:自定义 ...
- Nginx主配置参数详解,Nginx配置网站
1.Niginx主配置文件参数详解 a.上面博客说了在Linux中安装nginx.博文地址为:http://www.cnblogs.com/hanyinglong/p/5102141.html b.当 ...
- 阿里巴巴微服务与配置中心技术实践之道 配置推送 ConfigurationManagement ConfigDrivenAnyting
阿里巴巴微服务与配置中心技术实践之道 原创: 坤宇 InfoQ 2018-02-08 在面向分布式的微服务系统中,如何通过更高效的配置管理方式,帮助微服务系统架构持续"无痛"的演进 ...
- nginx----------前端写了一套带有vue路由的的功能。放到nginx配置的目录下以后,刷新会报404未找到。
1. 这是根据实际情况来写的. location /h5/activity/wechat/ { index index.html index.htm index.php; ...
- [转] vue前端异常监控sentry实践
1. 监控原理 1.1 onerror 传统的前端监控原理分为异常捕获和异常上报.一般使用onerror捕获前端错误: window.onerror = (msg, url, line, col, e ...
- apache配置Directory目录权限的一些配置
可以使用<Directory 目录路径>和</Directory>这对语句为主目录或虚拟目录设置权限,它们是一对容器语句,必须成对出现,它们之间封装的是具体 的设置目录权限语句 ...
- CentOS7中配置基于Nginx+Supervisor+Gunicorn的Flask项目
配置Nginx 1.安装nginx yum install nginx 2.安装好后在/etc/nginx/default.d中添加location的配置,并指向8001端口,以后Gunicorn会监 ...
- 你需要知道的Nginx配置二三事
做服务端开发的,工作中难免会遇到处理Nginx配置相关问题.在配置Nginx时,我一直本着“照葫芦画瓢”的原则,复制已有的配置代码,自己修修改改然后完成配置需求,当有人问起Nginx相关问题时,其实仍 ...
- 实时监控、直播流、流媒体、视频网站开发方案流媒体服务器搭建及配置详解:使用nginx搭建rtmp直播、rtmp点播、,hls直播服务配置详解
注意:这里不会讲到nginx流媒体模块如何安装的问题,只研究rtmp,hls直播和录制相关的nginx服务器配置文件的详细用法和说明.可以对照这些命令详解配置nginx -rtmp服务 一.nginx ...
随机推荐
- 从零开始的DIY智能家居 - 基于 ESP32 的智能光照传感器
前言 上周出差有点急,结果家里灯没关,开了整整一周的时间(T▽T),整个人都裂开了,准备做一个能够远程控制灯的东西,让我以后出差能远程把家里灯关了. 第一步就是做这期的主题 - 智能光照传感器,因为我 ...
- Python Linux Ubuntu apt安装PyCharm
PyCharm一个是Python集成开发环境,它既提供收费的专业版,也提供免费的社区版本.PyCharm带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Proj ...
- 『学了就忘』Linux基础 — 16、Linux系统与Windows系统的不同
目录 1.Linux严格区分大小写 2.Linux一切皆文件 3.Linux不靠扩展名区分文件类型 4.Linux中所有的存储设备都必须在挂载之后才能使用 5.Windows下的程序不能直接在Linu ...
- Centos7上安装docker (新手版本)
1首先要有一个安装好的Centos7 2打开终端,输入一下命令(自动安装最新版本) curl -fsSL https://get.docker.com | bash -s docker --mirro ...
- Spring Cloud Alibaba 使用Feign进行服务消费
为什么使用Feign? Feign可以把Rest的请求进行隐藏,伪装成类似SpringMVC的Controller一样.你不用再自己拼接url,拼接参数等等操作,一切都交给Feign去做. 使用Fei ...
- 【java+selenium3】模拟键盘操作 (十二)
一.键盘操作 用代码来模拟键盘的Enter或一系列的组合键,前面使用sendkeys()方法模拟键盘的输入,除此之外还可以模拟键盘组合键输入如下: 整理一些比较常用的键盘操作如下: sendKeys( ...
- 登录、注销&用户和用户组管理
登录.注销 # 立刻关机 shutdown -h now # 1分钟后,关机 shutdown -h 1 # 立刻重启 shutdown -r now # 2分钟后,重启 shutdown -r 2 ...
- C# 获取PDF中的数字签名证书
PDF中的加数字签名是对文档权威性的有效证明.我们在向PDF文档添加签名时,需要准备可信任的签名证书.同时,对已有的签名,可验证签名是否有效,也可以获取文档中的签名证书信息.下面,以C#代码示例展示如 ...
- 猿猿有责,维持整洁的 Git 提交记录,三个锦囊送给你
背景 大家都有学习如何规范简洁的编写代码,但却很少学习如何规范简洁的提交代码.现在大家基本上都用 Git 作为源码管理的工具,Git 提供了极大的灵活性,我们按照各种 workflow 来提交/合并 ...
- [loj3503]滚榜
一个小问题:题意中关于$b_{i}$的顺序只需要单调不降即可,相同时可任意选择 考虑$i$优于$j$的条件,即$val_{i}\ge val_{j}+[i>j]$,并记$del_{i,j}=\m ...