webp-express icon indicating copy to clipboard operation
webp-express copied to clipboard

support for nginx proxy with apache (Vesta CP)

Open alnux opened this issue 3 years ago • 2 comments

Hi the configuration for nginx that you have in the faqs of this excellent plugin did not work for me, so I decided to do many tests until I gave the solution and I share you.

I will explain it for the case of vestacp since it is my case, but I think there will be no difficulty in adapting it to other cases. First edit the domain nginx file by removing the jpg, jpeg, and png extensions from the root

location / {
        proxy_pass      https://200.2.2.8:8443; # YOUR SERVER IP
        location ~* ^.+\.(**delete extensions from here**|gif|bmp|ico|svg|tif|tiff|css|js|htm|html|ttf|otf|woff|txt)$ {
            root           /home/admin/web/domain.com/public_html;
            access_log     /var/log/httpd/domains/domain.com.log combined;
            access_log     /var/log/httpd/domains/domain.com.bytes bytes;
            expires        max;
            try_files      $uri @fallback;
        }
    }

I recommend creating a Vesta template so that when updated this is not overwritten and re-adjusted with jpg,jpeg,png extensions.

once this change is made so that the actions take effect, we will create a file of the type

snginx.everything.conf.WebP_Express

within the same folder where your domain configuration nginx file is located

and let's paste the following code

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    root /home/admin/web/domain.com/public_html;
    break;
  }
 try_files
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    @fallback
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?xdestination=x$request_filename&wp-content=wp-content
      ;
}
# Optionally specify browser cache expiry
    expires 365d;
    add_header Cache-Control "public, must-revalidate";
    add_header Access-Control-Allow-Origin *;

# ------------------- (WebP Express rules ends here)

by the way @fallback is a location that make a proxy_pass.

location @fallback {
        proxy_pass      https://200.20.200.00:8443; #YOUR SERVER IP
    }

well we just to save it, test (nginx -t), and reload nginx (nginx -s reload)

i hope that this help you, hugs

alnux avatar Apr 18 '21 19:04 alnux

I was trying but something strange happens when I put the root again,

if ($http_accept !~* "webp"){
    root /home/admin/web/domain.com/public_html;  #<------ THIS LINE MAKE WP GOES MAD
    break;
  }

someone could give a suggestion to replace the root and I can load the image

i was trying to use try_files but does not work inside if.

alnux avatar Apr 18 '21 20:04 alnux

hi,

I do this very simple, works with default plugin settings. It's note quite perfect but does the job.

map $http_accept $webp_extension {
  default       '';
  ~*webp        .webp;
}

location ~* /wp-content/.+\.(?i)(png|jpe?g)$ {
  # if webp capable sends webp if exists then passes to backend (not passing the jpeg)
  # only sends the jpeg to a not webp capable ($webp_extension == "")
  try_files $uri$webp_extension /wp-content/webp-express/webp-images/doc-root$uri$webp_extension @backend;

  add_header Vary Accept;
  add_header Cache-Control Private;

  expires off;
  access_log off;
}

cantoute avatar May 30 '21 15:05 cantoute