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

现在很多web应用都是使用VueReact等框架开发的,这种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: 这个是匹配找到所有的jscss文件,让其加上 30天 的缓存。

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


《Nginx学习与实战》系列


欢迎访问:天问博客

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容