如何配置 Nginx 缓存静态文件以提高网站速度

嘿，朋友们！今天我们来聊一个能让你网站速度“biu”一下快起来的实用技巧：用 Nginx 给静态文件上个缓存。

为啥要这么干？你想想，用户每次打开你的网站，浏览器都得慢悠悠地加载图片、CSS 和 JS 文件。如果这些文件一成不变，为啥要每次都重新下载呢？让服务器或者浏览器“记”住它们，下次直接用，网站不就秒开了嘛！这不仅能极大提升用户体验，还能有效降低服务器的带宽压力。

废话不多说，咱们这就开整！

---

Part 1: Nginx 服务器端缓存 (Proxy Cache)

首先，咱们先从 Nginx 服务器这边下手。我们可以让 Nginx 扮演一个“缓存代理”的角色。当第一个用户请求静态文件时，Nginx 会从后端服务器把文件取过来，然后存一份在自己的“小金库”里。下一个用户再请求同样的文件，Nginx 就直接从小金库里拿给他，速度快得飞起！

第一步：配置缓存“小金库”

这个“小金库”需要我们先规划好。在 Nginx 的主配置文件 nginx.conf 的 http 模块里，加上这段配置：

# http 模块内
proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m use_temp_path=off;

代码解析：

• proxy_cache_path /path/to/cache: 这句话是告诉 Nginx，你的缓存小金库建在 /path/to/cache 这个目录下。你得确保这个目录存在，并且 Nginx 有权限读写。
• levels=1:2: 为了防止所有缓存文件都堆在一个文件夹里导致查找变慢，我们用 levels 来创建两级子目录。 Nginx 会根据缓存的 Key 自动把文件分散存储。
• keys_zone=my_cache:10m: 这可能是最重要的参数了。它在共享内存里开辟了一块叫做 my_cache 的空间，大小为 10MB，专门用来存放缓存文件的索引（key 和元数据）。 1MB 大约可以存 8000 个 key，10MB 足够应付绝大多数场景了。
• max_size=10g: 给小金库设个上限，这里是 10GB。当缓存文件大小达到这个值，Nginx 会自动清理掉最久没被访问过的文件（LRU 算法）。
• inactive=60m: 如果一个缓存文件在 60 分钟内都没人访问，Nginx 就会把它清理掉，不管它有没有过期。
• use_temp_path=off: 这是一个性能优化项，让 Nginx 直接在缓存目录里写文件，而不是先写在一个临时目录再移过去，避免了不必要的磁盘 I/O。

第二步：启用缓存

规划好了小金库，接下来就要在你的网站配置里告诉 Nginx 何时使用它。找到你的 server 配置块，在处理静态文件的 location 里加上几行：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://your_backend_server; # 你的后端应用
        # ... 其他配置
    }

    # 针对静态资源的 location
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        proxy_cache my_cache; # 启用缓存，名字要和 keys_zone 里的一致
        proxy_pass http://your_backend_server; # 同样指向后端
        proxy_cache_valid 200 304 12h; # 对状态码为 200 和 304 的响应缓存 12 小时
        proxy_cache_valid any 1m;      # 其他状态码缓存 1 分钟，防止缓存错误页面
        
        # 添加一个自定义响应头，方便我们查看缓存是否命中
        add_header X-Cache-Status $upstream_cache_status;
    }
}

代码解析：

• proxy_cache my_cache: 启动缓存功能，并指定使用我们刚刚定义的名为 my_cache 的缓存空间。
• proxy_cache_valid 200 304 12h: 这是设置缓存时间的规则。对于成功的请求（状态码 200）和未修改的请求（304），我们让它缓存 12 小时。
• add_header X-Cache-Status $upstream_cache_status: 这是一个超级有用的调试工具！它会在响应头里加上一个 X-Cache-Status 字段，让你清楚地知道这次请求是 HIT (命中缓存)、MISS (未命中) 还是 EXPIRED (缓存过期) 等。

配置完后，记得 nginx -t 检查一下语法，然后 nginx -s reload 重启服务。现在，用浏览器的开发者工具看看静态文件的响应头，是不是多了一个 X-Cache-Status？第一次访问应该是 MISS，再刷新一次就变成 HIT 啦！

