Nginx 的 map 指令可实现静态资源灰度分发,通过 $cookie_version 映射 $resource_prefix,使不同 Cookie 用户加载 /static/v1/ 或 /static/v2/ 下对应版本的 JS、CSS、HTML 文件,无需改前端代码、不依赖 Ingress,适配纯前端容器化部署。

用 Nginx 的 map 指令做静态资源灰度分发,核心是让不同 Cookie 值的用户加载不同版本的 JS、CSS、HTML 文件,不改前端代码、不依赖 Ingress、适合纯前端容器化部署。
前提准备:资源目录与 Cookie 约定
确保以下两点已就绪:
- 静态资源按版本组织进容器镜像,例如:
/static/v1/(稳定版)、/static/v2/(灰度版) - 用户请求中携带明确可识别的 Cookie,如
version=canary或version=v2.0;注意大小写敏感,且 Cookie 名称不含特殊字符
配置 map 变量映射规则
在 nginx.conf 的 http 块中添加:
map $cookie_version $resource_prefix {
default "/static/v1/";
"canary" "/static/v2/";
"v2.0" "/static/v2/";
"beta" "/static/v2/";
}
说明:
-
$cookie_version是 Nginx 内置变量,自动提取名为version的 Cookie 值 - 未匹配或 Cookie 为空时走
default分支,保证兜底可用 - 支持多值映射同一路径,便于灰度策略灵活扩展
在 location 中应用映射结果
在 server 块中处理静态资源请求:
location /static/ {
alias $resource_prefix;
expires 1y;
add_header Cache-Control "public, immutable";
}
效果示例:
- 用户带
Cookie: version=canary请求/static/app.js→ 实际读取容器内/static/v2/app.js - 其他用户请求同路径 → 默认读取
/static/v1/app.js
注意:alias 末尾不加斜杠,且 $resource_prefix 必须以 / 开头,否则路径拼接出错。
增强实用性的小技巧
让灰度更可控、更易验证:
- 对 HTML 入口页也做灰度:用
try_files配合变量,例如try_files /$resource_prefix/index.html =404; - 主动种灰度 Cookie:在特定路径(如
/beta)响应头中加add_header Set-Cookie "version=canary; Path=/; Max-Age=86400"; - 构建时确保 v1/v2 目录结构完全一致,避免相对引用(如
./css/main.css)在切换版本后失效 - 上线前用
curl -H "Cookie: version=canary" http://yourdomain/static/app.js直接验证路径是否命中正确文件


















