最近在工作之余，用10来天时间把公司的前端测试环境的架构改了，后续会全面铺开。
为啥要用休息时间改呢，一个是为了方便前后端项目统一架构，获得更好的版本回滚体验等，另一个就是实践一下对应的技术，获（juan）得（si）知（ni）识（men）。
当前的项目类型
当前公司的项目主要有两类（不包含小程序）：
- 官网那种对seo要求高但更新不频繁的
- 管理后台这种对seo要求低但迭代频繁的
这里会介绍当前两种相关的架构，其中后者是引入k8s的一种，当然这两种架构中角色差不多的技术通常可以互换，比如把serverless换为微服务。
seo要求高的
这种有比较适合的现成架构，即jamstack，具体可以见前面讲的这篇文章,其实就是结合了传统ssr的 seo 良好效果和csr的速度快两种优点。
示意图如下
完成的功能如下
- 使用
nextjs实现的 seo 良好效果和高性能 - 使用
CMS提供新闻等内容的编辑发布和重新发布，在发布前会拉取对应内容打包成静态文件 - 使用
serverless提供频繁变化数据的增删改查 - 提供了
electron工具勉强实现了线上代码的版本管理，实现快速回滚和避免了重新发布时可能遇到的问题，比如因版本依赖造成的打包失败 - 使用
jenkins打包然后使用oss对应工具上传和配置
seo要求不高的
这种就是刚改的，中间一些具体技术可能对传统前端比较陌生，但 web 应用的开发往往前后端没那么清晰的界限的，前端会对后端侵入性越来越强。
示意图如下
完成的功能如下
- 使用
github packages管理私有 npm 包 - 使用
strapi管理一些易变的数据，避免使用 hard code直接写在代码里 - 使用
webpack 5提供的Module federation落地微前端，实现了通用模块的复用、不同业务分别开发部署和A/B test - 使用
traefik网关统一管理前后端服务访问 - 使用
apollo对服务中使用到的数据进行配置，比如配置 traefik 中的路由映射和 https 证书等 - 使用
k8s对静态文件的服务进行管理，版本回滚很丝滑 - 使用
jenkins实现k8s相关的打包镜像、nginx配置、上传镜像和使用kubectl部署到集群等
总结
以上大概就是现在项目中两种典型的架构，大部分是自己一个个坑踩出来的，设计的内容有点多，如果对其中某些细节有疑问，可以另外展开。
