使用 nginx 有条件地为 Laravel 提供 WEBP 服务

Question

我无法在我的 Ubuntu 服务器上将 jpeg 或 png 图像提供给 webp。

请求：

Request URL: https://staging.myserver.com/images/mainfoto.jpg 
Request Method: GET

答案是：

accept-ranges: bytes
content-length: 304152
content-type: image/jpeg
date: Mon, 07 Oct 2019 17:33:14 GMT
etag: "5d9a2b60-4a418"
last-modified: Sun, 06 Oct 2019 17:58:56 GMT
server: nginx/1.14.0 (Ubuntu)
status: 200
vary: Accept

在sudo nano /etc/nginx/nginx.conf

http {
...
include /etc/nginx/mime.types; #I checked the webp is included
...
    map $http_accept $webp_suffix {
       default "";
       "~*webp" ".webp";
    }
...
}

然后在我的sudo nano /etc/nginx/sites-available/staging.myserver.com

# Checking if there's a WebP version for the requested image ..
location ~* ^.+\.(jpe?g|png)$ {
   add_header Vary Accept;
   # and if so, serving it
   try_files $1$webp_suffix $uri =404;
}

最后完成的是：

sudo nginx -t
sudo systemctl reload nginx

并通过硬重新加载删除了浏览器缓存

有什么想法我可以做什么吗？

---

完整的服务器配置文件在这里：

server {
    server_name staging.myserver.com;
    root /var/www/myserver-staging/current/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;

        auth_basic "Staff Only";
        auth_basic_user_file "/var/www/myserver/.htpasswd";
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }
    # Checking if there's a WebP version for the requested image ..
    location ~* ^.+\.(jpe?g|png)$ {
       add_header Vary Accept;
       # and if so, serving it
       try_files $1$webp_suffix $uri =404;
    }
    location ~ /\.(?!well-known).* {
        deny all;
    }
   listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/staging.myserver.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/staging.myserver.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
    if ($host = staging.myserver.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    server_name staging.myserver.com;



    listen 80;
    return 404; # managed by Certbot


}

Answer 1

根据您问题下方的评论，最初的问题是您的代码捕获了所请求图像的文件扩展名，并搜索了文件名由文件扩展名和尾随的 webp 后缀组成的文件，例如jpg.webp。

--

关于如何提供image.webp或image.jpg等：

填充所需的变量：

# Check if client is capable of handling webp
map $http_accept $webp_suffix {
       default "";
       "~*webp" ".webp";
}

# Capture image path, without the file extension
map $uri $image {
       ~*^/(images)/(.+)\.(jpe?g|png)$  /$1/$2;
}

...并在以下位置使用这些：

location /images {
       add_header Vary Accept;
       try_files $image$webp_suffix $uri =404;
}