nginx配置缓存静态资源

本文详细介绍了如何在Nginx中配置静态缓存,以减少网络通信并加速前端资源加载。此外,还涉及了静态资源的压缩配置,需确保前端配合。通过安装和启用相关模块,可以显著提高网站性能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、配置静态缓存

目的:把从其他主机访问的前端静态资源,缓存到本地,降低网络通讯,提高性能。

http {

......

	# 2024-03-08
	upstream h5_server{ 
		server 127.0.0.1:80;  
	} 

    # 2024-03-08 nginx增加缓存静态资源到本机
	proxy_buffer_size 16k;
    proxy_buffers 4 32k;
    proxy_busy_buffers_size 96k;
    proxy_temp_file_write_size 96k;

    # 临时缓存路径,目前看没啥用
    proxy_temp_path /opt/tmp/ui_dir;
    # 定义缓存的存储路径。
    proxy_cache_path /opt/tmp/cache levels=1:2 keys_zone=cache_one:100m inactive=1d max_size=10g;

    server {

        ......

        #要缓存文件的后缀,可以在以下设置。
	    location ~ .*\.(gif|jpg|png|css|js)$ {
			proxy_pass http://h5_server;    # 前端服务地址(ip:port)
			proxy_redirect off;
			proxy_set_header Host $host;
			proxy_cache cache_one;
			proxy_cache_valid 200 302 2h;
			proxy_cache_valid 301 1d;
			proxy_cache_valid any 5m;
			expires 2h;
			add_header wall  "hey! cache by nginx!";
	    }

}

配置后,访问前端,可以看到缓存了文件到目录中。

二、配置静态压缩

静态压缩,需要前端配合,事先把资源提前打包压缩,和原文件放一起,如:

demo.js, demo.js.gz 是同时存在的。

1)nginx -V 查看是否安装模块

[root@VM-24-9-opencloudos h5]# nginx -V
nginx version: nginx/1.14.1
built by gcc 8.5.0 20210514 (Red Hat 8.5.0-10) (GCC) 
built with OpenSSL 1.1.1k  FIPS 25 Mar 2021
TLS SNI support enabled
configure arguments: --prefix=/usr/share/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --http-client-body-temp-path=/var/lib/nginx/tmp/client_body --http-proxy-temp-path=/var/lib/nginx/tmp/proxy --http-fastcgi-temp-path=/var/lib/nginx/tmp/fastcgi --http-uwsgi-temp-path=/var/lib/nginx/tmp/uwsgi --http-scgi-temp-path=/var/lib/nginx/tmp/scgi --pid-path=/run/nginx.pid --lock-path=/run/lock/subsys/nginx --user=nginx --group=nginx --with-file-aio --with-ipv6 --with-http_ssl_module --with-http_v2_module --with-http_realip_module --with-http_addition_module --with-http_xslt_module=dynamic --with-http_image_filter_module=dynamic --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_degradation_module --with-http_slice_module --with-http_stub_status_module --with-http_perl_module=dynamic --with-http_auth_request_module --with-mail=dynamic --with-mail_ssl_module --with-pcre --with-pcre-jit --with-stream=dynamic --with-stream_ssl_module --with-debug --with-cc-opt='-O2 -g -pipe -Wall -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -Wp,-D_GLIBCXX_ASSERTIONS -fexceptions -fstack-protector-strong -grecord-gcc-switches -specs=/usr/lib/rpm/redhat/redhat-hardened-cc1 -specs=/usr/lib/rpm/redhat/redhat-annobin-cc1 -m64 -mtune=generic -fasynchronous-unwind-tables -fstack-clash-protection -fcf-protection' --with-ld-opt='-Wl,-z,relro -Wl,-z,now -specs=/usr/lib/rpm/redhat/redhat-hardened-ld -Wl,-E'

如果存在:--with-http_gzip_static_module,说明已经安装静态压缩模块,如果没有需要安装(略)

2)nginx加入配置

location /h5 {
        alias /opt/www/h5/;
        index /h5/index.html;
        try_files $uri $uri/ /h5/index.html;
            
        # 打开静态压缩
        gzip_static on;
    }

