☰

使用 NGINX 作为对象存储的反向代理，有条件地提供 WEBP

tag-icon • tag-icon nginx reverse-proxy nginx-reverse-proxy minio object-storage
使用 NGINX 作为对象存储的反向代理，有条件地提供 WEBP

我在 Nginx 中使用了类似这样的位置配置，当用户支持 WEBP 时，它可以提供 WEBP 服务

    map $http_accept $webp_suffix {
        default   "";
        "~*webp"  ".webp";
    }

    server {
    #...
        location ~* \.(?:jpg|jpeg|png|webp)$ {
            root   /usr/share/nginx/html;
            try_files $uri$webp_suffix $uri =404;
        }
    #...
    }

我的问题是我想使用相同的策略，但是当我使用对象存储（Minio-S3兼容）时

所以我想知道替换这个部分的最佳方法是什么：

try_files $uri$webp_suffix $uri =404;

类似于

try_proxy_pass http://minio$uri$webp_suffix http://minio$uri =404;

答案1

这是我自己针对此问题提出的解决方案。

如果您想了解更多信息，这里有一个我为测试和概念验证而制作的 repo 链接，证明该解决方案有效：https://github.com/erfantkerfan/cdn-nginx-image-optimization

    recursive_error_pages on;

    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_set_header Range $http_range;
    proxy_set_header If-Range $http_if_range;
    proxy_intercept_errors on;

    proxy_connect_timeout 300;
    proxy_http_version 1.1;
    proxy_set_header Connection "";
    chunked_transfer_encoding off;
    proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504 http_404;

    location ~* \.(?:jpg|jpeg|png|webp)$ {
        root   /usr/share/nginx/html;
        try_files /dev/null @image_webp;
    }

    location @image_webp {
        proxy_pass http://minio_servers$uri$webp_suffix;

        image_filter_jpeg_quality 95;
        image_filter_webp_quality 100;
        image_filter_interlace on;
        image_filter_buffer 100M;
        image_filter resize $width $height;
        image_filter crop $width $height;
        image_filter_transparency on;

        error_page 404 415 = @image;
    }

    location @image {
        proxy_pass http://minio_servers$uri;

        image_filter_jpeg_quality 95;
        image_filter_webp_quality 100;
        image_filter_interlace on;
        image_filter_buffer 100M;
        image_filter resize $width $height;
        image_filter crop $width $height;
        image_filter_transparency on;
    }
}

相关内容