WP vhost and webp-express Nginx code #165

New Issue

MrUnknownDE · 2026-04-05T20:25:38+02:00

MrUnknownDE commented

2026-04-05 20:25:38 +02:00

Originally created by @horieva on 11/17/2024

CloudPanel version(s) affected

2.4.2

Description

Wordpress plugin WEBP Express requires that vhost file contents have its rules inserted. I can’t figure out where to put them in the configuration so that everything works. Where can I insert this configuration change in vhost? Thank you.

How to reproduce

This is my vhost:

server {
  listen 80;
  listen [::]:80;
  listen 443 quic;
  listen 443 ssl;
  listen [::]:443 quic;
  listen [::]:443 ssl;
  http2 on;
  http3 off;
  {{ssl_certificate_key}}
  {{ssl_certificate}}
  server_name mydomain.com;
  return 301 https://www.mydomain.com$request_uri;
}

server {
  listen 80;
  listen [::]:80;
  listen 443 quic;
  listen 443 ssl;
  listen [::]:443 quic;
  listen [::]:443 ssl;
  http2 on;
  http3 off;
  {{ssl_certificate_key}}
  {{ssl_certificate}}
  server_name www.mydomain.com www1.mydomain.com;
  {{root}}

  {{nginx_access_log}}
  {{nginx_error_log}}

  if ($scheme != "https") {
    rewrite ^ https://$host$request_uri permanent;
  }

  location ~ /.well-known {
    auth_basic off;
    allow all;
  }

  {{settings}}
  
#add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";
#add_header X-Frame-Options "SAMEORIGIN";
#add_header X-Content-Type-Options "nosniff";
#add_header Content-Security-Policy "block-all-mixed-content; frame-ancestors 'none'; upgrade-insecure-requests;";
#add_header Permissions-Policy "geolocation=(self 'https://www.mydomain.com'), microphone=()";  

  location ~/\.git {
    deny all;
  }

  location ~/(wp-admin/|wp-login.php) {
    #auth_basic "Restricted Area";
    #auth_basic_user_file /home/site-user/.htpasswd;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header Host $host;
    proxy_pass http://127.0.0.1:8080;
    proxy_max_temp_file_size 0;
    proxy_connect_timeout      7200;
    proxy_send_timeout         7200;
    proxy_read_timeout         7200;
    proxy_buffer_size          128k;
    proxy_buffers              4 256k;
    proxy_busy_buffers_size    256k;
    proxy_temp_file_write_size 256k;
  }

  location / {
    {{varnish_proxy_pass}}
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_hide_header X-Varnish;
    proxy_redirect off;
    proxy_max_temp_file_size 0;
    proxy_connect_timeout      720;
    proxy_send_timeout         720;
    proxy_read_timeout         720;
    proxy_buffer_size          128k;
    proxy_buffers              4 256k;
    proxy_busy_buffers_size    256k;
    proxy_temp_file_write_size 256k;
  }

  location ~* ^.+\.(css|js|jpg|jpeg|gif|png|ico|gz|svg|svgz|ttf|otf|woff|woff2|eot|mp4|ogg|ogv|webm|webp|zip|swf|map)$ {
    # WordPress Multisite Subdirectory
    rewrite ^/[_0-9a-zA-Z-]+(/wp-.*) $1 break;
    rewrite ^/[_0-9a-zA-Z-]+(/.*\.php)$ $1 break;
    add_header Access-Control-Allow-Origin "*";
    add_header alt-svc 'h3=":443"; ma=86400';
    expires max;
    access_log off;
  }

  if (-f $request_filename) {
    break;
  }
}

server {
  listen 8080;
  listen [::]:8080;
  server_name www.mydomain.com www1.mydomain.com;
  {{root}}

  include /etc/nginx/global_settings;

  try_files $uri $uri/ /index.php?$args;
  index index.php index.html;

  location ~ \.php$ {
    include fastcgi_params;
    fastcgi_intercept_errors on;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    try_files $uri =404;
    fastcgi_read_timeout 3600;
    fastcgi_send_timeout 3600;
    fastcgi_param HTTPS "on";
    fastcgi_param SERVER_PORT 443;
    fastcgi_pass 127.0.0.1:{{php_fpm_port}};
    fastcgi_param PHP_VALUE "{{php_settings}}";
  }

  # WordPress Multisite Subdirectory
  if (!-e $request_filename) {
    rewrite /wp-admin$ https://$host$uri permanent;
    rewrite ^/[_0-9a-zA-Z-]+(/wp-.*) $1 last;
    rewrite ^/[_0-9a-zA-Z-]+(/.*\.php)$ $1 last;
  }

  if (-f $request_filename) {
    break;
  }
}

This is two solutions from WEBP Express official documentation:

First:

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

# 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
      ;
}
# ------------------- (WebP Express rules ends here)

Second:

