简单的前端灰度发布方案

基本概念

灰度发布（又名金丝雀发布）是指在黑与白之间，能够平滑过渡的一种发布方式。在其上可以进行A/B testing，即让一部分用户继续用产品特性A，一部分用户开始用产品特性B，如果用户对B没有什么反对意见，那么逐步扩大范围，把所有用户都迁移到B上面来。灰度发布可以保证整体系统的稳定，在初始灰度的时候就可以发现、调整问题，以保证其影响度。

实现思路

灰度发布的核心就是分流，一部分用户能看到，一部分用户看不到。所以主要实现的核心分流算法。在实现这个需求的时候，我想到了抽签。比如在1-100的数字中抽到1-30的用户进入beta版本，抽到31-100的用户进入stable版本。这样就相当于是30%的流量进入灰度版本。

具体实现

首先实现产生1-100的整数的随机函数。

/***************************************
 * 生成从minNum到maxNum的随机数。
 * 如果指定decimalNum个数，则生成指定小数位数的随机数
 * 如果不指定任何参数，则生成0-1之间的随机数。
 *
 * @minNum：[数据类型是Integer]生成的随机数的最小值（minNum和maxNum可以调换位置）
 * @maxNum：[数据类型是Integer]生成的随机数的最大值
 * @decimalNum：[数据类型是Integer]如果生成的是带有小数的随机数，则指定随机数的小数点后的位数
 *
 ****************************************/
function randomNum(maxNum, minNum, decimalNum) {
    var max = 0,
        min = 0;
    minNum <= maxNum ? ((min = minNum), (max = maxNum)) : ((min = maxNum), (max = minNum));
    switch (arguments.length) {
        case 1:
            return Math.floor(Math.random() * (max + 1));
        case 2:
            return Math.floor(Math.random() * (max - min + 1) + min);
        case 3:
            return (Math.random() * (max - min) + min).toFixed(decimalNum);
        default:
            return Math.random();
    }
}

然后实现灰度流量的判断

/**
 * @description 灰度显示
 * @param {Number} defaultLucky 灰度值，取值范围[0,1]
 * @returns {Boolean} ture/false
 */
export function isShowGray(defaultLucky) {
    if (!lucky) lucky = defaultLucky;
    var num = randomNum(1, 100);
    if (num <= Number(100 * lucky) && num >= 1) {
        return true;
    }
    return false;
}

总结

至此，简单的灰度方案就做好了。在进入页面时先调用isShowGray函数判断进入哪个方案。这样就可以做到简单的用户分流。