如何使用NGINX缓存NextJS 10.0图像

Question

我们想使用NGINX启动NextJS 10应用程序，因此我们使用类似于以下的配置：

location /_next/static/ {
alias /home/ec2-user/my-app/.next/static/;
expires 1y;
access_log on;
}

它工作得很好，它缓存了一年的静态，但当我们使用NextJS图像时，我无法在动态调整大小的图像上添加expires标签。

如果我这样做：

location /_next/image/ {
alias /home/ec2-user/my-app/.next/image;
expires 1y;
access_log on;
}

它只是在图像上返回404。

这是我的服务器部分NGINX配置：

server {
listen 80;
server_name *.my-website.com;
# root        /usr/share/nginx/html;
# root /home/ec2-user/my-app;
charset     utf-8;
client_max_body_size    20M;
client_body_buffer_size 20M;
proxy_connect_timeout    600;
proxy_send_timeout       600;
proxy_read_timeout       600;
send_timeout             600;
underscores_in_headers on;
add_header X-Frame-Options SAMEORIGIN always;
add_header X-Content-Type-Options nosniff always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "same-origin" always;
location = /robots.txt {
proxy_pass https://api.my-website.com/robots.txt;
}
location /_next/static/ {
alias /home/ec2-user/my-app/.next/static/;
expires 1y;
access_log on;
}
location / {
# reverse proxy for merchant next server
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass_request_headers      on;
proxy_cache_bypass $http_upgrade;
proxy_buffering off;
}
}

Answer 1

以下是如何依靠上游Content-Type标头设置Expires和Cache-Control标头的示例：

map $upstream_http_content_type $expire {
~^image/    1y; # 'image/*' content type
default     off;
}
server {
...
location / {
# reverse proxy for merchant next server
proxy_pass http://localhost:3000;
...
expires $expire;
}
}

与您可以为任何其他内容类型的代理响应调整缓存控制标头的方式相同。这里描述了$upstream_http_<name>nginx变量。

更新

要仅通过特定的URI添加缓存控制头，可以使用两个链接的map块：

map $uri $expire_by_uri {
~^/_next/image/    1y;
default            off;
}
map $upstream_http_content_type $expire {
~^image/           $expire_by_uri;
default            off;
}

如果你对/_next/image/...URI中的图像没有任何期望，你可以使用

map $uri $expire {
~^/_next/image/    1y;
default            off;
}