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

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

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
        
    }
}