K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序

乔达摩@嘿

发布于 2022-09-29 18:55:29

3.4K0

发布于 2022-09-29 18:55:29

文章被收录于专栏：嘿dotNet

背景

首先这标题有点绕，我先解释下：

首先我们有静态服务器，上面某个目录有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规则：