记录一次由nginx配置引发出来的一系列的缓存问题

问题描述:

 

在做一个企业微信的移动端项目时,每次修改代码后并且打包、部署完毕,再次打开页面总是会有上一次的缓存,一开始以为是cookie和webStorage缓存导致的,然后每次清除还是有缓存,后来把企业微信本身的缓存清除了之后再重进才有效果

问题推理:

如果每次打开是上一次的缓存,那可能就是index.html的根文件被缓存住了,因为index.html里面会加载所有css、js文件,当时打开network看了下,响应头里面并没有Cache-Control: no-store, no-cache的字段,那问题的原因肯定是出在这儿了,上线的相关的部署配置是放在nginx上的;因为公司走的都是统一的容器化部署,当时nginx的部署也可以定制化的;

原因定位:

根据上面的问题推理,找到了前端项目的相关nginx配置(default.conf ),代码如下:

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;
    root  /usr/share/nginx/html;

    location / {
        try_files $uri /index.html;
        index  index.html index.htm;
    }

    location ^~ /freight {
        try_files $uri /freight/index.html;
    }

    location ^~ /s3/ {
        # fix ios previewImage 加载失败
        proxy_set_header Accept "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9";
        proxy_pass xxxxxx;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$ {
        expires 7d;
        access_log off;
        add_header Cache-Control "public";
    }

    location ~* .*\.(?:js|css)$ {
        expires 7d;
        access_log off;
        add_header Cache-Control "public";
    }

    location ~* .*\.(?:htm|html)$ {
        add_header Cache-Control "no-store, no-cache";
        add_header Pragma "no-cache";
    }
}

一眼扫过去,发现有针对html文件去除缓存的配置啊,如下:

 location ~* .*\.(?:htm|html)$ {
        add_header Cache-Control "no-store, no-cache";
        add_header Pragma "no-cache";
    }

那为什么network里面响应头里面没有携带“no-store, no-cache” 信息呢?经过一番摸索,问题其实是出在下面这个配置上了,因为项目代码存放的文件夹是freight

// 当匹配到该路径时,try_files的作用是会直接解析freight下面index.html文件,nginx就会终止往下查询了
location ^~ /freight {
    try_files $uri /freight/index.html;
}

那就需要把相关去除缓存的配置移动到location ^~ /freight这个匹配项里面去,如下所示:

location ^~ /freight {
        try_files $uri /freight/index.html;

         if ($uri ~* .*\.(?:htm|html)$) {
            add_header Cache-Control "no-store, no-cache";
            add_header Pragma "no-cache";
        }

        if ($uri ~* .*\.(?:js|css|jpg|jpeg|gif|png|ico|cur|gz|ttf|woff|ico|svg|svgz|mp4|ogg|ogv|webm)$) {
            expires 7d;
            access_log off;
            add_header Cache-Control "public";
        }
        index  index.html index.htm;
    }

最终问题得到解决了!

记录一次由nginx配置引发出来的一系列的缓存问题_第1张图片

你可能感兴趣的:(nginx,nginx,缓存,前端)