现在每个前端项目,都要弄个 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 之类的特殊处理,是否还有其它方法?
1
1point 2023-09-26 16:33:43 +08:00
写个 error_page 404 /index.html; 就可以了吧
|
2
guoguobaba OP @1point 不行,这个也是本地规则,是后端返回 404 。
|
3
billzhuang 2023-09-26 16:50:54 +08:00 1
为啥不直接用 oss 静态 site 的功能,套个 cdn 。
|
4
guoguobaba OP @billzhuang 内网项目
|
5
maocat 2023-09-26 18:17:21 +08:00
你没有接触过单页前端项目吗
后端代理前端项目,后端要路由通配,所有的非后端 api url 都转发到前端上面并且 code 是 200 ,或者前端给你对应页面的路由,后端进行同一个配置替换 |
6
liuhai233 2023-09-26 21:31:53 +08:00
感觉你要做一个 vercel 或者 cloudflare pages ,不错
|
7
mightybruce 2023-09-26 21:51:01 +08:00
不建议这么做吧, 有些 OSS 支持静态存储卷,比这样做好太多了。
|
8
nulIptr 2023-09-27 01:05:53 +08:00 via iPhone
感觉这么搞还不如把 oss 挂成 pv 然后起个 nginx 转发…
|
9
Jat001 2023-09-27 02:00:39 +08:00
你这个内网是没法访问互联网的环境还是只是说这个项目不能在公网出现?
如果是后者,COS + CDN 完全能满足,COS 设私有,CDN 源站选 COS ,开启私有 COS 自动鉴权。 如果是固定公网 IP ,只需要 CDN 上加白名单就行。如果是动态 IP ,URL 鉴权也能用,只不过这样每个请求都要带上鉴权参数,可能更麻烦。 |
10
zzl22100048 2023-09-27 09:17:58 +08:00 via iPhone
有个东西叫 s3www
|
11
devopsdogdog 2023-09-27 10:18:21 +08:00
现在每个前端项目,都要弄个 nginx 容器,把 dist 放进去,我想到一个用 oss 部署静态网站的方案
你这需求的话,cdn k8s 都不需要,docker 挂载一下 nginx 的配置文件和 dist 目录,想怎么改怎么更新都行 |
12
guoguobaba OP @zzl22100048 这个就是实现 s3www 的功能,但是 s3www 没有办法解决我这个问题
|
13
guoguobaba OP @devopsdogdog 用 nginx+dist 也涉及到前端访问 404 如何 redirect index.html 的问题,ingress+nginx /ingress+oss 问题性质是一样的
|
14
zzl22100048 2023-09-27 14:03:09 +08:00
@guoguobaba #12 s3www 可以处理 404 ,只不过是每个网站要启动一个 s3www 而已
|
15
aimuz 2023-09-27 14:21:13 +08:00
ingress 只是一个路由转发,单页应用需要你的 oss-data 做处理
|
16
aimuz 2023-09-27 14:25:51 +08:00
简单点就是把你网站的路由方式改了,改成 #方式
|
17
devopsdogdog 2023-09-27 14:58:41 +08:00
@guoguobaba nginx 404 跳转咋会有问题? 冲突的试试 error_page 方式,nginx 规则也是有顺序判断等等的 ,按我理解实现你的需求 完全没问题
|
18
guoguobaba OP @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 到一个新的后端地址 |
19
Anonym0u5 288 天前
我们这前端自己实现静态服务和接口路由规则,用 express+node 镜像打包静态文件。不过最早也是用的 Nginx ,感觉不是很方便。
|