以中间件的形式做前端灰度部署的架构设计
背景
估计多数架构师对于后端灰度部署的技术比较熟悉而对于前端灰度部署不慎了解，首先我要说这是一个新名词，在传统的思路里对于部署只是相对于服务器的，而对于前端部署向来都是直接更新，因为对于传统架构而言不会对用户的设备做判断，在安卓 、苹果等终端出现之前，pc上不会版本而言只有针对不同的浏览器做适配兼容，而在安卓 苹果等终端出现之后有了web应用这个新概念，对于更新起的小程序而言，这根本是一个纯的web应用。而且以目前市场上的趋势而言已经由手机厂商的应用分发，而趋向与平台分发，比较出名的包括微信小程序·、支付宝小程序。由于web轻量，易更新的特点逐渐会取代传统app的开发模式，而是web挂载小程序，通过挂载app提供原生性能的解决方案。此时对于web 有原生app一样可控版本的功能必将成为硬性要求。简而言之web小程序挂载必须在保持轻量的前提下还能保持针对不同终端能同一页面显示不同版本甚至不同角色同时还有保证高性能的web应用。针对这个问题做出架构设计。
目标
【以中间件的形式做前端灰度部署的架构设计】实现定向投放，甚至针对单个用户级别的投放配置
预热阶段
动手之前首先要解释下一下非常关键的知识点，什么是http请求，浏览器发起的http请求和app发起的http请求有什么不同
http请求是网络通信协议的一种，基于TCP/IP协议，TCP/IP又基于socket协议，对于这种基础的东西你如果不知道那么请不要再看下去了。http请求协议有约定的格式主要有一下：请求行（request line）、请求头部（header）、请求数据三部分组成。浏览器请求时在head部分有个必传字段user-agent，这个是所有浏览器发起请求的时都会带的字段，与app不同，app的http请求不会主动带设备信息，如果要加则需要在代码里里手动在请求头部加上参数。而我们要做到前端的灰度部署首先就是要拦截user-agent这个字段来获取设备信息，而在用户登陆之后通过获取请求头内的cookie值获取用户的身份。
第二个知识点就是前端的打包技术，首先我们要我们要讲为什么我们一定要使用打包技术以及前后端分离的意义。在webpack出现之前 我们通过gulp 或者grunt 使用bable的es6转编译功能通过这个实现前端的工程话管理。最终我们要达到的目的是一个页面要只需要获取一个js文件就能完成界面的渲染，这样的优点首先我们必须有一个概念那就是服务器的连接池概念，一个服务器每和一个客户端发生链接都会占用服务器内存，这个不管是无状态还是有状态链接都一样，将多个js文件和cs文件打包为一个可以释放大量的连接池，也许你会问那我直接把所有文件都写在一个js里不就行吗，白痴你写个30行代码你还看的懂1万行你行吗这就是打包技术的优点，同时也是前后端分离的优点。同样我们还能使用cdn将静态文件部署到多个文件部署到多个服务器上，这个只会占用磁盘空间，而不会占用内存空间。也许有的java或者php会问我也可以直接写web应用来让他发起访问请求啊。你可以写但是这样势必会浪费更多的资源，而且在于web应用越来越复杂的环境下，我们需要更加专业的人来维护。
设计阶段
文章图片
中间件部分
文章图片
云端打包部分
文章图片
通过webview支持可以做到web与native的互相转化 我们主要要做的就是通过中间件拦截http请求获取cookie 获取设备信息，这方面需要native的技术支持因为我们要获取cookie需要webview的封装，当然如果app的场景我们直接转化为普通的web应用场景
文章图片
结构层面的设计 我们需要在web开发阶段 需要对与不同的role 配置不同的entry 这个根据打包工具的不同，唯一要满足的必须是在服务端打包。同时必须在服务端搭建私有仓库，因为npm官方也不是很靠谱，本地私有库最安全。
结束
实施阶段就不提供来源码支持了，只能告诉各位是用node开发的，但其实用java php 也可以主要是思路，感兴趣的同学可以动手尝试。主要有两个比较关键的点 一个是中间件 一个是服务器分发。
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量