：Nginx设置了反向代理时如何开启缓存网站的图片/CSS/JS文件和注意事项

这是我的完整代码，启用后网站的“jpg|jpeg|png|gif|ico|css|js”文件全部都无法显示，请帮忙看看问题出在哪：

# 代理站点
server {
	listen 80;
	server_name oa22.cn *.oa22.cn; # 匹配所有二级域名
	
	# 缓存静态文件
	location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
		expires 30d; # 设置文件在客户端缓存30天
		add_header Cache-Control "public";
		access_log off; # 可选，关闭访问日志以减少日志文件大小
	}
	
	location / {
		proxy_pass http://172.16.11.154:80;  # 内部Web服务器地址
		proxy_http_version 1.1;
		proxy_connect_timeout 360s;          # 若后端启动慢，可适当延长
		proxy_read_timeout 360s;             # 后端响应超时时间
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;  # 传递客户端真实IP
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 追加IP到XFF头部
	}
}

​

根据您提供完整的配置代码，现在我看到了问题的关键所在。您的配置确实存在一个逻辑问题。

问题分析

您的配置中存在两个 location 块：

1. location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ - 用于处理图片请求

2. location / - 用于处理所有其他请求并代理到后端服务器

问题在于：当Nginx收到一个图片请求（如 /images/logo.png）时，它会匹配到第一个 location 块（图片处理块），但在这个块中，您没有指定如何处理这些请求 - 没有 proxy_pass，也没有 root 指令。因此，Nginx不知道从哪里获取这些图片文件，导致请求无法被正确处理。

解决方案

您有两个选择来解决这个问题：

方案一：在图片 location 块中也添加代理指令（推荐）

这是最简单直接的解决方案，确保图片请求也能被代理到后端服务器。

server {
    listen 80;
    server_name oa22.cn *.oa22.cn;
    
    # 缓存静态文件
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        # 添加代理指令
        proxy_pass http://172.16.11.154:80;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # 缓存设置
        expires 30d;
        add_header Cache-Control "public";
        access_log off;
    }
    
    location / {
        proxy_pass http://172.16.11.154:80;
        proxy_http_version 1.1;
        proxy_connect_timeout 360s;
        proxy_read_timeout 360s;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

方案二：使用 try_files 尝试代理或提供本地文件

如果您希望Nginx首先尝试从本地提供静态文件（如果存在），否则代理到后端，可以使用这种方法：

server {
    listen 80;
    server_name oa22.cn *.oa22.cn;
    
    # 设置根目录（用于本地静态文件）
    root /path/to/your/static/files;
    
    # 缓存静态文件
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        # 先尝试提供本地文件，如果没有则代理到后端
        try_files $uri @proxy;
        
        # 缓存设置
        expires 30d;
        add_header Cache-Control "public";
        access_log off;
    }
    
    location @proxy {
        proxy_pass http://172.16.11.154:80;
        proxy_http_version 1.1;
        proxy_connect_timeout 360s;
        proxy_read_timeout 360s;
        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 / {
        proxy_pass http://172.16.11.154:80;
        proxy_http_version 1.1;
        proxy_connect_timeout 360s;
        proxy_read_timeout 360s;
        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 块中添加 proxy_pass 和相关代理头设置即可。

修改后的完整配置

server {
    listen 80;
    server_name oa22.cn *.oa22.cn;
    
    # 缓存静态文件
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        proxy_pass http://172.16.11.154:80;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        expires 30d;
        add_header Cache-Control "public";
        access_log off;
    }
    
    location / {
        proxy_pass http://172.16.11.154:80;
        proxy_http_version 1.1;
        proxy_connect_timeout 360s;
        proxy_read_timeout 360s;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

测试和重载配置

修改后，请执行以下命令：

# 测试配置语法
sudo nginx -t


# 重载配置
sudo systemctl reload nginx

现在，图片请求应该能够正常代理到后端服务器，并且响应头中会包含缓存指令。