Nginx没有立即提供最新版本的JS

时间:2018-03-31 05:56:24

标签: reactjs nginx caching webpack

我在我的ReactJs项目中使用Nginx,并使用以下配置允许浏览器仅缓存图像而不缓存其他文件(HTML,JS和CSS)。它对我来说很好。但是一些客户正面临缓存问题。最新的HTML立即加载。但他们正在获得旧的JS捆绑文件。我正在使用webpack生成一个生产包。在html中,捆绑代码会立即反映出来。请查看示例HTML&下面的Nginx配置文件。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link href="css/main.css?76m85vt7qo00000" rel="stylesheet">
    ...
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="js/bundle.js?438400c3459a72d63b87"></script>
</body>
</html>

NGINX CONF:

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;
        gzip_disable "msie6";


        ##
        # Virtual Host Configs
        ##

        server {
            listen 80;
            listen [::]:80;

            root /var/www/html;
            index index.html index.htm;

            server_name *.mydomain.com;

            location / {
                add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
                add_header Pragma 'no-cache';
                expires off;

                add_header Last-Modified $date_gmt;
                if_modified_since off;
                etag off;

                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri /index.html;
            }

            location ~*  \.(jpg|jpeg|png|gif|ico)$ {
                expires 30d;
                log_not_found off;
                add_header Pragma public;
                add_header Cache-Control "public";
            }

            location ~*  \.(js|css)$ {
                expires -1;
                add_header Cache-Control 'no-store';
                add_header Last-Modified $date_gmt;
            }
        }
}

响应标题: enter image description here

注意:并非所有用户都会一直遇到此问题。几分钟或几小时后,此问题将自动解决。

我已清除浏览器缓存并再次尝试。没运气。无法获得最新版本。如何指示Nginx始终提供最新的JS文件?我在谷歌研究了很多但未能得到理由&amp;解。请有人给我解决这个问题的方法。提前谢谢......

0 个答案:

没有答案