K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序
2023-06-13 09:13:35 时间
背景
首先这标题有点绕,我先解释下:
- 首先我们有静态服务器,上面某个目录有
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 服务注册与发现(三)CoreDNS
- 【K8S专栏】Kubernetes权限管理
- Vue笔记(10) vue-router
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- K8s pod 动态弹性扩缩容(HPA )部署!步骤齐全,少走坑路
- K8s源码分析(22)-client go组件之clientset
- Vue生成二维码_vue视频软件怎么生成二维码
- 8张图详解 MySQL 在 K8S 环境中部署与监控
- 轻量高可用的 K8s 集群搭建方案:MicroK8s
- K8S 生态周报| Kubernetes 新版本引入 ContainerCheckpoint 特性
- K8S 生态周报| kube-scheduler 频繁抢占时内存泄漏问题得到修正
- 一文读懂docker、K8s
- k8s的架构是怎么变成现在这个样子
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- 使用python进行操作k8s api
- 添加 K8S CPU limit 会降低服务性能?
- 14 张图详解 Zookeeper + Kafka on K8S 环境部署
- k8s kubectl 命令 “人话” 翻译插件!! 离声控操作只有一步之遥。
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- Vue框架下的Redis调用实战(vue调用redis)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue结合Redis实现性能优化(vue引入redis)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)