如何配置Nginx实现缩略图缺失时自动获取原图并缩放？

Alright, let's walk through how to set up Nginx to automatically generate resized thumbnails on the fly when the requested thumbnail doesn't exist. This relies on the ngx_http_image_filter_module, so let's get started:

• First, confirm your Nginx installation has the ngx_http_image_filter_module enabled. Run nginx -V and look for --with-http_image_filter_module in the configure arguments. If it's missing, you'll need to recompile Nginx with that flag included.

We need Nginx to do three key things:

1. Check if the requested thumbnail file exists locally
2. If not, rewrite the URL to fetch the corresponding original image
3. Resize the image using the dimensions specified in the request URL, and optionally cache the result for future requests

Drop this into your Nginx server block (adjust paths and SSL settings to match your environment):

server {
    listen 443 ssl;
    server_name example.com;

    # Add your SSL certificate configs here (certificate, key, etc.)

    # Root directory where your original images are stored
    root /var/www/image-storage;

    # Handle thumbnail requests
    location ~* ^/thumbs/([^/]+)/(\d+)/(\d+)/(.+)$ {
        # First check if the thumbnail already exists
        try_files $uri @generate_thumbnail;
    }

    # Named location to generate the thumbnail on demand
    location @generate_thumbnail {
        # Rewrite URL to point to the original image
        # Removes "thumbs/" and the dimensions segment from the request path
        rewrite ^/thumbs/([^/]+)/(\d+)/(\d+)/(.+)$ /$1/$4 break;

        # Resize the image to the captured width and height
        image_filter resize $2 $3;
        image_filter_jpeg_quality 85; # Adjust image quality as needed
        image_filter_buffer 10M; # Increase this if you have large original images

        # Optional: Cache generated thumbnails to disk (uncomment to enable)
        # proxy_store on;
        # proxy_store_access user:rw group:rw all:r;
        # proxy_temp_path /var/www/thumbnail-cache;
        # alias /var/www/image-storage/thumbs/$1/$2/$3/;
    }

    # Serve original images normally
    location / {
        try_files $uri =404;
    }
}

• location ~* ^/thumbs/([^/]+)/(\d+)/(\d+)/(.+)$: This regex captures four parts from the request URL: the bucket name ($1), width ($2), height ($3), and original filename ($4).
• try_files $uri @generate_thumbnail: Nginx first checks if the requested thumbnail exists at the full $uri path. If it doesn't, the request gets passed to the @generate_thumbnail named location.
• rewrite rule: Transforms the thumbnail URL into the original image path — so /thumbs/_default_upload_bucket/236/280/5804.jpeg becomes /_default_upload_bucket/5804.jpeg.
• image_filter resize $2 $3: Uses the captured width and height values to resize the original image to the requested dimensions.
• Optional caching: The commented-out proxy_store lines let you save generated thumbnails to disk. This means subsequent requests for the same thumbnail will be served directly instead of regenerating it, saving server resources. Just make sure the cache directory exists and has proper read/write permissions.

1. Restart Nginx to apply the config: sudo systemctl restart nginx (adjust for your distro if needed)
2. Request a non-existent thumbnail URL like https://example.com/thumbs/_default_upload_bucket/236/280/5804.jpeg
3. Verify Nginx serves the resized image, and if you enabled caching, check that the thumbnail file is created in your cache directory.

内容的提问来源于stack exchange，提问作者James M