webp-express
webp-express copied to clipboard
support for nginx proxy with apache (Vesta CP)
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
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.
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;
}