Nginx - Servir WebP condicionalmente quando o nginx é configurado como proxy reverso

Question

Tentando veicular condicionalmente imagens de WebP em navegadores que aceitam esse tipo de mime. Não sendo muito familiarizado com o nginx, estou tendo problemas para implementar uma solução conhecida em minha configuração de host padrão existente.

Principalmente, estou preocupado em usar este snippet:

try_files $uri$webp_suffix $uri =404;

Na íntegra, estou tentando usar o método abaixo de implementar o 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;
    }
  }

aqui

Mas tentar encontrar uma maneira de mesclá-lo com a minha configuração de proxy existente está me levando apenas a erros. Minha configuração existente (AWS Elastic BeanStalk no Node.js) parece estar em proxy reverso para um processo de nó.

Meu arquivo nginx_proxy existente:

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;


}

Como faço para implantar isso sem atrapalhar minhas configurações preexistentes?

    

Answer 1

Adicionado várias linhas podem ser.

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;
}

O seguinte é o conf nginx completo:

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;

}