# WebP Express rules
# --------------------
location ~* ^/wp-content/.*\.(png|jpe?g)$ {
    add_header Vary Accept;
    expires 365d;
}
location ~* ^/wp-content/.*\.webp$ {
    expires 365d;
    if ($whattodo = AB) {
        add_header Vary Accept;
    }
}
if ($http_accept ~* "webp"){
    set $whattodo A;
}
if (-f $request_filename.webp) {
    set $whattodo  "${whattodo}B";
}
if ($whattodo = AB) {
    rewrite ^(.*) $1.webp last;
}
if ($whattodo = A) {
    rewrite ^/wp-content/.*\.(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content break;
}
# ------------------- (WebP Express rules ends here)

Possible Solution

No response

Additional Context

No response

*Originally created by @horieva on 11/17/2024* ### CloudPanel version(s) affected 2.4.2 ### Description Wordpress plugin WEBP Express requires that vhost file contents have its rules inserted. I can’t figure out where to put them in the configuration so that everything works. Where can I insert this configuration change in vhost? Thank you. ### How to reproduce This is my vhost: ``` server { listen 80; listen [::]:80; listen 443 quic; listen 443 ssl; listen [::]:443 quic; listen [::]:443 ssl; http2 on; http3 off; {{ssl_certificate_key}} {{ssl_certificate}} server_name mydomain.com; return 301 https://www.mydomain.com$request_uri; } server { listen 80; listen [::]:80; listen 443 quic; listen 443 ssl; listen [::]:443 quic; listen [::]:443 ssl; http2 on; http3 off; {{ssl_certificate_key}} {{ssl_certificate}} server_name www.mydomain.com www1.mydomain.com; {{root}} {{nginx_access_log}} {{nginx_error_log}} if ($scheme != "https") { rewrite ^ https://$host$request_uri permanent; } location ~ /.well-known { auth_basic off; allow all; } {{settings}} #add_header Strict-Transport-Security "max-age=31536000; includeSubDomains"; #add_header X-Frame-Options "SAMEORIGIN"; #add_header X-Content-Type-Options "nosniff"; #add_header Content-Security-Policy "block-all-mixed-content; frame-ancestors 'none'; upgrade-insecure-requests;"; #add_header Permissions-Policy "geolocation=(self 'https://www.mydomain.com'), microphone=()"; location ~/\.git { deny all; } location ~/(wp-admin/|wp-login.php) { #auth_basic "Restricted Area"; #auth_basic_user_file /home/site-user/.htpasswd; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header X-Forwarded-Host $host; proxy_set_header Host $host; proxy_pass http://127.0.0.1:8080; proxy_max_temp_file_size 0; proxy_connect_timeout 7200; proxy_send_timeout 7200; proxy_read_timeout 7200; proxy_buffer_size 128k; proxy_buffers 4 256k; proxy_busy_buffers_size 256k; proxy_temp_file_write_size 256k; } location / { {{varnish_proxy_pass}} proxy_set_header Host $host; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_hide_header X-Varnish; proxy_redirect off; proxy_max_temp_file_size 0; proxy_connect_timeout 720; proxy_send_timeout 720; proxy_read_timeout 720; proxy_buffer_size 128k; proxy_buffers 4 256k; proxy_busy_buffers_size 256k; proxy_temp_file_write_size 256k; } location ~* ^.+\.(css|js|jpg|jpeg|gif|png|ico|gz|svg|svgz|ttf|otf|woff|woff2|eot|mp4|ogg|ogv|webm|webp|zip|swf|map)$ { # WordPress Multisite Subdirectory rewrite ^/[_0-9a-zA-Z-]+(/wp-.*) $1 break; rewrite ^/[_0-9a-zA-Z-]+(/.*\.php)$ $1 break; add_header Access-Control-Allow-Origin "*"; add_header alt-svc 'h3=":443"; ma=86400'; expires max; access_log off; } if (-f $request_filename) { break; } } server { listen 8080; listen [::]:8080; server_name www.mydomain.com www1.mydomain.com; {{root}} include /etc/nginx/global_settings; try_files $uri $uri/ /index.php?$args; index index.php index.html; location ~ \.php$ { include fastcgi_params; fastcgi_intercept_errors on; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; try_files $uri =404; fastcgi_read_timeout 3600; fastcgi_send_timeout 3600; fastcgi_param HTTPS "on"; fastcgi_param SERVER_PORT 443; fastcgi_pass 127.0.0.1:{{php_fpm_port}}; fastcgi_param PHP_VALUE "{{php_settings}}"; } # WordPress Multisite Subdirectory if (!-e $request_filename) { rewrite /wp-admin$ https://$host$uri permanent; rewrite ^/[_0-9a-zA-Z-]+(/wp-.*) $1 last; rewrite ^/[_0-9a-zA-Z-]+(/.*\.php)$ $1 last; } if (-f $request_filename) { break; } } ``` This is two solutions from WEBP Express official documentation: First: ``` # WebP Express rules # -------------------- location ~* ^/?wp-content/.*\.(png|jpe?g)$ { add_header Vary Accept; expires 365d; if ($http_accept !~* "webp"){ break; } try_files /wp-content/webp-express/webp-images/doc-root/$uri.webp $uri.webp /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content ; } # 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 ; } # ------------------- (WebP Express rules ends here) ``` Second: ``` # WebP Express rules # -------------------- location ~* ^/wp-content/.*\.(png|jpe?g)$ { add_header Vary Accept; expires 365d; } location ~* ^/wp-content/.*\.webp$ { expires 365d; if ($whattodo = AB) { add_header Vary Accept; } } if ($http_accept ~* "webp"){ set $whattodo A; } if (-f $request_filename.webp) { set $whattodo "${whattodo}B"; } if ($whattodo = AB) { rewrite ^(.*) $1.webp last; } if ($whattodo = A) { rewrite ^/wp-content/.*\.(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content break; } # ------------------- (WebP Express rules ends here) ``` ### Possible Solution _No response_ ### Additional Context _No response_

MrUnknownDE closed this issue

2026-04-05 20:25:38 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/cloudpanel-ce#165