feat(imgproxy): enable nginx to serve image filters

nginx/Dockerfile

@@ -13,6 +13,8 @@ ENV NGINX_PUBLIC                  ''
 ENV NGINX_TEMPLATE                application.conf
 ENV XDEBUG_CONNECT_BACK_HOST      '""'
 
+RUN sed -i '1s/^/load_module \/etc\/nginx\/modules\/ngx_http_image_filter_module.so;\n\n/' /etc/nginx/nginx.conf
+
 COPY etc/nginx/fastcgi_params /etc/nginx/fastcgi_params.template
 COPY etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.template
 COPY etc/nginx/available.d/*.conf /etc/nginx/available.d/

nginx/etc/nginx/available.d/magento2.conf

@@ -94,6 +94,12 @@ location /static/ {
 }
 
 location /media/ {
+    location ~* ^/media/catalog/.* {
+        proxy_pass http://$image_resize_stream;
+        proxy_cache catalog_media;
+        proxy_cache_valid 200 24h;
+    }
+
     try_files $uri $uri/ /get.php$is_args$args;
 
     location ~ ^/media/theme_customization/.*\.xml {

nginx/etc/nginx/conf.d/default.conf

@@ -26,3 +26,83 @@ server {
     include /etc/nginx/available.d/${NGINX_TEMPLATE};
     include /etc/nginx/default.d/*.conf;
 }
+
+# create cache for resized images
+proxy_cache_path /tmp/nginx-catalog-media-cache/
+    levels=1:2
+    keys_zone=catalog_media:10m
+    inactive=24h
+    max_size=500m;
+
+# declare resize streams for legacy and new browsers
+map $http_accept $image_resize_stream {
+    default image_resize_legacy;
+    ~image/webp image_resize_webp;
+}
+
+upstream image_resize_webp {
+    server localhost:20001;
+}
+
+upstream image_resize_legacy {
+    server localhost:20002;
+}
+
+# server for modern browsers
+server {
+    server_name localhost;
+    listen 20001;
+
+    root ${NGINX_ROOT}${NGINX_PUBLIC};
+    set $MAGE_ROOT ${NGINX_ROOT};
+
+    location ~* ^/(?<path>media/catalog/.*)$ {
+        set $ext "";
+
+        # when request is made for image.jpg,
+        # check if image.jpg.webp is available.
+        if (-f $MAGE_ROOT/pub/$path.webp) {
+            set $ext .webp;
+        }
+
+        alias $MAGE_ROOT/pub/$path$ext;
+
+        set $width "-";
+        set $height "-";
+        if ($arg_width != '') {
+            set $width $arg_width;
+        }
+        if ($arg_height != '') {
+            set $height $arg_height;
+        }
+
+        image_filter resize $width $height;
+        image_filter_interlace on;
+        image_filter_jpeg_quality 75;
+        image_filter_webp_quality 75;
+    }
+}
+
+# server for legacy browsers
+server {
+    server_name localhost;
+    listen 20002;
+
+    root ${NGINX_ROOT}${NGINX_PUBLIC};
+
+    location / {
+        set $width "-";
+        set $height "-";
+        if ($arg_width != '') {
+            set $width $arg_width;
+        }
+        if ($arg_height != '') {
+            set $height $arg_height;
+        }
+
+        image_filter resize $width $height;
+        image_filter_interlace on;
+        image_filter_jpeg_quality 75;
+        image_filter_webp_quality 75;
+    }
+}