Nginx 面试通关秘籍-8.在 Nginx 中，如何配置静态文件的缓存?

在网站的运行中，静态文件如图片、CSS 文件、JavaScript 文件等占据了很大一部分网络资源的传输。通过在 Nginx 中合理配置静态文件的缓存，可以极大地提高网站的访问速度和性能，同时也能减轻服务器的负载。

一、为什么要配置静态文件缓存

当用户访问一个网站时，浏览器需要下载各种资源来完整地展示页面。如果每次都从服务器重新获取这些静态文件，会浪费大量的时间和网络带宽，特别是对于一些大尺寸的图片或者复杂的 JavaScript 库。而通过设置缓存，一旦用户第一次访问并下载了这些文件，在一定时间内再次访问时，浏览器就可以直接从本地缓存中读取，无需再次向服务器请求，从而实现快速加载页面。

例如，一个电商网站有大量的产品图片和样式文件。如果没有缓存，每次用户浏览不同的产品页面时，都要重新下载这些静态资源，这不仅会让用户等待时间变长，还会给服务器带来巨大的压力。而有了缓存，用户在短时间内再次访问类似页面时，就可以瞬间加载出这些已经缓存过的资源。

二、Nginx 配置静态文件缓存的详细步骤

1. 打开 Nginx 配置文件

Nginx 的主要配置文件通常位于 /etc/nginx/nginx.conf。使用你喜欢的文本编辑器打开这个文件。

2. 设置缓存目录和参数

在 http 块内添加以下配置来定义缓存的存储路径和相关参数：

   proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_static_cache:10m max_size=10g inactive=60m use_temp_path=off;

• 解释一下这些参数的含义：

/var/cache/nginx：这是指定用于存储缓存文件的目录路径。确保 Nginx 进程对这个目录有读写权限。

levels=1:2：设置缓存目录的层次结构。这里表示创建两级子目录来存储缓存文件，这样可以更好地管理大量的缓存文件。

keys_zone=my_static_cache:10m：创建一个名为 my_static_cache 的缓存区域，并分配 10MB 的内存用于存储缓存的元数据信息，如缓存的键值、过期时间等。

max_size=10g：设置整个缓存空间的最大大小为 10GB。当缓存文件的总大小超过这个限制时，Nginx 会根据一定的算法自动清除一些旧的缓存文件，以保证缓存空间不会无限增长。

inactive=60m：如果一个缓存文件在 60 分钟内没有被访问，那么 Nginx 会将其从缓存中清除，释放空间。

3. 配置静态文件的缓存规则

在 server 块内（通常是用于你的网站的那个 server 配置部分），添加以下内容来配置静态文件的缓存：

   location ~* \.(jpg|jpeg|png|gif|css|js|svg|woff|woff2|ttf|eot)$ {
       proxy_cache my_static_cache;
       proxy_cache_valid 200 302 1h;
       proxy_cache_valid 404 1m;
       add_header X-Cache-Status $upstream_cache_status;
       expires 7d;
   }

• 详细解释一下这些配置项：

location ~* \.(jpg|jpeg|png|gif|css|js|svg|woff|woff2|ttf|eot)$：使用正则表达式匹配所有以指定的文件扩展名结尾的文件路径，这些扩展名包括常见的图片格式、CSS 和 JavaScript 文件格式以及一些字体相关的文件格式。这意味着我们只对这些类型的静态文件进行缓存配置。

proxy_cache my_static_cache：指定使用前面定义的 my_static_cache 缓存区域来存储这些静态文件的缓存。

proxy_cache_valid 200 302 1h：对于 HTTP 状态码为 200（表示成功响应）和 302（表示临时重定向）的请求，将缓存时间设置为 1 小时。在这 1 小时内，如果有相同的请求，Nginx 会直接从缓存中返回文件，而不会向服务器请求。

proxy_cache_valid 404 1m：对于状态码为 404（表示未找到文件）的请求，将缓存时间设置为 1 分钟。这样即使某个文件不存在，Nginx 也会在 1 分钟内记住这个结果，避免频繁地向服务器发送不存在的文件请求。

add_header X-Cache-Status $upstream_cache_status：在响应头中添加一个自定义的 X-Cache-Status 字段，其值为 $upstream_cache_status 变量的值。这个变量表示缓存的状态，例如 HIT 表示命中缓存，MISS 表示未命中缓存等。这样在开发和调试过程中，我们可以通过查看这个响应头来了解缓存的使用情况。

expires 7d：设置浏览器端对这些静态文件的缓存过期时间为 7 天。这意味着在 7 天内，浏览器如果再次访问这些文件，会直接从本地缓存中获取，而不会向服务器发送请求（除非用户强制刷新或者缓存过期）。

4. 重启 Nginx保存配置文件后，需要重新启动 Nginx 使配置生效。在大多数 Linux 系统中，可以使用以下命令重启 Nginx：

   sudo systemctl restart nginx

三、Nginx 配置静态文件缓存的完整代码示例

以下是一个完整的 Nginx 配置文件示例，包含了静态文件缓存的配置：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    # 定义缓存参数和存储路径
    proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_static_cache:10m max_size=10g inactive=60m use_temp_path=off;

    # 包含 MIME 类型定义文件
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    # tcp_nopush     on;

    # 保持连接的超时时间
    keepalive_timeout  65;

    # 服务器配置
    server {
        listen       80;
        server_name  your_domain.com;  # 替换为你的实际域名

        # 处理静态文件的缓存
        location ~* \.(jpg|jpeg|png|gif|css|js|svg|woff|woff2|ttf|eot)$ {
            proxy_cache my_static_cache;
            proxy_cache_valid 200 302 1h;
            proxy_cache_valid 404 1m;
            add_header X-Cache-Status $upstream_cache_status;
            expires 7d;
        }

        # 处理动态请求或者其他未匹配的请求（这里只是一个示例的默认请求处理，可以根据实际情况修改）
        location / {
            root   /var/www/html;  # 替换为你的网站根目录路径
            index  index.html;
        }
    }
}

在这个示例中：

• worker_processes 和 worker_connections 用于设置 Nginx 的工作进程和连接数等基本参数。
• proxy_cache_path 定义了缓存的详细参数和存储路径。
• location 块针对不同的文件扩展名设置了缓存规则和响应头添加等操作。
• server 块中的 listen 和 server_name 定义了服务器监听的端口和域名。
• location / 中的 root 和 index 定义了网站的根目录和默认首页文件。

请注意：

1. 根据你的实际环境，替换 your_domain.com 为你的真实域名，/var/www/html 为你的实际网站根目录路径。
2. 确保 /var/cache/nginx 目录存在且 Nginx 进程有足够的权限进行读写操作。
3. 定期检查缓存的使用情况和缓存目录的大小，根据实际需求调整缓存参数和清理过期的缓存文件。

通过以上步骤和配置示例，你可以在 Nginx 中成功地配置静态文件的缓存，提高网站的性能和用户体验。

上一篇：Nginx 面试通关秘籍-7.什么是 WebSocket及 Nginx 中配置 代理

下一篇：Nginx 面试通关秘籍-9.在 Nginx 中如何实现动静分离及其原理。