给静态资源“打个包”，让浏览器少跑腿：Nginx 缓存配置避坑指南

一、为什么需要缓存？

想象一下你每天早上都要去楼下便利店买同一款面包。如果店员每次都让你重新排队、扫码、付款，是不是很烦？

浏览器也一样。当你访问一个网页，它会下载一堆文件：HTML、JavaScript、CSS、图片、字体……其中很多（比如带哈希名的 app.a1b2c3.js）一旦发布就永远不会变。如果每次打开都重新下载，不仅浪费流量，还拖慢速度。

这时候，我们就该对这些“稳定不变”的资源说一句：“你放我这儿一年，别老跑服务器拿！”

这就是HTTP 缓存的作用。

二、Nginx 里怎么“打包”缓存？

Nginx 提供了一个超简单的指令：expires。

expires 1y;  # y = year，一年后过期

加上这一行，Nginx 就会自动在响应头里加上：

Expires: Thu, 09 Mar 2027 12:00:00 GMT
Cache-Control: max-age=31536000

浏览器看到后就会乖乖把文件存起来，一年内不再请求服务器。

听起来很简单？但很多人一配就 404！

三、踩坑现场：缓存加了，页面却打不开了？

你可能这样写过：

# ❌ 危险写法！
location ~ \.js$ {
    expires 1y;
}

结果：.js 文件返回 404！

为什么？

因为这个 location 是“独立”的——它不知道你的 JS 文件到底放在哪个目录！
原本你可能是这样配路径的：

location /b/ {
    alias /data/static/b/;
}

但上面那个正则 location ~ \.js$ 并没有继承 /b/ 的 alias，于是 Nginx 茫然四顾：“我的 js 呢？” 最后只能返回 404。

这就像你告诉快递员：“帮我送一下牛奶。”
但他根本不知道你家地址在哪 😅

四、正确姿势：在“家门口”贴缓存标签

解决方法很简单：别单独建新门，就在原来的门口加个提示牌。

也就是说，在你已经配置好 root 或 alias 的 location 里面，再嵌套一个专门处理静态资源的小 location。

✅ 安全配置示例

server {
    listen 80;
    server_name your-site.com;

    # 根路径 → 目录 a
    location / {
        root /var/www/a;
        index index.html;

        # 在“家门口”给特定文件贴缓存标签
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }

    # /b/ → 目录 b
    location /b/ {
        alias /var/www/b/;

        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }

    # /c/ → 目录 c
    location /c/ {
        alias /var/www/c/;

        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
}

关键点解释：

外层 location：负责“找对地方”（通过 root 或 alias 定位文件）。
内层 location ~* ...：只管“贴缓存标签”，自动继承外层的路径上下文，所以不会 404。
~* 表示不区分大小写的正则匹配（比如 .JPG 也能命中）。
immutable 是个“高级提示”：告诉现代浏览器“这文件绝对不变，强制刷新也别重拉”。

五、小贴士：不是所有文件都能缓一年！

HTML 文件不要长期缓存！否则你更新了内容，用户可能看不到。
带哈希名的资源（如 main.abcd1234.js）才适合长期缓存。
如果你用的是前端构建工具（Vite、Webpack 等），通常已自动加哈希，放心缓存。

六、最后一步：验证是否生效

部署后，打开浏览器开发者工具 → Network → 点开一个 JS/CSS 文件，看响应头：

Cache-Control: public, immutable
Expires: Thu, 09 Mar 2027 12:00:00 GMT

如果有，恭喜你！用户下次访问会快如闪电 ⚡

结语

缓存是性能优化的“性价比之王”。
但就像给行李打包——东西要放对箱子，标签要贴对位置。
Nginx 的嵌套 location 就是那个帮你“既找对箱子，又贴好标签”的贴心助手。

下次再配缓存，记得：先保路径，再加缓存，404 自动退散！

📌 附：常用静态资源扩展名参考
js|css|png|jpg|jpeg|gif|ico|svg|webp|woff|woff2|ttf|eot|pdf|txt|map

希望这篇“生活化”的技术文能帮你避开坑、提效率！如果你觉得有用，欢迎分享给正在和 Nginx “斗智斗勇”的小伙伴～