Enable webp support on Nginx+Apache reverse proxy with moss.sh
Tags: nginx, apache, htacces, wordpress
Published: 2022-09-01 10:05:17

Hello, I am scratching my head from last few hours but unable to get reliable source to solve below problem. 

Actually, I am trying to setup WP Smush (or any webp plugin) with webp support on Nginx + apache reverse proxy stack installed my moss.sh. 
But, while setup neither the rewrite rules for apache nor for nginx seems to be working. After going though some sources online, I got to know that actucually nginx is serving all static files and ignoring all redirection setup in htaccess. 

WP Smush documentation says, 

"If your server is running NGINX as a proxy for Apache, the Apache/Litespeed rules may not work in .htaccess, and you’ll need to add the NGINX rules manually instead.

If your server uses a hybrid setup running both NGINX and Apache (such as Cloudways or Nexcess), your images are most likely to be cached and served via NGINX. As such, in order to use Smush’s Local WebP feature, you will need to make the following changes:

Exclude image extensions from NGINX rules so those files are now served via Apache.
In Smush, go to the Local WebP page and follow the setup wizard’s guide to add Apache rules.
Clear all cache and refresh your page.
After WebP conversion rules have been configured, click Check Status. "

After searching online to "Exclude image extension to disable" I got below config.

```    
    location / {
        location ~.*\.(3gp|gif|jpg|jpeg|png|ico|wmv|avi|asf|asx|mpg|mpeg|mp4|pls|mp3|mid|wav|swf|flv|html|htm|txt|js|css|exe|zip|tar|rar|gz|tgz|bz2|uha|7z|doc|docx|xls|xlsx|pdf|iso|woff|ttf|svg|eot|sh|webp)$ {
            root /home/superuser/public_html/notworkingexample.hu;
            expires max;
            try_files $uri $uri/ @backend;
        }
```
And ask to exclude png, jpeg,jpg,webp extension from config to exclude them. But I am unable to find such entry in my nginx config file.

Below is my Nginx config file:

```
server {
    listen 80;
    listen [::]:80;
    server_name www.tricks.nayag.com;

    access_log /usr/local/openresty/nginx/logs/tricks.access;
    error_log /usr/local/openresty/nginx/logs/tricks.error error;

    location /.well-known/acme-challenge/ {
      content_by_lua_block {
        auto_ssl:challenge_server()
      }
    }
    location / {
        return 301 http://tricks.nayag.com$request_uri;
    }
}
server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name www.tricks.nayag.com;

    access_log /usr/local/openresty/nginx/logs/tricks.access;
    error_log /usr/local/openresty/nginx/logs/tricks.error error;

    ssl_certificate_by_lua_block {
      auto_ssl:ssl_certificate()
    }
    ssl_certificate /etc/ssl/resty-auto-ssl-fallback.crt;
    ssl_certificate_key /etc/ssl/resty-auto-ssl-fallback.key;    


    return 301 $scheme://tricks.nayag.com$request_uri;
}    
server {
    listen 80;
    listen [::]:80;
    server_name tricks.nayag.com;

    access_log /usr/local/openresty/nginx/logs/tricks.access;
    error_log /usr/local/openresty/nginx/logs/tricks.error error;

    location /.well-known/acme-challenge/ {
      content_by_lua_block {
        auto_ssl:challenge_server()
      }
    }

    location / {
        return 301 https://$host$request_uri;
    }
}
server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name tricks.nayag.com;

    access_log /usr/local/openresty/nginx/logs/tricks.access;
    error_log /usr/local/openresty/nginx/logs/tricks.error error;

    ssl_certificate_by_lua_block {
      auto_ssl:ssl_certificate()
    }
    ssl_certificate /etc/ssl/resty-auto-ssl-fallback.crt;
    ssl_certificate_key /etc/ssl/resty-auto-ssl-fallback.key;    



    include server_params.tricks;

location / {
    proxy_pass http://127.0.0.1:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $original_scheme;
    include root_params.tricks;
}
    location ~ /\.ht {
        deny all;
    }
}

```
And other two included config file are:-

server_params.tricks

```
# Extra nginx params to be included in this site managed by Moss
#  all directives below will be included within 'server' blocks
#  common configs that you might want to fine-tune are given


# Core module
# https://nginx.org/en/docs/http/ngx_http_core_module.html
#

client_max_body_size 128m;


# Gzip module
# https://nginx.org/en/docs/http/ngx_http_gzip_module.html
#

gzip on;
gzip_disable "msie6";
gzip_comp_level 5;
gzip_min_length 256;
gzip_types application/javascript application/rss+xml application/x-javascript application/xhtml+xml application/xml text/css text/javascript text/plain text/xml;

```
root_params.tricks

```
# Extra nginx params to be included in this site managed by Moss
#  all directives below will be included within 'location /' blocks

# rewrite ^/users/(.*)$ /show?user=$1? last;
# rewrite_log off;

```


Any help is appreciated.

PS: In case it matter, I am trying to setup this on my WordPress based website [NAYAG Buzz][1].


  [1]: https://buzz.nayag.com