☰

Nginx - 当 Nginx 设置为反向代理时，有条件地提供 WebP

tag-icon • tag-icon nginx proxy reverse-proxy cache
Nginx - 当 Nginx 设置为反向代理时，有条件地提供 WebP

尝试在接受该 MIME 类型的浏览器中有条件地提供 WebP 图像。由于对 nginx 不太熟悉，我在将已知解决方案实施到现有默认主机配置中时遇到了问题。

我主要关心的是使用这个代码片段：

try_files $uri$webp_suffix $uri =404;

总的来说，我尝试使用下面的方法来实现 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;
    }
  }

从这里

但尝试找到一种方法将其与我现有的代理配置合并，结果却只得到错误。我现有的配置（Node.js 上的 AWS Elastic BeanStalk）似乎被反向代理到节点进程。

我现有的 nginx_proxy 文件：

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;


}

我该如何实现这一点而不弄乱我现有的配置？

答案1

加几行就可以了。

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

以下是完整的 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;

}

相关内容