---

Part 2: 客户端缓存 (浏览器缓存)

服务器端缓存搞定了，但我们还能更进一步！让用户的浏览器也参与进来，把文件直接缓存在用户自己的电脑上。这样，用户再次访问时，连请求都不用发给 Nginx，直接从本地读取，那才叫风驰电掣！

这就需要用到 expires 指令了，它会告诉浏览器这个文件可以缓存多久。

配置案例

我们继续修改上面的 location 配置块：

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    # 服务器缓存部分（保留）
    proxy_cache my_cache;
    proxy_pass http://your_backend_server;
    proxy_cache_valid 200 304 12h;
    proxy_cache_valid any 1m;
    add_header X-Cache-Status $upstream_cache_status;

    # 新增浏览器缓存配置
    expires 30d; # 告诉浏览器，把这些文件缓存 30 天
    add_header Cache-Control "public"; # 确认这些内容可以被公开缓存
}

代码解析：

• expires 30d: 这条指令会生成两个 HTTP 响应头：Expires 和 Cache-Control。 Cache-Control: max-age=2592000 (30天的秒数) 会告诉现代浏览器缓存30天，而 Expires 是一个具体的过期日期，用来兼容一些老旧的 HTTP/1.0 客户端。
• add_header Cache-Control "public": 这是一个好习惯，明确告诉浏览器和中间代理，这个资源是公开的，可以大胆缓存。

这样一来，我们就实现了“双重缓存”：Nginx 服务器存一份，用户浏览器也存一份，性能直接拉满！

---

完整案例：一个真实网站的 Nginx 缓存配置

下面是一个比较完整的配置示例，整合了我们上面聊到的所有知识点。你可以把它作为模板，根据自己的需求修改。

# /etc/nginx/nginx.conf

# http 模块
http {
    # ... 其他 http 配置，如 aio, sendfile on 等 ...

    # 1. 定义缓存路径和规则
    proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=static_cache:100m inactive=7d max_size=10g;

    server {
        listen 80;
        server_name example.com;
        
        # 动态请求，不缓存，直接转发给后端
        location / {
            proxy_pass http://127.0.0.1:8080;
            # ... 其他反向代理配置 ...
        }

        # 2. 针对不常变化的图片、音视频等资源进行缓存
        location ~* \.(?:jpg|jpeg|gif|png|ico|svg|webp|mp4|webm|ogg)$ {
            proxy_cache static_cache;             # 使用名为 static_cache 的缓存
            proxy_cache_valid 200 304 7d;         # 缓存7天
            proxy_cache_key $scheme$proxy_host$uri$is_args$args; # 定义缓存的key
            
            # 如果后端服务挂了，允许返回过期的缓存
            proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
            
            proxy_pass http://127.0.0.1:8080;
            
            # 浏览器缓存配置
            expires 365d;
            add_header Cache-Control "public";
            
            # 添加缓存状态头
            add_header X-Cache-Status $upstream_cache_status;
        }

        # 3. 针对可能经常更新的 CSS 和 JS 文件
        location ~* \.(?:css|js)$ {
            proxy_cache static_cache;
            proxy_cache_valid 200 304 12h;       # 缓存12小时
            proxy_cache_key $scheme$proxy_host$uri$is_args$args;
            proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;

            proxy_pass http://127.0.0.1:8080;
            
            # 浏览器缓存配置
            expires 1d;
            add_header Cache-Control "public";
            
            # 添加缓存状态头
            add_header X-Cache-Status $upstream_cache_status;
        }
    }
}

总结

搞定！通过上面简单的几步配置，我们就为网站的静态资源开启了 Nginx 服务器缓存和浏览器缓存的双重加速。回顾一下重点：

1. proxy_cache_path: 在 http 块中定义你的缓存空间。
2. proxy_cache: 在 location 块中启用指定的缓存空间。
3. proxy_cache_valid: 设置不同响应码的服务器缓存时间。
4. expires: 为静态文件设置浏览器缓存时间。
5. add_header X-Cache-Status: 你的缓存调试利器，一定要加上！

希望这篇文章能帮你轻松掌握 Nginx 静态文件缓存的配置。赶紧动手试试，让你的网站也飞起来吧！