引入k8s后的前端架构是什么样的?

·  阅读 293
引入k8s后的前端架构是什么样的?

最近在工作之余,用10来天时间把公司的前端测试环境的架构改了,后续会全面铺开。

为啥要用休息时间改呢,一个是为了方便前后端项目统一架构,获得更好的版本回滚体验等,另一个就是实践一下对应的技术,获(juan)得(si)知(ni)识(men)。

当前的项目类型

当前公司的项目主要有两类(不包含小程序):

  • 官网那种对seo要求高但更新不频繁的
  • 管理后台这种对seo要求低但迭代频繁的

这里会介绍当前两种相关的架构,其中后者是引入k8s的一种,当然这两种架构中角色差不多的技术通常可以互换,比如把serverless换为微服务

seo要求高的

这种有比较适合的现成架构,即jamstack,具体可以见前面讲的这篇文章,其实就是结合了传统ssr的 seo 良好效果和csr的速度快两种优点。

示意图如下

image.png

完成的功能如下

  • 使用nextjs实现的 seo 良好效果和高性能
  • 使用CMS提供新闻等内容的编辑发布和重新发布,在发布前会拉取对应内容打包成静态文件
  • 使用serverless提供频繁变化数据的增删改查
  • 提供了electron工具勉强实现了线上代码的版本管理,实现快速回滚和避免了重新发布时可能遇到的问题,比如因版本依赖造成的打包失败
  • 使用jenkins打包然后使用oss对应工具上传和配置

seo要求不高的

这种就是刚改的,中间一些具体技术可能对传统前端比较陌生,但 web 应用的开发往往前后端没那么清晰的界限的,前端会对后端侵入性越来越强。

示意图如下

image.png

完成的功能如下

  • 使用github packages管理私有 npm 包
  • 使用strapi管理一些易变的数据,避免使用 hard code直接写在代码里
  • 使用 webpack 5提供的Module federation落地微前端,实现了通用模块的复用、不同业务分别开发部署和A/B test
  • 使用traefik网关统一管理前后端服务访问
  • 使用apollo对服务中使用到的数据进行配置,比如配置 traefik 中的路由映射和 https 证书等
  • 使用k8s对静态文件的服务进行管理,版本回滚很丝滑
  • 使用jenkins实现k8s相关的打包镜像、nginx配置、上传镜像和使用kubectl部署到集群等

总结

以上大概就是现在项目中两种典型的架构,大部分是自己一个个坑踩出来的,设计的内容有点多,如果对其中某些细节有疑问,可以另外展开。

分类:
前端
收藏成功!
已添加到「」, 点击更改