K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序
背景
首先这标题有点绕,我先解释下:
- 首先我们有静态服务器,上面某个目录有
Vue
路由history
模式打包的应用程序(也就是build后的产物); - 但是静态服务器一般不做对外域名用的,我们需要在
k8s
nginx-ingress
上做下域名二级目录代理,转发到该静态目录;
这就是本文的背景,相信也是很多开发/运维同学的需求;
由上:
#我们静态服务目录是,/cso/
https://static.chinacloudapi.cn/cso/
#静态服务下文件的url是
https://static.chinacloudapi.cn/cso/static/js/manifest.967d8a794130980087be.js
然后:
#我们部署的域名是:
http://test.mysite.com/cso/
#同样,对应以上静态服务文件的url是:
http://test.mysite.com/cso/static/js/manifest.967d8a794130980087be.js
好了需求清楚了, 我们转发二级目录就是 /cso/
,我们一一来看怎么实现。
先配置好Vue
1、在入口文件index.html文件中添加
<meta base="/xxx/">
2、配置Vue History的路由模式(我这里还是vue2.x)
export default new Router({
mode: 'history',
base: '/cso/',
routes: [
...
3、在config/index.js文件修改build属性下面的assetsPublicPath: '/xxx/'(用Cli3搭建的项目,应该是在vue.config.js文件修改publicPath: '/xxx/');
...
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
// assetsPublicPath: '/', //默认的
assetsPublicPath: '/cso/', //改为
...
4、访问验证:
成功;
原生Nginx转发配置
部署Nginx本机
location ~* /cso {
root html/cso;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
这就是大家比较熟悉的history
模式必配的try_files
,原理是:
- 像html/js/css等静态资源请求,能本地能找到物理文件的,直接返回;
- 访问vue里面的路由时,没有对应的物理问题的,请求转回到index.html由vue处理渲染;
部署到远程静态服务或OSS
转发静态assets
location ~* /cso.*\.(gif|jpg|jpeg|png|bmp|swf|css|js|eot|svg|ttf|woff|woff2|properties|json)$ {
proxy_http_version 1.1;
proxy_pass https://static.chinacloudapi.cn;
}
转发document
location ~* /cso {
proxy_http_version 1.1;
add_header Cache-Control 'no-store, no-cache';
rewrite ^ /cso/index.html break;
proxy_pass https://static.chinacloudapi.cn;
}
这里配置两个功能location,其实是参考try_files的原理实现的;
同时,这种配置方式也适用于解决很多想把第三方程序的UI(Hangfire等)挂载到二级域名时,静态文件404的问题;
K8s nginx-ingrss转发配置
说真的,用惯nginx原生配置后,在nginx-ingress稍微配置有一点点难度的规则我就想哭(主要确实不太熟);
configuration-snippet方式:
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: my-custom-snippet
namespace: cso-site
annotations:
nginx.ingress.kubernetes.io/configuration-snippet: |
location ~* /cso.*\.(gif|jpg|jpeg|png|bmp|swf|css|js|eot|svg|ttf|woff|woff2|properties|json)$ {
proxy_http_version 1.1;
proxy_pass https://static.chinacloudapi.cn;
}
location ~* /cso {
proxy_http_version 1.1;
add_header Cache-Control 'no-store, no-cache';
rewrite ^ /cso/index.html break;
proxy_pass https://static.chinacloudapi.cn;
}
spec:
ingressClassName: nginx
rules:
- host: test.mysite.com
defaultBackend:
service:
name: cso-site-svc
port:
number: 80
tls:
- hosts:
- test.mysite.com
secretName: tls-secret
这种方式就比较简单了,就直接配置支持nginx原生语法,但它也是有限制的具体参考文档;
原生ingress写法
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
annotations:
kubernetes.io/ingress.class: nginx
nginx.ingress.kubernetes.io/upstream-vhost: "static.chinacloudapi.cn"
nginx.ingress.kubernetes.io/backend-protocol: "HTTPS"
nginx.ingress.kubernetes.io/rewrite-target: /cso/index.html
name: slz-cso-ui-doc
namespace: cso-site
spec:
rules:
- host: test.mysite.com
http:
paths:
- path: /cso/(.*)
pathType: Prefix
backend:
service:
name: cso-site
port:
number: 443
defaultBackend:
service:
name: cso-site
port:
number: 80
tls:
- hosts:
- test.mysite.com
secretName: tls-secret
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
annotations:
kubernetes.io/ingress.class: nginx
nginx.ingress.kubernetes.io/backend-protocol: "HTTPS"
nginx.ingress.kubernetes.io/upstream-vhost: "static.chinacloudapi.cn"
nginx.ingress.kubernetes.io/rewrite-target: /cso/$1$2$3
nginx.ingress.kubernetes.io/use-regex: "true"
name: slz-cso-ui-static
namespace: cso-site
spec:
rules:
- host: test.mysite.com
http:
paths:
- path: /cso/(.*)(\.)(gif|jpg|jpeg|png|bmp|swf|css|js|eot|svg|ttf|woff|woff2|properties|json)$
pathType: Prefix
backend:
service:
name: cso-site
port:
number: 443
defaultBackend:
service:
name: cso-site
port:
number: 80
tls:
- hosts:
- test.mysite.com
secretName: tls-secret
我们来看看生成的nginx规则:
这是我抽取核心部分的规则,可以看到翻译成原生写法是规则生成正确的;
总结
k8s nginx-ingress配置稍微复杂点的规则真的很痛苦;
配置ingress时在不是特别熟的情况下跟我一样先写原生nginx,再翻译成ingress是个不错的方法;
水完, 欢迎讨论。
K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序的更多相关文章
- Vue路由history模式踩坑记录:nginx配置解决404问题
问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...
- VUE路由history模式坑记--NGINX
因微信分享和自动登录需要,对于URL中存在'#'的地址,处理起来比较坑(需要手动写一些代码来处理).还有可能会有一些隐藏的问题没被发现. 如果VUE能像其他(JSP/PHP)系统的路径一样,就不存在这 ...
- vue路由history模式,nginx配置
nginx配置内容 # For more information on configuration, see: # * Official English Documentation: http://n ...
- vue history 模式打包部署在域名的二级目录的配置指南
最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-router的history 模式. 我们都知道vue-router 的两种前端基本访问模式 hash 和history .hash ...
- 利用nginx泛域名解析配置二级域名和多域名
利用nginx泛域名解析配置二级域名和多域名 网站的目录结构为 html ├── bbs └── www html为nginx的安装目录下默认的存放源代码的路径. bbs为论坛程序源代码路径 www为 ...
- Thinkphp在nginx设置同域名二级目录访问
Thinkphp在nginx设置同域名二级目录访问,是因为最近弄一个小程序项目,要https,但是只有单个域名,不能通配域名,所有只好用二级目录,thinkphp二级目录访问要怎么设置呢 下面是ngi ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
- 如何配置pl/sql 连接远程oracle服务器
在下边的两种情况下,如何配置pl/sql 连接远程oracle服务器 1)在客户端不装oracle 客户端也不装服务器,能否配置pl/sql 连接远程oracle服务器,如何配置,请给出详细的文档说明 ...
随机推荐
- 利用laravel-echo主动向服务端发送消息,实现在线状态管理
之前在网上翻了半天,也没有找到关于如何 通过laravel-echo主动发送消息 和 在laravel-websockets中自定义控制器 的文章或教程.无奈之下只能翻laravel-echo和lar ...
- Ubuntu14.04.6配置阿里源
Ubuntu14.04.6配置阿里源 这两天上手 Ubuntu 系统,因为公司用的是 14.04.6 版本,所以有了一些踩坑记录. 起因是安装完系统我需要安装一个搜狗输入法,过程得安装 fcitx,需 ...
- osx系统使用技巧集锦
6.禁用dashboard defaults write com.apple.dashboard mcx-disabled -boolean YES && killall Dock 5 ...
- CTCLoss如何使用
CTCLoss如何使用 目录 CTCLoss如何使用 什么是CTC 架构介绍 一个简单的例子 CTC计算的推导 总概率\(p(z|x)\) 路径的含义 路径概率\(p(\pi|x)\) 什么是\(\m ...
- 如何编写测试团队通用的Jmeter脚本
平时学习.工作过程中,编写的一些jmeter脚本,相信大多数都遇到过这个问题.那就是:如果换一台电脑运行,文件路径不一样,会导致运行失败. 前不久,自己就真真切切遇到过一回,A同学写了个脚本用于压测, ...
- Root用户无法使用Tab补齐解决
1. sudo vim /etc/bash.bashrc 2.取消以下注释 #if [ -f /etc/bash_completion ]; then # . /etc/bash_completion ...
- TCP协议调试工具TcpEngine V1.3.0使用教程
简介 这里说的TCP协议调试定义是在开发长连接TCP协议应用时,为了验证代码流程或查找bug,需要与对端交互数据过来,当需要时可以暂停发送:单条发送:跳过发送:正常发送:发送时修改数据等. T ...
- .Net 之时间轮算法(终极版)
关于时间轮算法的起始 我也认真的看了时间轮算法相关,大致都是如下的一个图 个人认为的问题 大部分文章在解释这个为何用时间轮的时候都再说 假设我们现在有一个很大的数组,专门用于存放延时任务.它的精度达到 ...
- redis学习之数据类型
<?php //连接本地的 Redis 服务 $redis = new Redis(); $redis->connect('127.0.0.1', 6379); echo "Co ...
- Jmix- 业务系统高效开发的新方式
企业在数字化转型的过程中,都面临将现有的业务流程进行"软件化"的过程.然而,在我们的印象中,通常会觉得针对业务系统的软件开发不是特别高效.这背后有很多原因,从开发角度看,有一个主要 ...