大规模前端应用的分布式部署方案

目前我们前端开发的项目有三个特点：第一，采用了五个虚拟团队联合开发的模式，充分利用北京、哈尔滨、济南、西安、广州区域人才优势和信息优势，各个团队由5-10人的团队组成，技术栈统一为react+antd，使用脚手架生成框架代码，在框架约束下开发；第二，各个团队规模小，且以开发人员为主，没有专职的测试和运维团队，未来随着项目持续对外输出和对内推广，将面临不断优化迭代和潜在增长用户海量增长的情景；第三，为了缩短项目周期、降低成本和风险，引入战略合作伙伴，并行参与开发，在必要时集成合并成一个系统，统一管理。

目前，业界主流的前端大型应用开发方式为：在脚手架框架约束下，前端工程师们根据模块功能进行分工，采取集中办公的方式合力完成，然后开发团队和测试团队共同进行优化打磨，最后交付运维团队进行集中上线发布。

显然，这种主流的前端开发方式并不适合这种由小项目组联合形成的虚拟团队，因此，我们思考出了“一种基于ETCD的分布式前端实施方法”，以期能够达到降低虚拟团队沟通成本、解决代码冲突、提升编译速度、优化测试流程、能在生产直接测试验证同时不影响生产功能、实现不重启发版上线、上线后能根据用户数量进行动态扩容，并实时发现容器异常并告警的目的。

1. 目前项目组前端工程技术栈限定为react，按照市场行情，招聘react技术栈，用人成本比其他技术栈高约30%-40%，而招聘其他技术栈开发人员入职，需要至少三个月时间切换到react技术栈，期间没有产出，沉没成本较高。
2. 即使统一成一个技术栈，react+antd，但如果项目足够庞大，周期足够长，新旧功能也会因为技术栈版本更新问题无法兼容，如一些功能在react16与react18、在antd3.x和antd4.x环境下，表现并不一致。
3. 虚拟团队联合开发，人员没有集中办公，导致会议多，沟通链条长，开发效率低，联调困难。同时开发人员要合并到一个分支上统一发版，造成代码冲突频繁。合作伙伴参与人员众多，流动性大，代码规范比较难管理，也增加了项目代码管理风险。
4. 现有的前端框架路由表是静态的，在路由发生改变时需要重新发版，如果采用夜间停机发版，会造成服务短暂不可用，如果采用蓝绿发布，可能会导致瞬时负载压力过大，有崩溃风险，且夜间发版对开发人员身体健康不利。
5. 代码越来越多，打包越来越慢，部署升级麻烦，代码“修改五分钟，打包半小时”的现象普遍，公共组件的修改升级需要考虑的更多，很容易牵一发而动全身。
6. 在开发中，测试运维团队人员不足可能无法匹配开发进度，造成进度滞后；如果购买云服务，可以弥补人员不足问题，但云服务往往功能单一，仅能满足简单需求，如需深度定制，资金投入不菲，对团队成本管控是巨大挑战。
7. 页面延迟、代码警告、服务异常等问题运维人员无法及时知晓，容易错过最佳诊断时机。

微前端的应用，可以使项目中的前端开发部署能够做到多技术栈、多版本、多代码规范共存，能够将项目拆解成众多小的项目集独立开发，能够有效减少团队内的联调、沟通和代码冲突频率、提升编译效率；分布式ETCD集群部署+动态路由表技术能够实现在生产环境验证功能，同时与生产环境隔离，不会对生产造成影响，等充分验证后，再通过修改ETCD路由链接即可实现发版，简单易操作，可以实现在工作时间验证调试，避免熬夜通宵跟进发版之苦；使用现成的阿里云和prometheus技术，能够大幅度提高运维效率，及时定位生产问题，降低设备和人员成本，同时可以借助云服务开放的原生接口实现深度定制，满足个性化运维需求。

所以基于此, 我们制定了一套基于qiankun + ETCD + CONFD

1. qiankun：蚂蚁金服的一款开源微前端框架，提供样式隔离和代码沙箱，其技术核心为前端UMD标准
2. ETCD：分布式KVStore，用于存储前端路由与该路由相对应的子应用地址
3. CONFD：配置管理工具，用于同步docker镜像配置文件与ETCD中保存的数据。在ECTD配置被修改后，CONFD会通知阿里云重启容器
4. jenkins：是CI/CD系统，可以实现代码扫描，集成测试、打包编译镜像、推送到云平台等功能
5. 阿里云：是企业云服务，具备服务发现、弹性扩容、负载均衡等功能，内置k8s，mesos，marathon等编排调度工具，对外开放原生接口
6. prometheus：是开源运维监控系统，能够监控主机、容器、服务的吞吐量、错误、延迟、并发量等信息，及时为运维人员推送告警

具体的实施步骤:

1. 在代码设计时，将前端工程按照功能划分为众多子工程，每个子工程可以使用不同技术栈、不同版本、不同代码规范脚手架构建。由于前端各技术栈在babel编译后都会生成标准的ES5原生代码，所以各种风格的前端技术栈的代码在统一编译后是可以充分兼容的
2. 选定一个工程为主工程，注入微前端主工程插件，令其担负动态路由功能，同时在构建时将confd和confd动态路由模板打包进nginx镜像中
3. 将其他子工程注入微前端子工程插件，作为被主工程调度的子路由工程
4. 在阿里云申请k8s集群，部署好ETCD集群，使用k8s启动主工程镜像，并在镜像中启动confd，使主工程连接到ETCD集群
5. 在每个子工程按照1-4步继续拆分成粒度更细、可以由单人开发的功能模块，然后分配给各地虚拟团队的开发人员，开发打包上线，使用阿里云负载均衡地址在生产环境直接测试，因为此时没有使用ETCD与主应用产生关联，不会对生产造成影响，待测试通过后，修改ETCD路由链接配置，即可实现发版，可以在工作时间验证调试，避免熬夜通宵跟进发版之苦
6. 为业务添加指标监控、异常告警等prometheus功能

流程图.png

前端组织示意图：讲一个工程按照功能拆分成多个模块，各个模块单独上线，测试通过后形成路由地址，配置进ETCD中，完成发版

image.png

这个方案的亮点在于单个模块的代码量小，技术栈无关，沟通成本低，修改代码风险性低，解决了原来系统复杂性高，需要集中联调，集中办公的问题，同时将各个模块使用nginx动态修改转发路由技术进行拼装，能在生产直接测试验证同时不影响生产功能，测试通过后通过ETCD动态修改主应用nginx的路由表，实现不重启发版上线，不需要进行停机测试和蓝绿发布，提升运维效率。关键点在于将微前端技术与使用ETCD集群动态修改主应用nginx路由表技术组合在一起，取长补短，构造出一种更稳定便捷快速的前端开发和实施方法。

当然，使用berial等微前端框架、使用redis等键值存储、使用jekins、k8s等编排工具、使用zookeeper、consul等服务发现工具、使用腾讯云等云平台搭建分布式动态路由前端实施方案，亦可达到同样的效果