背景

估计多数架构师对于后端灰度部署的技术比较熟悉而对于前端灰度部署不慎了解，首先我要说这是一个新名词，在传统的思路里对于部署只是相对于服务器的，而对于前端部署向来都是直接更新，因为对于传统架构而言不会对用户的设备做判断，在安卓、苹果等终端出现之前，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应用越来越复杂的环境下，我们需要更加专业的人来维护。