使用 Nginx 缓存静态资源加速 Web 服务

介绍

本文将介绍如何使用 Nginx 的缓存功能来加速 Web 服务中的静态资源响应速度，提升用户体验。

为什么需要nginx缓存静态资源

web服务中的静态资源响应很慢,经常超过10s整个页面才渲染完毕,服务器也配置足够,带宽也提了,最后尝试在nginx中做静态文件的缓存后效果出奇的好,2.1M的静态资源1s内肯定返回. 应该是nginx把静态文件放到了内存中,不需要每次访问都读取硬盘了.

使用 Nginx 缓存静态资源

接下来，需要在Nginx配置文件中添加缓存配置。打开Nginx配置文件，找到http块，在其中添加如下代码：

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m inactive=60m;

上述代码中，/var/cache/nginx表示缓存文件保存的路径，my_cache是缓存区域的名称，10m表示缓存区域的大小，60m表示缓存文件的过期时间。根据实际情况进行修改。

在Nginx配置文件中找到server块，添加如下代码：

location / {
    if ($request_uri ~* '\.{2,}') {
        return 403;
    }
    root /dist;
    index  index.html index.htm;
    expires 30d;
    add_header Cache-Control "public, immutable";
    proxy_cache_key "$scheme$request_method$host$request_uri";
    proxy_cache_valid 200 30d;
    proxy_cache_bypass $http_pragma;
    proxy_cache_revalidate on;
    proxy_cache my_cache;
    try_files $uri $uri/ /index.html?s=$uri;
}

上述代码中，location /表示缓存所有的静态资源文件，root /dist表示静态资源文件的根目录，expires 30d表示缓存文件的过期时间为30天，add_header Cache-Control "public, immutable"表示缓存文件的响应头中添加Cache-Control字段，proxy_cache_key "$scheme$request_method$host$request_uri"表示缓存文件的key值，proxy_cache_valid 200 30d表示缓存状态码为200的响应结果，proxy_cache_bypass $http_pragma表示跳过缓存的请求头为Pragma的请求，proxy_cache_revalidate on表示每次请求都会检查缓存是否过期，proxy_cache my_cache表示使用之前定义的缓存区域，try_files $uri $uri/ /index.html?s=$uri表示先查找静态资源文件，如果不存在则重定向到/index.html。