配置好重启nginx即可。

可以看到,是我们手动压缩过的文件大小。

<think>好的,用户想配置Nginx缓存前端静态文件,需要最佳实践。首先,我得回忆一下Nginx缓存配置的相关知识。记得Nginx缓存主要通过proxy_cache模块来实现,但如果是作为静态资源服务器,可能需要用expires指令或者缓存头来控制浏览器的缓存。 用户提到了引用[2]中的proxy_cache_path,但这是反向代理缓存,适用于缓存后端动态内容。而用户的问题是关于前端静态资源,可能更适合使用expires指令或者Cache-Control头来让浏览器缓存静态文件。比如引用[3]中的配置,虽然主要是静态压缩,但可以结合缓存设置。 另外,引用[4]提到控制不缓存配置,比如设置Cache-Control为no-cache,但用户需要的是缓存,所以应该设置长期的有效期。比如对图片、CSS、JS等静态资源设置expires 30d;,这样浏览器会缓存这些资源,减少请求次数。 不过,还要注意版本管理,避免缓存导致更新问题。通常会在文件名中添加哈希值,然后设置长期缓存。同时,Nginx配置中需要匹配这些静态资源的路径,比如location ~* \.(js|css|png)$这样的正则匹配。 另外,是否要使用gzip压缩呢?引用[3]里提到了gzip_static on;,这需要预先生成压缩文件,可以节省服务器压缩的时间。但用户的问题主要是缓存,这部分可以作为优化建议。 所以,综合起来,配置步骤应该是:确定静态资源的location块,设置expires或Cache-Control头,处理版本化文件,可能开启gzip。同时,确保Nginx配置语法正确,测试并重载配置。 可能还需要考虑CDN的情况,或者结合proxy_cache做服务器端缓存,但用户需求更可能是浏览器缓存。需要分清楚两种缓存的不同:浏览器缓存Nginx反向代理缓存。用户的问题可能更倾向于前者,所以主要用expires指令。 最后,验证配置是否正确,用curl检查响应头里是否有Cache-Control和Expires信息,确认缓存生效。另外,最佳实践包括版本控制文件名、区分长期和短期资源、合理设置缓存时间等。</think>### Nginx静态资源缓存配置步骤 1. **基础缓存配置** 在`server`块中添加以下配置,为常见静态资源设置缓存时间: ```nginx location ~* \.(js|css|png|jpg|jpeg|gif|ico|woff2|svg)$ { expires 30d; # 客户端缓存30天 add_header Cache-Control "public, no-transform"; # 明确缓存策略[^2] access_log off; # 关闭日志减少IO } ``` 2. **版本化资源长期缓存** 对带有哈希值的文件(如`main.a1b2c3.css`)设置永久缓存: ```nginx location ~* \.[a-f0-9]{8}\.(js|css)$ { expires 1y; add_header Cache-Control "public, immutable"; # 不可变声明[^4] } ``` 3. **禁用HTML文件缓存** 防止页面更新延迟: ```nginx location ~* \.html$ { add_header Cache-Control "no-cache, must-revalidate"; # 强制协商缓存 } ``` 4. **启用gzip压缩(可选优化)** ```nginx gzip on; gzip_types text/plain text/css application/json application/javascript; ``` ### 配置验证方法 ```bash # 检查语法 nginx -t # 重载配置 nginx -s reload # 验证响应头 curl -I https://example.com/static/main.js ``` ### 最佳实践要点 1. **缓存分层** - 低频变更资源:设置`expires 1y` + `immutable` - 普通静态资源:`expires 30d` - 动态内容:`no-cache` 2. **版本控制** 使用webpack等工具生成带哈希文件名,例如: `app-2e8a9b3f.js` → 允许永久缓存 3. **缓存清除策略** - 通过文件名版本变更自动失效旧缓存 - 使用`purge`模块实现主动清除(需额外安装) 4. **监控指标** 在Nginx状态模块中监控`proxy_cache_*`指标,评估缓存命中率[^2]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值