web-dev-qa-db-ja.com

JavaScriptファイルのnginxキャッシュを無効にします

OK、私はこれをほとんどあきらめていますが、JavaScriptファイルのNginxからのキャッシュを無効にするにはどうすればよいですか？ Nginxでdockerコンテナーを使用しています。 JavaScriptファイル内の何かを変更したら、新しいファイルが現れるまで複数回リロードする必要があります。

ブラウザ/ドッカーではなく、Nginxであることを確認するにはどうすればよいですか？

ブラウザ：コマンドラインでcurlを使用してリクエストをシミュレートしましたが、同じ問題がありました。また、CacheKillerプラグインを使用しており、Chrome Dev Toolsでキャッシュを無効にしています。

Docker：コンテナーのbashに接続し、ファイルの変更後にcatを使用すると、すぐに正しい結果が得られます。

nginx.confのsites-enabledをこれに変更しました（別のstackoverflowスレッドで見つけました）

location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|Zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|xml|html|htm)$ {
    # clear all access_log directives for the current level
    access_log off;
    add_header Cache-Control no-cache;
    # set the Expires header to 31 December 2037 23:59:59 GMT, and the Cache-Control max-age to 10 years
    expires 1s;
}

ただし、コンテナを再構築した後（およびcatでコンテナ内にあることを確認した後）、まだ機能しませんでした。これは完全な.confです

server {
    server_name app;
    root /var/www/app/web;

    # Redirect to blog
    location ~* ^/blog {
        proxy_set_header Accept-Encoding "";
        sub_filter 'https://testproject.wordpress.com/' '/blog/';
        sub_filter_once off;
        rewrite ^/blog/(.*) /$1 break;
        rewrite ^/blog / break;
        proxy_pass     https://testproject.wordpress.com;
    }

    # Serve index.html only for exact root URL
    location / {
        try_files $uri /app_dev.php$is_args$args;
    }

    location ~ ^/(app|app_dev|config)\.php(/|$) {
        fastcgi_pass php-upstream;
        fastcgi_split_path_info ^(.+\.php)(/.*)$;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param HTTPS off;
        # Prevents URIs that include the front controller. This will 404:
        # http://domain.tld/app_dev.php/some-path
        # Remove the internal directive to allow URIs like this
        internal;
    }

    location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|Zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|xml|html|htm)$ {
        # clear all access_log directives for the current level
        access_log off;
        add_header Cache-Control no-cache;
        # set the Expires header to 31 December 2037 23:59:59 GMT, and the Cache-Control max-age to 10 years
        expires 1s;
    }


    error_log /var/log/nginx/app_error.log;
    access_log /var/log/nginx/app_access.log;
}
javascriptcachingnginx
29
Musterknabe

すべてのブラウザーキャッシュを無効にするローカル開発作業用に、次のnginx仮想ホスト（静的コンテンツ）があります。

server {
    listen 8080;
    server_name localhost;

    location / {
        root /your/site/public;
        index index.html;

        # kill cache
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        if_modified_since off;
        expires off;
        etag off;
    }
}

キャッシュヘッダーが送信されていません：

$ curl -I http://localhost:8080
HTTP/1.1 200 OK
Server: nginx/1.12.1
Date: Mon, 24 Jul 2017 16:19:30 GMT
Content-Type: text/html
Content-Length: 2076
Connection: keep-alive
Last-Modified: Monday, 24-Jul-2017 16:19:30 GMT
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0
Accept-Ranges: bytes

Last-Modifiedは常に現在の時刻です。

56
Greg K

expiresおよびadd_headerディレクティブは、ファイルをキャッシュするNGINXに影響を与えません。これらは、ブラウザーが表示するものに関するものです。

代わりに望むものは次のとおりです。

location stuffyoudontwanttocache {
    # don't cache it
    proxy_no_cache 1;
    # even if cached, don't try to use it
    proxy_cache_bypass 1; 
}

