网站静态文件（如图片、CSS、JS 文件）在用户首次访问后，如果能被浏览器缓存到本地，那么用户再次访问同一页面时，浏览器会直接读取本地缓存，而不会向服务器发送请求。这能显著减少服务器带宽消耗、降低CPU负载，同时提升页面加载速度。本教程将围绕 Nginx 服务器，详细讲解如何通过配置实现静态文件缓存时长的精准控制。
## 前置准备
1. **服务器环境**：一台已安装 Nginx 的 Linux 服务器（CentOS 7/8、Ubuntu 20.04/22.04 均可）。
2. **Nginx 版本**：建议使用 Nginx 1.18 及以上版本（低版本同样支持，但部分指令写法稍有差异）。
3. **访问权限**：拥有服务器 root 权限或 sudo 权限，能够编辑 Nginx 配置文件。
4. **静态文件路径**：明确你的网站静态文件存放位置，例如 `/var/www/html/static/` 或 `/usr/share/nginx/html/static/`。
5. **备份原配置**：操作前务必备份当前 Nginx 配置文件，防止配置错误导致网站无法访问。备份命令示例：`cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak`。
## 分步操作步骤
### 步骤 1：找到并打开 Nginx 配置文件
Nginx 的主配置文件通常位于 `/etc/nginx/nginx.conf`。如果你的网站配置是通过站点配置文件管理的（常见于 `/etc/nginx/sites-available/` 或 `/etc/nginx/conf.d/` 目录），则直接编辑对应的站点配置文件。
**操作细节：**
1. 使用 SSH 登录你的服务器。
2. 执行以下命令查看 Nginx 配置文件路径：
```bash
nginx -t
```
命令输出会显示配置文件的语法检查结果以及配置文件的具体路径，例如 `nginx: the configuration file /etc/nginx/nginx.conf syntax is ok`。
3. 使用文本编辑器打开配置文件，这里以 `vim` 为例：
```bash
sudo vim /etc/nginx/nginx.conf
```
如果使用 `nano`，则执行 `sudo nano /etc/nginx/nginx.conf`。
### 步骤 2：在 server 块或 location 块中配置缓存规则
缓存时长配置的核心是使用 `expires` 指令。你需要将配置添加到你网站对应的 `server` 块中，或者更精确地添加到处理静态文件的 `location` 块中。
**操作细节：**
1. 在配置文件中找到 `server` 块。通常结构如下：
```nginx
server {
listen 80;
server_name yourdomain.com;
root /var/www/html;
# ... 其他配置
}
```
2. 在 `server` 块内部，添加处理静态文件的 `location` 块。如果你希望为所有静态文件设置统一的缓存时长，可以直接在 `server` 块内添加一个通用的 `location` 规则。推荐的做法是针对不同类型的文件分别设置。
**示例 1：为图片、CSS、JS 文件设置 30 天缓存**
```nginx
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 30d;
add_header Cache-Control "public, immutable";
}
```
**解释：**
- `location ~* \.(jpg|jpeg|png|gif|ico|css|js)$`：这是一个正则匹配，`~*` 表示不区分大小写匹配。该规则会匹配所有以 `.jpg`、`.jpeg`、`.png`、`.gif`、`.ico`、`.css`、`.js` 结尾的请求。
- `expires 30d;`：设置缓存时长为 30 天。浏览器会在这 30 天内直接使用本地缓存，不会向服务器发送请求。
- `add_header Cache-Control "public, immutable";`：`public` 表示响应可以被任何中间缓存（如 CDN）缓存；`immutable` 是一个较新的指令，告诉浏览器在缓存有效期内，即使页面刷新也不要重新验证文件，直接使用缓存。这能进一步减少不必要的请求。
**示例 2：为字体文件设置 1 年缓存**
```nginx
location ~* \.(woff|woff2|ttf|otf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
```
**示例 3：为 HTML 文件设置短缓存（或不缓存）**
```nginx
location ~* \.html$ {
expires -1;
add_header Cache-Control "no-cache, must-revalidate";
}
```
**解释：** HTML 文件通常需要保持最新，因此设置 `expires -1` 表示立即过期，配合 `no-cache` 强制浏览器每次请求都向服务器验证文件是否更新。
### 步骤 3：验证并重载 Nginx 配置
配置修改后，必须检查语法是否正确，然后重新加载 Nginx 使配置生效。
**操作细节：**
1. 保存并退出编辑器（vim 中按 `Esc`，输入 `:wq` 回车；nano 中按 `Ctrl+X`，按 `Y`，回车）。
2. 执行语法检查命令：
```bash
sudo nginx -t
```
如果输出 `syntax is ok` 和 `test is successful`，则配置无误。
3. 如果语法检查失败，会提示错误行号和具体原因。根据提示回到配置文件修改错误，然后再次检查，直到成功。
4. 重新加载 Nginx 配置（不会中断服务）：
```bash
sudo systemctl reload nginx
```
或者使用旧版命令：
```bash
sudo nginx -s reload
```
### 步骤 4：验证缓存是否生效
配置完成后，需要通过浏览器开发者工具或命令行工具验证缓存头是否被正确设置。
**方法一：使用浏览器开发者工具**
1. 打开你的网站，按 `F12` 打开开发者工具。
2. 切换到 `Network`（网络）标签页。
3. 刷新页面（按 `F5` 或 `Ctrl+R`）。
4. 在请求列表中，点击一个静态文件（如 `style.css` 或 `logo.png`）。
5. 查看 `Response Headers`（响应头）部分，确认存在 `Cache-Control: public, immutable` 和 `Expires: ...`（显示具体过期时间）字段。
6. 再次刷新页面，观察该静态文件的 `Status` 列。如果显示 `200 (from disk cache)` 或 `200 (from memory cache)`，说明浏览器已成功缓存该文件，没有向服务器发起请求。
**方法二：使用 curl 命令**
在服务器本地或任意一台机器上执行：
```bash
curl -I https://yourdomain.com/static/style.css
```
输出结果中应包含类似以下内容：
```
HTTP/2 200
server: nginx/1.24.0
cache-control: public, immutable
expires: Thu, 20 Jun 2024 12:00:00 GMT
...
```
其中 `cache-control` 和 `expires` 字段的值应与你的配置一致。
## 常见问题
**问题 1：配置后网站静态文件加载失败，显示 404 或 403 错误**
- **原因**：`location` 块中的正则路径匹配错误，或者 `root` 指令指定的文件目录不正确，导致 Nginx 找不到文件。
- **解决**：检查 `location` 正则表达式是否准确，同时确认 `root` 或 `alias` 指令指向的路径确实存在且 Nginx 用户（通常是 `www-data` 或 `nginx`）有读取权限。可以使用 `ls -l` 查看文件权限。
**问题 2：修改了 CSS/JS 文件，但用户浏览器一直使用旧缓存，不更新**
- **原因**：`expires` 设置的时间过长（如 30 天），且没有使用版本号或文件指纹。
- **解决**：推荐做法是修改静态文件的 URL。例如，将 `style.css` 改为 `style.v2.css`，或者使用查询参数 `style.css?v=20231001`。在 Nginx 配置中，可以保持长缓存时间，但前端代码引用文件时必须带上版本标识。这样，当文件更新时，浏览器会请求新的 URL，从而获取最新文件。
**问题 3：配置后网站访问速度反而变慢，或者服务器负载未降低**
- **原因**：可能只配置了 `expires`，但没有配置 `add_header Cache-Control "public, immutable"`，导致部分浏览器（如某些旧版移动浏览器）不遵循 `Expires` 头。或者 `location` 规则没有覆盖所有静态文件类型。
- **解决**：确保同时设置了 `Cache-Control` 头，并检查你的网站是否还有其他未配置的文件类型（如 `.svg`、`.webp`、`.mp4` 等）。可以添加更全面的匹配规则，例如 `location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|webp|mp4|woff2?)$`。
**问题 4：使用了 CDN，但 Nginx 配置的缓存头没有生效**
- **原因**：CDN 节点可能会覆盖或忽略源服务器的 `Cache-Control` 头，具体取决于 CDN 的配置。
- **解决**：需要在 CDN 管理后台单独设置缓存规则。通常 CDN 会提供“缓存过期时间”或“缓存策略”设置项，将其设置为与 Nginx 配置一致或更长的时长。同时，确保 Nginx 返回的 `Cache-Control` 头中包含 `public` 指令，以允许 CDN 缓存。
## 收尾总结
通过本教程的操作，你已经在 Nginx 中成功为网站的静态文件设置了合理的缓存时长。核心要点是：在 `location` 块中使用 `expires` 指令指定缓存过期时间，并配合 `add_header Cache-Control "public, immutable"` 增强浏览器兼容性。对于不同文件类型（如图片、CSS/JS、字体、HTML）应设置不同的缓存策略：静态资源设置长缓存（如 30 天或 1 年），HTML 文件设置短缓存或不缓存。配置完成后，务必通过 `nginx -t` 检查语法，并通过浏览器开发者工具或 `curl` 验证响应头是否正确。这套配置能有效减少服务器约 60%-80% 的静态文件请求，显著降低服务器压力，同时提升用户访问体验。