Nginx – Conditionally serve WebP when nginx is setup as reverse proxy

cachenginxPROXYreverse-proxy

Trying to conditionally serve WebP images in browsers that accept that mime type. Not being very familiar with nginx, I'm having issues implementing a known solution into my existing default host configuration.

Mainly I'm concerned with using this snippet:

try_files $uri$webp_suffix $uri =404;

In full, I'm attempting to use the below method of implementing WebP:

  map $http_accept $webp_suffix {
    "~*webp"  ".webp";
  }
  map $msie $cache_control {
      "1"     "private";
  }
  map $msie $vary_header {
      default "Accept";
      "1"     "";
  }

  # if proxying to another backend and using nginx as cache
  proxy_cache_path  /tmp/cache levels=1:2 keys_zone=my-cache:8m max_size=1000m inactive=600m;
  proxy_temp_path /tmp/cache/tmp;

  server {
    listen       8081;
    server_name  localhost;

    location / {
      # set response headers specially treating MSIE
      add_header Vary $vary_header;
      add_header Cache-Control $cache_control;
      # now serve our images
      try_files $uri$webp_suffix $uri =404;
    }

    # if proxying to another backend and using nginx as cache
    if ($http_accept ~* "webp")    { set $webp_accept "true"; }
    proxy_cache_key $scheme$proxy_host$request_uri$webp_local$webp_accept;

    location /proxy {
      # Pass WebP support header to backend
      proxy_set_header  WebP  $webp_accept;
      proxy_pass http://127.0.0.1:8080;
      proxy_cache my-cache;
    }
  }

from here

But trying to find a way to merge it with my existing proxy config has been getting me nothing but errors. My existing config (AWS Elastic BeanStalk on Node.js) appears to be reverse proxied to a node process.

My existing nginx_proxy file:

upstream nodejs {
    server 127.0.0.1:8081;
    keepalive 256;
}

server {
    listen 8080;


    if ($time_iso8601 ~ "^(\d{4})-(\d{2})-(\d{2})T(\d{2})") {
        set $year $1;
        set $month $2;
        set $day $3;
        set $hour $4;
    }
    access_log /var/log/nginx/healthd/application.log.$year-$month-$day-$hour healthd;
    access_log  /var/log/nginx/access.log  main;


    location / {
        proxy_pass  http://nodejs;
        proxy_set_header   Connection "";
        proxy_http_version 1.1;
        proxy_set_header        Host            $host;
        proxy_set_header        X-Real-IP       $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    }

gzip on;
gzip_comp_level 4;
gzip_types text/html text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;


}

How do I impliment this without messing up my preexisting configurations?

Best Answer

Added several lines could be.

map $http_accept $webp_suffix { "~*webp"  ".webp"; }
types { 
    # ensure the nginx supports the mime type
    image/webp webp;
}
location ~* \.(?:ico|cur|gif|svg|svgz|png|jpe?g)(\?.+)?$ {
    try_files $uri$webp_suffix $uri =404;
}

The following is the complete nginx conf:

upstream nodejs {
    server 127.0.0.1:8081;
    keepalive 256;
}
map $http_accept $webp_suffix { "~*webp"  ".webp"; }
types { 
    image/webp webp;
}
server {
    listen 8080;

    if ($time_iso8601 ~ "^(\d{4})-(\d{2})-(\d{2})T(\d{2})") {
        set $year $1;
        set $month $2;
        set $day $3;
        set $hour $4;
    }
    access_log /var/log/nginx/healthd/application.log.$year-$month-$day-$hour healthd;
    access_log  /var/log/nginx/access.log  main;

    location / {
        proxy_pass  http://nodejs;
        proxy_set_header   Connection "";
        proxy_http_version 1.1;
        proxy_set_header        Host            $host;
        proxy_set_header        X-Real-IP       $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location ~* \.(?:ico|cur|gif|svg|svgz|png|jpe?g)(\?.+)?$ {
        try_files $uri$webp_suffix $uri =404;
    }
gzip on;
gzip_comp_level 4;
gzip_types text/html text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

}
Related Topic