V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sekfung
V2EX  ›  程序员

关于前端工程化与 K8S 结合的一些疑问

  •  
  •   sekfung · 2021-08-31 00:48:57 +08:00 · 4016 次点击
    这是一个创建于 1179 天前的主题,其中的信息可能已经有所发展或是发生改变。

    目前所有静态资源除了 html 已上传到 OSS,并做了 CDN,有个疑问:如何去访问 HTML 文件

    1. 反向代理通过 NFS 访问
    2. 前端容器启动一个 node server, 反向代理通过 http 访问

    两个本质上还是远程访问的形式,或者有没有其他更好的方式

    30 条回复    2021-08-31 17:03:45 +08:00
    anyxchachapoly
        1
    anyxchachapoly  
       2021-08-31 00:51:40 +08:00
    我没看懂这和 k8s 有啥子关系,

    还有, ”有没有更好的方式“ 这 depends on 需求啊
    ss098
        2
    ss098  
       2021-08-31 00:53:07 +08:00
    为什么要把 HTML 资源留在 K8S 上,一起传到 CDN 上啊。
    sekfung
        3
    sekfung  
    OP
       2021-08-31 01:20:37 +08:00
    @ss098 #2 CDN 关闭 html 缓存吗?
    ss098
        4
    ss098  
       2021-08-31 01:23:58 +08:00
    现在你用反向代理解决的话(很有可能实际上)也是禁用缓存,放在 CDN 上速度不会更差的。
    sekfung
        5
    sekfung  
    OP
       2021-08-31 01:33:59 +08:00
    @ss098 #4 这样的话,源站域名还得 proxy_pass 一次 CDN,中间还涉及 TLS 连接,首页渲染相对来说会比较慢吧,这样真的会比较好吗?
    yompc
        6
    yompc  
       2021-08-31 01:36:39 +08:00 via iPhone
    我静态资源和 html 全部放到容器里面,然后设置除了 /api 路径不缓存其他全部缓存,更新前端的时候用 API 调用 CDN 提供商的接口清除 CDN 缓存
    sekfung
        7
    sekfung  
    OP
       2021-08-31 01:37:31 +08:00
    @anyxchachapoly #1 是没太大联系,主要是不知道 代理和前端项目 在不同 pod 之间,如何去访问
    snachx
        8
    snachx  
       2021-08-31 01:40:08 +08:00 via iPhone
    如果是单页应用或者真实 html 比较少情况,一般设置 html 文件不缓存,这样重新 build 之后浏览器能及时获得最新的资源

    既然不缓存,你放固定数据中心就看用户到数据中心的网络状况,放 cdn 就看 cdn 回源 oss 的网络状况,一般用同一家 cdn 和 oss 的话,还是 cdn 总体来说更优吧
    yompc
        9
    yompc  
       2021-08-31 01:40:14 +08:00 via iPhone
    @yompc 这里面的缓存指的都是 CDN 缓存
    snachx
        10
    snachx  
       2021-08-31 01:45:15 +08:00 via iPhone
    @sekfung 没太明白你说的代理和前端项目在不同 pod 之间如何访问的意思,抛开 cdn 不谈,你前端项目难道不是 webpack 编译过之后扔一个 nginx pod 里面吗?为什么还要 node server 呢
    sekfung
        11
    sekfung  
    OP
       2021-08-31 01:51:06 +08:00 via iPhone
    @snachx nginx pod 是独立的,换句话说我并不会为每个每个前端项目都启动一个 nginx pod,或者是扔到 nginx pod 挂载的 volume
    snachx
        12
    snachx  
       2021-08-31 01:59:20 +08:00 via iPhone
    @sekfung 一个前端一个 nginx pod 是挺常见的做法吧,反正对外都是 ingress 来转,一个 nginx 也就占一点点资源,代码推送自动编译构建成镜像触发重新部署就更新了
    raptium
        13
    raptium  
       2021-08-31 07:10:44 +08:00 via iPhone
    html 也传到 oss,设置 header 不让缓存,这就可以了吧。
    kinboy
        14
    kinboy  
       2021-08-31 07:53:07 +08:00 via Android
    前端有什么使用 K8S 的必要性 2 吗?还是为了使用而使用?
    Ariver
        15
    Ariver  
       2021-08-31 08:03:46 +08:00
    我们先不谈 k8s,就说部署的时候,前端项目是应该部署到一个 node 环境中去,还是一个 nginx 中。
    steptodream
        16
    steptodream  
       2021-08-31 08:08:59 +08:00
    热炒一个概念 然后其他人干啥都使劲往上靠 就像热门词内卷一样
    chendy
        17
    chendy  
       2021-08-31 08:25:54 +08:00
    全部 oss+cdn,对 html 配置不缓存
    eudore
        18
    eudore  
       2021-08-31 08:39:46 +08:00
    ci 将前端项目源码编程成 dist,将 dist 放到 nginx 基础镜像编译项目镜像,镜像发布就完事了。在 html 里面直接写 cdn 的地址,cdn 回源配置 oss,静态资源使用 ossbrowser 直接上传进去。

    关于 nodeserver 方式,非必要不推荐,nodeserver 和 dist 的镜像体积、资源消耗、启动速度都是天壤之别,dist+nginx 方式快速启动 超低资源消耗。
    yangyaofei
        19
    yangyaofei  
       2021-08-31 08:45:29 +08:00 via Android
    @eudore 直接放 volume 里面和后端放一起,nginx 都省了
    cheng6563
        20
    cheng6563  
       2021-08-31 09:22:22 +08:00
    我司是直接把 HTML 丢到个 alpine 镜像里存着。
    部署 pod 时用一个 initContainers 把文件复制到 nginx 的页面目录去
    arischow
        21
    arischow  
       2021-08-31 09:26:02 +08:00 via iPhone
    nginx + s3fs pod

    实际发布是 s3 copy

    实际对外访问是通过 CDN
    liaoberlin
        22
    liaoberlin  
       2021-08-31 09:35:02 +08:00
    前端静态资源部署没必要上 k8s 的,应该打包完之后直接丢到静态资源服务器上(一台 /集群)且不缓存,然后再一份上传到 OSS, 然后域名访问静态资源服务器的 html 文件,html 中通过 CDN 访问其他的静态资源。 如果通过 nginx 二次 proxy_pass 到 CDN 的话,需要经过二次 DNS 解析,有时候慢的一逼
    duan602728596
        23
    duan602728596  
       2021-08-31 09:35:28 +08:00
    基本上是启动 node server 的方式,css 、部分 js 、图片等上传到 cdn 。
    node server 不仅仅作为静态资源服务器,还要提供接口代理的能力,毕竟接口的提供方来自好几个部门,有一些跨域、http (项目是 https 的)的问题,全部交给 http-proxy 来解决。
    Illusionary
        24
    Illusionary  
       2021-08-31 09:58:11 +08:00
    我们是前端打包成镜像,跟后端一样部署到 k8s,没上什么 oss
    shunia
        25
    shunia  
       2021-08-31 10:09:47 +08:00
    资源都能上 cdn 了,那 html 文件的“工程化”是要做什么?为了什么目的?
    fkdog
        26
    fkdog  
       2021-08-31 11:09:02 +08:00
    前端 index.html 需要 nginx 等工具进行配合的吧, 把 /*下的所有请求通过 try_files 都定向到 index.html 上, 这样就能让 js 进行动态路由.
    如果没有 nginx 支持, 直接请求 url 可能会报 404 错误.

    不知道现在 cdn 支不支持这类 try_files 操作, 如果支持的话, 那么其实没必要另外用 k8s 了. 虽然缓存可能会滞后一点, 但是也不是滞后的很长时间, 毕竟更新过程中如果用户已经打开了页面, 那么你及时刷新了 html, 但是这部分用户用的可能依然是旧版本, 意义并不是很大.

    针对缓存这种情况, 最好是后端接口先发, 能兼容旧的前端请求. 这样能保证新旧版本用户都能正常使用.
    其次如果你真的有实时刷新 html 缓存的需求, 其实一般的 cdn 服务商都有 api 接口刷新缓存的.
    duan602728596
        27
    duan602728596  
       2021-08-31 13:24:18 +08:00
    前端项目使用 k8s 通过 CI/CD 来编译和部署项目,而且一旦线上发布的代码有问题,可以先及时回滚到旧版本,然后修复上线。
    前端有一些文件,比如 web-worker 和 wasm 文件不适合上 cdn 。所以也不推荐 html 上 cdn 。
    nicholasxuu
        28
    nicholasxuu  
       2021-08-31 13:24:43 +08:00
    如果需要 nodejs 层,k8s 放 nodejs 服务。
    如果前端不用 hashrouter,k8s 放 nginx 服务,因为 cdn 一般不能处理"复杂"路由的 proxy 。
    如果前端用 hashrouter,没必要 k8s 了,全放 cdn 就行了。发布代码的时候调用 sdk 刷新一下 cdn 缓存。
    markgor
        29
    markgor  
       2021-08-31 14:13:03 +08:00
    OSS 开两个,
    1 个资源文件
    1 个 HTML,oss 开启 html,开启版本号管理。
    静态的请求都是:CDN->OSS.
    API 的请求->api 网关(开跨域)
    THESDZ
        30
    THESDZ  
       2021-08-31 17:03:45 +08:00
    @sekfung 实际上就应该每一个项目启动一个 nginx 的 pod,对外的话使用服务发现.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5700 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 02:37 · PVG 10:37 · LAX 18:37 · JFK 21:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.