現(xiàn)在很多web應(yīng)用都是使用Vue、React等框架開發(fā)的，這種SPA單頁面應(yīng)用在打包后，有些文件比較大。因此，大部分公司在生產(chǎn)環(huán)境會使用CDN加速，來加快首頁渲染速度。
但是使用CDN后靜態(tài)文件會有緩存，重新打包上線后，可能不會立即更新修改的地方。瀏覽器上可以使用Ctrl + Shift + R強(qiáng)制清理緩存，但是手機(jī)上清理緩存就很麻煩。再說這種清理緩存的方式對用戶來說極度不友好，所以需要在Nginx中配置相應(yīng)的緩存策略。

Nginx & CDN Cache

配置Nginx

打開 nginx.conf 配置文件，編輯對應(yīng)的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入口頁，每次都重新從服務(wù)端拉取最新的文件。
• code-2： 這個(gè)是匹配找到所有的js、css文件，讓其加上 30天 的緩存。

配置成功后，執(zhí)行 nginx -s reload 重啟nginx，應(yīng)該就大功告成了。

《Nginx學(xué)習(xí)與實(shí)戰(zhàn)》系列

• Nginx學(xué)習(xí)與實(shí)戰(zhàn) · 配置HTTP2
• Nginx學(xué)習(xí)與實(shí)戰(zhàn) · 解決net::ERR_CONTENT_LENGTH_MISMATCH 206問題
• Nginx學(xué)習(xí)與實(shí)戰(zhàn) · 解決SPA單頁面應(yīng)用CDN緩存問題（本文）

歡迎訪問：天問博客