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

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

配置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学习与实战 · 解决SPA单页面应用CDN缓存问题
• Nginx学习与实战 · 解决net::ERR_CONTENT_LENGTH_MISMATCH 206问题
• Nginx warn：conflicting server name '127.0.0.1' on 0.0.0.0:8010, ignored
• Nginx反向代理WebSocket服务连接报错：WebSocket connection to 'wss://xxx/xxx' failed

---

欢迎访问：天问博客