前端项目怎么实现灰度发布（金丝雀发布）？

Question

仓乃文 · Accepted Answer

灰度发布是降低上线风险的核心手段，让新版本先对一小部分用户生效，确认无问题后再全量发布。前端灰度的关键在于如何区分用户流量，常见方案有 Nginx 分流、CDN 多版本和前端特性开关。

方案一：Nginx 按比例分流：
```nginx
upstream backend_v1 {
  server 127.0.0.1:8081;
}
upstream backend_v2 {
  server 127.0.0.1:8082;
}

split_clients "${remote_addr}" $variant {
  10%   backend_v2;
  *     backend_v1;
}

server {
  location / {
    proxy_pass $variant;
  }
}
```

方案二：前端特性开关（Feature Flag）：
```typescript
const features = {
  newDashboard: {
    enabled: true,
    rollout: 0.1,
    userIds: ["user_123", "user_456"],
  },
};

function isEnabled(feature: string, userId: string): boolean {
  const config = features[feature];
  if (!config?.enabled) return false;
  if (config.userIds?.includes(userId)) return true;
  const hash = userId.split("").reduce((a, c) => a + c.charCodeAt(0), 0);
  return (hash % 100) < config.rollout * 100;
}

if (isEnabled("newDashboard", currentUser.id)) {
  renderNewDashboard();
} else {
  renderOldDashboard();
}
```

补充说明：
- Nginx 分流适合整站灰度，但需要运维配合
- Feature Flag 最灵活，适合功能级别的灰度，推荐用 LaunchDarkly 或 Unleash
- 灰度期间务必监控错误率和性能指标，设置自动回滚阈值
- CDN 多版本方案适合静态资源灰度，需要 CDN 支持多版本路径