Docker Container for image resizing
This post is just a record of creating a Docker Container that dynamically resizes images uploaded to Google Cloud Storage(GCS) using the Nginx image filter module.
Motivation
I did it with the following motivations and requirements.
- I want to change the size of the uploaded image freely
- The images are uploaded to GCS
- I would like to try it at a low cost
- I want to do it with a query string without changing the original URL
- It would be nice to have ability to caching
The method of choice
Proxy by Nginx.
Resize using Nginx’s image filter module.
I know most of you have probably already known, so it is just a record for myself.
Overview
# ↓caching
proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=resized:64m max_size=20000m inactive=1d;
server {
listen 80;
access_log /var/log/nginx/proxy.log;
location / {
proxy_pass "http://127.0.0.1:9001";
proxy_cache resized;
proxy_cache_valid 200 302 24h;
proxy_cache_valid 404 1m;
# expire time for browser
expires 1d;
}
}
# ↓Resizing
limit_req_zone "1" zone=2persec:32k rate=2r/s;
server {
listen 9001;
allow 127.0.0.1;
deny all;
limit_req zone=2persec burst=10;
access_log /var/log/nginx/resizer.log; server_name storage.googleapis.com;
resolver 8.8.8.8 8.8.4.4; location ~ /(.*)/original {
internal;
proxy_pass https://storage.googleapis.com/your-project/$path;
} location ~ /(.*)/resize {
internal;
proxy_pass https://storage.googleapis.com/your-project/$path;
image_filter resize $width $height;
image_filter_jpeg_quality $quality;
image_filter_buffer 100M;
error_page 415 = @empty;
} location @empty {
empty_gif;
} location ~ /(.*)$ {
set $path $1; if ($args = "") {
rewrite ^ /(.*)/original last;
} set $width "-";
set $height "-";
set $quality 100; if ($arg_w ~ ([0-9]+)) {
set $width $1;
}
if ($arg_h ~ ([0-9]+)) {
set $height $1;
}
if ($arg_q ~ (100|[1-9][0-9]|[1-9])) {
set $quality $1;
} rewrite ^ /(.*)/resize last;
}
}For example, if you want the following URL image.
https://storage.googleapis.com/your-project/your/file/name.jpgYou can get the original image by GET request like this.
http://localhost:8080/your/file/name.jpgFurthermore, if you want to GET a resized image
you can simply use the following query strings.
http://localhost:8080/your/file/name.jpg?w=500&h=500&q=70Github Repository
It is a very simple implementation. Please have a look at my source code.
I think you can use it as it is.
Remaining Problems
I feel curious, that while it’s relatively easy to create such a function, there is a SaaS instance such as the imgix.
Moreover, there are many developers using them.
In other words, I guess there must be some challenges or problems in this kind of image processing I wrote above.
However, I cannot imagine what kind of challenges I could face.
Additionally, I am unfamiliar with Nginx, so I’m not sure if I’m using it correctly.
I would appreciate your advice.
References and other solutions
This is a referenced post and other solutions.
