如何配置Nginx反向代理CDN实现自动匹配最佳可用图片尺寸

该需求完全可以通过Nginx配置实现，核心是通过map指令定义尺寸匹配规则，再结合反向代理配置完成转发，具体方案如下：

• 用Nginx内置的ngx_http_map_module（默认已编译进官方版本），根据请求参数width的值匹配对应要返回的最小可用尺寸
• 提取请求中的存储桶路径、文件前缀，拼接对应的目标CDN地址
• 超过3000宽度的请求、参数非法的请求直接转发原图

# 宽度到目标尺寸的映射规则，需放在http块内
map $arg_width $target_size {
    default ""; # 默认返回原图
    ~*^[0-2]?$ ""; # 宽度小于等于2直接返回原图，可根据需要调整为返回50尺寸
    ~*^[3-9]|[1-4][0-9]$ "50x50"; # 3-49匹配50尺寸
    ~*^[5-9][0-9]|1[0-4][0-9]$ "150x150"; # 50-149匹配150尺寸
    ~*^1[5-9][0-9]|2[0-9][0-9]$ "300x300"; # 150-299匹配300尺寸
    ~*^[3-4][0-9][0-9]$ "500x500"; # 300-499匹配500尺寸
    ~*^[5-9][0-9][0-9]$ "1000x1000"; # 500-999匹配1000尺寸
    ~*^[1-2][0-9]{3}$ "3000x3000"; # 1000-2999匹配3000尺寸
}

server {
    listen 443 ssl;
    server_name my-reverse-proxy.domain.com;
    # 此处补充你的SSL证书、日志等基础配置，省略

    location ~ ^/([^/]+)/([^.]+)\.png$ {
        # 提取存储桶名称和文件名前缀
        set $bucket $1;
        set $filename $2;

        # 拼接对应尺寸的目标文件名
        if ($target_size != "") {
            set $filename "${filename}_${target_size}";
        }
        set $cdn_path "https://storage.googleapis.com/$bucket/$filename.png";

        # 反向代理配置
        proxy_pass $cdn_path;
        proxy_set_header Host storage.googleapis.com;
        # 可选配置：添加缓存减少回源
        proxy_cache_valid 200 7d;
        proxy_cache_key "$host$uri$arg_width";
    }
}

• 所有正则规则按照从小到大的顺序匹配，保证返回的是大于等于请求宽度的最小可用尺寸
• 非数字格式的width参数会命中默认规则，直接返回原图，不会出现匹配错误
• 如果需要支持JPG、WebP等其他格式图片，调整location块里的后缀匹配规则即可

如果后续尺寸调整比较频繁，Nginx原生map规则不好维护，也可以用以下方案实现：

• 用OpenResty基于Lua脚本实现匹配逻辑，后续新增尺寸只需要修改Lua数组即可，比Nginx原生配置更灵活
• 在反向代理层部署Go/Node.js编写的轻量服务处理参数匹配，再做转发，适合规则频繁迭代的场景
• 如果你的CDN支持边缘计算函数，直接在CDN层做参数匹配转发，不需要自己维护反向代理服务

内容的提问来源于stack exchange，提问作者Richard Lindhout