通常、.jsなどはキャッシュするものですが、おそらくキャッシュを完全に無効にする必要がありますか？

19
Joshua DeWald

あなたが探しているのは、次のような単純なディレクティブです：

location ~* \.(?:manifest|appcache|html?|xml|json)$ {
    expires -1;
}

上記は（）内の拡張機能をキャッシュしません。ファイルの種類ごとに異なるディレクティブを設定できます。

8
Nitai

Set sendfile off;またはキャッシュヘッダーが機能しないことを忘れないでください。私はこれを切り取ったものを使用します：

location / {

        index index.php index.html index.htm;
        try_files $uri $uri/ =404; #.s. el /index.html para html5Mode de angular

        #.s. kill cache. use in dev
        sendfile off;
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        if_modified_since off;
        expires off;
        etag off;
        proxy_no_cache 1;
        proxy_cache_bypass 1; 
    }
3
Sergio Cano

すべてのブラウザキャッシュを無効にするローカル開発作業用に、次のNginx仮想ホスト（静的コンテンツ）があります。

    upstream testCom
        {
         server localhost:1338;
        }

    server
        {

            listen 80;
            server_name <your ip or domain>;
            location / {

            # proxy_cache   datacache;
            proxy_cache_key $scheme$Host$request_method$request_uri;
            proxy_cache_valid       200     60m;
            proxy_cache_min_uses    1;
            proxy_cache_use_stale   updating;

            proxy_pass_header Server;
            proxy_set_header Host $http_Host;
            proxy_redirect off;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Scheme $scheme;

            proxy_ignore_headers    Set-Cookie;

            userid          on;
            userid_name     __uid;
            userid_domain   <your ip or domain>;
            userid_path     /;
            userid_expires  max;
            userid_p3p      'policyref="/w3c/p3p.xml", CP="CUR ADM OUR NOR STA NID"';


            add_header Last-Modified $date_gmt;
            add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
            if_modified_since off;
            expires off;
            etag off;

            proxy_pass http://testCom;
        }
    }
3
Ashish Gupta

私はこの質問が少し古いことを知っていますが、javascriptのURLでキャッシュブレーキングハッシュを使用することをお勧めします。これは、変更が発生したときに無限のキャッシュ時間と無期限の更新の両方を行うことができるため、本番でも開発中でも完全に機能します。

Javascriptファイル/ js/script.min.jsがあると仮定しますが、参照元のhtml/phpファイルでは実際のパスは使用しませんが、次のようにします。

<script src="/js/script.<?php echo md5(filemtime('/js/script.min.js')); ?>.min.js"></script>

そのため、ファイルが変更されるたびに、ブラウザーは異なるURLを取得します。つまり、ローカルまたは中間のプロキシ上にある場合は、キャッシュできません。

これを機能させるには、/ js/script。[0-9a-f] {32} .min.jsへのリクエストを元のファイル名に書き換えるためにnginxが必要です。私の場合、次のディレクティブを使用します（CSSの場合も同様）：

location ~* \.(css|js)$ {
                expires max;
                add_header Pragma public;
                etag off;
                add_header Cache-Control "public";
                add_header Last-Modified "";
                rewrite  "^/(.*)\/(style|script)\.min\.([\d\w]{32})\.(js|css)$" /$1/$2.min.$4 break;
        }

Filemtime呼び出しは、Linuxのファイルキャッシュにあるはずなので、サーバー上のディスクアクセスさえ必要としないと思います。疑わしいファイルや静的なhtmlファイルがある場合は、javascript/cssプリプロセッサが終了するか、gitフックの1つで変更するときに更新される固定ランダム値（または増分ハッシュまたはコンテンツハッシュ）を使用することもできます。

理論的には、キャッシュブレーカをダミーパラメータとして使用することもできます（/js/script.min.js?cachebreak=0123456789abcfefなど）が、「？ "。

0
Florian