在 k8s 里利用 oss 部署静态网站的问题

现在每个前端项目，都要弄个 nginx 容器，把 dist 放进去，我想到一个用 oss 部署静态网站的方案

1 、k8s 创建一个 Service ，类型为 ExternalName ，把 oss-data 指向 oss 的地址，我用的是腾讯 cos ，地址就是 nginx-static-xxxx.cos.ap-shanghai.myqcloud.com ，这个 bucket 设置为公有读私有写

2 、把 dist 目录上传到 nginx-static-xxxx/test/目录下

3 、创建一个 ingress 规则，把 oss-data 的 80 端口映射为一个域名 test.mydomain.com ，如下

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/configuration-snippet: |
      rewrite ^/$  /index.html redirect;
    nginx.ingress.kubernetes.io/rewrite-target: /test/$1
    nginx.ingress.kubernetes.io/upstream-vhost: nginx-static-xxxx.cos.ap-shanghai.myqcloud.com

  name: www
  namespace: test
spec:
  ingressClassName: nginx
  rules:
    - host: test.mydomain.com
      http:
        paths:
          - backend:
              service:
                name: oss-data
                port:
                  number: 80
            path: /(.*)
            pathType: Prefix

就是用户访问 test.domain.com/index.html ，会转发到后端的 oss-data/test/index.html ，传给 cos 的则是 nginx-static-xxxx.cos.ap-shanghai.myqcloud.com/test/index.html rewrite /$ 是为了保证访问 test.domain.com 的时候 cos 不会报告 404 错误

这样，以后，每次发布新项目，只需要把 dist 目录同步到 cos 这个 bucket 的某个目录中，然后创建一个 ingress 规则映射到新域名即可。

如果是全静态网站这种方案没有问题。但是对于 vue 的路由就有点问题，比如 url 里的路由信息，比如/login?...，在 vue 里会跳转，但是 ingress 把这个请求转到 cos 上，就会出现 404 。在 nginx 里，是使用 try_files 来保证直接/login 跳转到 index.html 的。

但是在 ingress 里，try_files 和 rewrite 规则有些冲突，try_files 是查找本地文件，rewrite-target 是把数据传到后端服务，类似于(proxy_pass)的规则。

所以除了把/login 之类的特殊处理，是否还有其它方法？

guoguobaba

2023-09-27 17:49:14 +08:00

@devopsdogdog 这种方法，多了 nginx 和 pv csi 的两层 overhead ，性能上不是很好。当然，我测试实现了这个功能，只不过 nginx 配置需要调整一下。
```
server {
listen 80;
server_name localhost;

#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;

location ~ ^/(?<project>[^/]+)/ {
root /usr/share/nginx/html;
try_files $uri $uri/ /$project/index.html;
index index.html index.htm;
}

}

```

每个 project 需要 try_files 的位置会有区别。

当然能在 oss 里解决是最好的。实际上相当于如果 nginx 有个 proxy_pass ，如何在返回 404 的情况下，rewrite 到一个新的后端地址