我正在执行一些 WPO 任务,所以 PageSpeed 建议我利用浏览器缓存。我已经成功地改进了我的 Nginx 服务器中的一些静态文件,但是我存储在 Amazon S3 服务器中的图像文件仍然丢失。
我已经阅读了一种关于更新 S3 中的每个文件以包含一些标头元标记(过期和缓存控制)的方法。我认为这不是一个好方法。我有数千个文件,所以这对我来说是不可行的。
我认为最方便的方法是配置我的 Nginx 1.6.0 服务器来代理 S3 文件。我已经读过这方面的内容,但我对服务器配置一点也不熟练,所以我从这些网站上得到了几个例子:https://gist.github.com/benjaminbarbe/1961db5ffbaad57eff12
我在我的 nginx 配置文件的服务器块中添加了这个位置代码:
#inside server block
location /mybucket.s3.amazonaws.com/ {
proxy_http_version 1.1;
proxy_set_header Host mybucket.s3.amazonaws.com;
proxy_set_header Authorization '';
proxy_hide_header x-amz-id-2;
proxy_hide_header x-amz-request-id;
proxy_hide_header Set-Cookie;
proxy_ignore_headers "Set-Cookie";
proxy_buffering off;
proxy_intercept_errors on;
proxy_pass http://mybucket.s3.amazonaws.com;
}
当然,这对我不起作用。我的请求中不包含任何标头。所以,首先我认为请求与位置不匹配。
Accept-Ranges:bytes
Content-Length:90810
Content-Type:image/jpeg
Date:Fri, 23 Jun 2017 04:53:56 GMT
ETag:"4fd0be549fbcaf9b47c18a15146cdf16"
Last-Modified:Tue, 09 Jun 2015 09:47:13 GMT
Server:AmazonS3
x-amz-id-2:cKsq1qRra74DqVsTewh3P3sgzVUoPR8aAT2NFCuwA+JjCdDZfk7/7x/C0WPjBa51GEb4C8LyAIc=
x-amz-request-id:94EADB4EDD3DE1C1
proxy_hide_header
指令将被忽略,默认情况下 nginx 应该已清除 Server:
。那么......你确定这个请求实际上是由 Nginx 处理的吗?
您通过 Nginx 代理 S3 文件的方法很有意义。它解决了许多问题,并带来了额外的好处,例如屏蔽 URL、代理缓存、通过卸载 SSL/TLS 加速传输。你做的几乎是对的,让我展示一下如何让它变得完美。
对于示例查询,我使用 S3 存储桶和原始问题的公共评论中提到的图像 URL。
我们首先检查 Amazon S3 文件的标头
curl -I http://yanpy.dev.s3.amazonaws.com/img/blog/sailing-routes-around-croatia-central-dalmatia-islands/yachts-anchored-paradise-cove-croatia-3.jpg
HTTP/1.1 200 OK
Date: Sun, 25 Jun 2017 17:49:10 GMT
Last-Modified: Wed, 21 Jun 2017 07:42:31 GMT
ETag: "37a907fc5dd7cfd0c428af78f09e95a9"
Expires: Fri, 21 Jul 2018 07:41:49 UTC
Accept-Ranges: bytes
Content-Type: binary/octet-stream
Content-Length: 378843
Server: AmazonS3
我们可以看到缺少 Cache-Control 但已经配置了条件 GET 标头。当我们重用 E-Tag/Last-Modified(这就是浏览器客户端缓存的工作方式)时,我们会得到 HTTP 304 以及空的 Content-Length。对此的解释是客户端(在我们的例子中是 curl)查询资源说不需要数据传输,除非在服务器上修改了文件:
curl -I http://yanpy.dev.s3.amazonaws.com/img/blog/sailing-routes-around-croatia-central-dalmatia-islands/yachts-anchored-paradise-cove-croatia-3.jpg
--header "If-None-Match: 37a907fc5dd7cfd0c428af78f09e95a9"
HTTP/1.1 304 Not Modified
Date: Sun, 25 Jun 2017 17:53:33 GMT
Last-Modified: Wed, 21 Jun 2017 07:42:31 GMT
ETag: "37a907fc5dd7cfd0c428af78f09e95a9"
Expires: Fri, 21 Jul 2018 07:41:49 UTC
Server: AmazonS3
curl -I http://yanpy.dev.s3.amazonaws.com/img/blog/sailing-routes-around-croatia-central-dalmatia-islands/yachts-anchored-paradise-cove-croatia-3.jpg
--header "If-Modified-Since: Wed, 21 Jun 2017 07:42:31 GMT"
HTTP/1.1 304 Not Modified
Date: Sun, 25 Jun 2017 18:17:34 GMT
Last-Modified: Wed, 21 Jun 2017 07:42:31 GMT
ETag: "37a907fc5dd7cfd0c428af78f09e95a9"
Expires: Fri, 21 Jul 2018 07:41:49 UTC
Server: AmazonS3
“PageSpeed 建议利用浏览器缓存”,这意味着缺少 Cache=control。 Nginx 作为 S3 文件的代理不仅解决了缺少标头的问题,而且还使用 Nginx 代理缓存节省了流量。
我使用 macOS,但 Nginx 配置在 Linux 上的工作方式完全相同,无需修改。一步步:
1.安装Nginx
brew update && brew install nginx
2.设置Nginx代理S3存储桶,见下方配置
3.通过 Nginx 请求文件。请看一下 Server 标头,我们现在看到的是 Nginx 而不是 Amazon S3:
curl -I http://localhost:8080/s3/img/blog/sailing-routes-around-croatia-central-dalmatia-islands/yachts-anchored-paradise-cove-croatia-3.jpg
HTTP/1.1 200 OK
Server: nginx/1.12.0
Date: Sun, 25 Jun 2017 18:30:26 GMT
Content-Type: binary/octet-stream
Content-Length: 378843
Connection: keep-alive
Last-Modified: Wed, 21 Jun 2017 07:42:31 GMT
ETag: "37a907fc5dd7cfd0c428af78f09e95a9"
Expires: Fri, 21 Jul 2018 07:41:49 UTC
Accept-Ranges: bytes
Cache-Control: max-age=31536000
https://i.stack.imgur.com/TQ6w8.png
4.使用带有条件GET的Nginx代理请求文件:
curl -I http://localhost:8080/s3/img/blog/sailing-routes-around-croatia-central-dalmatia-islands/yachts-anchored-paradise-cove-croatia-3.jpg
--header "If-None-Match: 37a907fc5dd7cfd0c428af78f09e95a9"
HTTP/1.1 304 Not Modified
Server: nginx/1.12.0
Date: Sun, 25 Jun 2017 18:32:16 GMT
Connection: keep-alive
Last-Modified: Wed, 21 Jun 2017 07:42:31 GMT
ETag: "37a907fc5dd7cfd0c428af78f09e95a9"
Expires: Fri, 21 Jul 2018 07:41:49 UTC
Cache-Control: max-age=31536000
https://i.stack.imgur.com/U0kFC.png
5.使用 Nginx 代理缓存请求文件,请看 X-Cache-Status 头,它的值是 MISS 直到缓存在第一次请求后预热
curl -I http://localhost:8080/s3_cached/img/blog/sailing-routes-around-croatia-central-dalmatia-islands/yachts-anchored-paradise-cove-croatia-3.jpg
HTTP/1.1 200 OK
Server: nginx/1.12.0
Date: Sun, 25 Jun 2017 18:40:45 GMT
Content-Type: binary/octet-stream
Content-Length: 378843
Connection: keep-alive
Last-Modified: Wed, 21 Jun 2017 07:42:31 GMT
ETag: "37a907fc5dd7cfd0c428af78f09e95a9"
Expires: Fri, 21 Jul 2018 07:41:49 UTC
Cache-Control: max-age=31536000
X-Cache-Status: HIT
Accept-Ranges: bytes
https://i.stack.imgur.com/C69fH.png
基于 Nginx official documentation,我为 Nginx S3 配置提供了优化的缓存设置,支持以下选项:
proxy_cache_revalidate 指示 NGINX 在从源服务器刷新内容时使用条件 GET 请求
proxy_cache_use_stale 指令的更新参数指示 NGINX 在从源服务器下载更新时客户端请求项目时传递陈旧内容,而不是将重复请求转发到服务器
启用 proxy_cache_lock 后,如果多个客户端请求缓存中不是当前的文件(MISS),则仅允许这些请求中的第一个通过原始服务器
Nginx 配置:
worker_processes 1;
daemon off;
error_log /dev/stdout info;
pid /usr/local/var/nginx/nginx.pid;
events {
worker_connections 1024;
}
http {
default_type text/html;
access_log /dev/stdout;
sendfile on;
keepalive_timeout 65;
proxy_cache_path /tmp/ levels=1:2 keys_zone=s3_cache:10m max_size=500m
inactive=60m use_temp_path=off;
server {
listen 8080;
location /s3/ {
proxy_http_version 1.1;
proxy_set_header Connection "";
proxy_set_header Authorization '';
proxy_set_header Host yanpy.dev.s3.amazonaws.com;
proxy_hide_header x-amz-id-2;
proxy_hide_header x-amz-request-id;
proxy_hide_header x-amz-meta-server-side-encryption;
proxy_hide_header x-amz-server-side-encryption;
proxy_hide_header Set-Cookie;
proxy_ignore_headers Set-Cookie;
proxy_intercept_errors on;
add_header Cache-Control max-age=31536000;
proxy_pass http://yanpy.dev.s3.amazonaws.com/;
}
location /s3_cached/ {
proxy_cache s3_cache;
proxy_http_version 1.1;
proxy_set_header Connection "";
proxy_set_header Authorization '';
proxy_set_header Host yanpy.dev.s3.amazonaws.com;
proxy_hide_header x-amz-id-2;
proxy_hide_header x-amz-request-id;
proxy_hide_header x-amz-meta-server-side-encryption;
proxy_hide_header x-amz-server-side-encryption;
proxy_hide_header Set-Cookie;
proxy_ignore_headers Set-Cookie;
proxy_cache_revalidate on;
proxy_intercept_errors on;
proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
proxy_cache_lock on;
proxy_cache_valid 200 304 60m;
add_header Cache-Control max-age=31536000;
add_header X-Cache-Status $upstream_cache_status;
proxy_pass http://yanpy.dev.s3.amazonaws.com/;
}
}
}
如果不详细说明 Nginx 编译时使用的模块,我们可以说两种方法将 Expires 和 Cache-Control 头添加到所有文件。
Nginx S3 代理
这就是您所问的——使用 Nginx 在 S3 文件上添加过期、缓存控制标头。
Nginx this set-misc-nginx-module needed 支持 Nginx S3 代理 &动态更改/添加过期,缓存控制。 This is a standard full guide 从编译到使用,这是 great guide for nginx-extras for Ubuntu server。这是full guide with example with WordPress。
有更多的 S3 模块可以做额外的事情。如果没有这些模块,Nginx 将无法理解并且配置测试(nginx -t
)将通过错误配置的测试。 set-misc-nginx-module
是您需要的最小值。您想要的有 better example on this Github gist。
由于并非所有文件都用于编译并且设置确实有点困难,因此我还在编写为一个 Amazon S3 存储桶中的所有文件设置 Expires 和 Cache-Control 标头的方法。
Amazon S3 存储桶过期和缓存控制标头
此外,可以使用脚本或命令行为一个 AWS S3 存储桶中的所有对象设置 Expires 和 Cache-Control 标头。 Github like this one、bucket explorer、Amazon's tool、Amazon's this doc 和 this doc 上有几个这样的免费库和脚本。该 cp CLI 工具的命令将如下所示:
aws s3 cp s3://mybucket/ s3://mybucket/ --recursive --metadata-directive REPLACE \
--expires 2027-09-01T00:00:00Z --acl public-read --cache-control max-age=2000000,public
从架构审查来看,您尝试做的是错误的做法:
Amazon S3 可能被优化为高度可用的缓存;通过在其上引入手动代理层,您只会引入不必要的额外延迟和巨大的故障点,并且还会失去 S3 带来的所有好处
您对文件数量的性能分析不正确。如果您在 S3 上有数千个文件,正确的解决方案是编写一次性脚本来更改 S3 上的必要属性,而不是手动滚动您不完全理解的代理机制,然后执行多次(令人作呕)。进行代理可能是一种创可贴,实际上,可能会降低性能,而不是提高性能(即使您有一个无状态的自动化工具会告诉您其他情况)。更不用说这也是不必要的资源消耗,并且可能会导致实际的性能问题和 heisenbugs。
也就是说,如果您仍然希望通过添加标头进行代理,那么使用 nginx 执行此操作的正确方法是使用 expires
指令。
例如,您可以在适当的位置将 expires max;
放在 proxy_pass
指令之前或之后。
expires
指令也会自动为您设置正确的 Cache-Control
标头;但如果您希望手动添加任何自定义响应标头,也可以使用 add_header
指令。
不定期副业成功案例分享
proxy_cache_valid 200 60m;
时它仍然会产生“MISS”缓存,希望它对某人有所帮助。proxy_cache_valid 200 60m;
它开始命中。我相信它可能与 NginX 版本有关。我的是 1.6.0 谢谢@Anatoly 和@OlegMykolaichenko!