现在很多web应用都是使用Vue、React等框架开发的，这种SPA单页面应用在打包后，有些文件比较大。因此，大部分公司在生产环境会使用CDN加速，来加快首页渲染速度。
但是使用CDN后静态文件会有缓存，重新打包上线后，可能不会立即更新修改的地方。浏览器上可以使用Ctrl + Shift + R强制清理缓存，但是手机上清理缓存就很麻烦。再说这种清理缓存的方式对用户来说极度不友好，所以需要在Nginx中配置相应的缓存策略。
Nginx & CDN Cache
配置Nginx
打开 nginx.conf 配置文件，编辑对应的server，加上下面的控制缓存策略代码：
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： 这个是匹配找到所有的
js、css文件，让其加上 30天 的缓存。
配置成功后，执行 nginx -s reload 重启nginx，应该就大功告成了。
《Nginx学习与实战》系列
- Nginx学习与实战 · 配置HTTP2
- Nginx学习与实战 · 解决net::ERR_CONTENT_LENGTH_MISMATCH 206问题
- Nginx学习与实战 · 解决SPA单页面应用CDN缓存问题（本文）
欢迎访问：天问博客
