Nginx学习与实战 · 解决SPA单页面应用CDN缓存问题


字数:425 阅读时长:1分钟 阅读:85

现在很多web应用都是使用VueReact等框架开发的,这种SPA单页面应用在打包后,有些文件比较大。因此,大部分公司在生产环境会使用CDN加速,来加快首页渲染速度
但是使用CDN后静态文件会有缓存,重新打包上线后,可能不会立即更新修改的地方。浏览器上可以使用Ctrl + Shift + R强制清理缓存,但是手机上清理缓存就很麻烦。再说这种清理缓存的方式对用户来说极度不友好,所以需要在Nginx中配置相应的缓存策略

Nginx & CDN Cache

配置Nginx

打开 nginx.conf 配置文件,编辑对应的server,加上下面的控制缓存策略代码:

configuration
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server {
listen 8088;
server_name localhost;

location / {
root /data/www/web-test;
index index.html;
try_files $uri $uri/ /index.html;

# 控制缓存策略代码 start
# code-1
if ($request_filename ~ .*\.(htm|html)$) {
add_header Cache-Control 'no-store, no-cache, must-revalidate';
}

# code-2
if ($request_filename ~ .*.(js|css)$) {
expires 30d;
}
# 控制缓存策略代码 end

}
}
  • code-1: 这段代码的含义是不缓存html入口页,每次都重新从服务端拉取最新的文件。
  • code-2: 这个是匹配找到所有的jscss文件,让其加上 30天 的缓存。

配置成功后,执行 nginx -s reload 重启nginx,应该就大功告成了。


Nginx 相关推荐


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2022-01-20
最后更新: 2022-05-12
本文标题: Nginx学习与实战 · 解决SPA单页面应用CDN缓存问题
本文链接: https://www.tiven.cn/p/23ff4dc/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^