☰

將位置區塊新增至快取檔案會使這些檔案傳回 404

tag-icon • tag-icon nginx cache
將位置區塊新增至快取檔案會使這些檔案傳回 404

我想使用 Nginx 快取一些靜態檔案。但我不知何故無法讓它發揮作用。

這是我的nginx.conf：

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
    #multi_accept on;
}


http {

    #GZIP
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 256;
    gzip_types application/javascript application/json application/ld+json application/xml font/eot font/otf font/ttf text/css text/javascript text/plain text/xml;

    # SERVERS
    server {
            listen      80;

        server_name example.com;
        if ($http_host ~* ^www\.(.*)$ )
        {
            return 301 https://$1$request_uri;
        }

        return 301 https://$http_host$request_uri;
    }
    server {
        listen 443 ssl;

        if ($http_host ~* ^www\.(.*)$ )
        {
            return 301 $scheme://$1$request_uri;
        }


        #SSL
        ssl_certificate /root/.acme.sh/example.com/fullchain.cer;
        ssl_certificate_key /root/.acme.sh/example.com/example.com.key;

        server_name example.com;

        # Pass all traffic to my webapplication
        location / {
            proxy_set_header Host $host;
            proxy_pass http://localhost:8080;
        }

        #Browser caching
        location ~* \.(js|css)$ {
            expires 180d;
            add_header Pragma "public";
            add_header Cache-Control "public";
        }
        location ~* \.(jpg|jpeg|png|webp|woff|woff2|ttf)$ {
            expires 365d;
            add_header Pragma "public";
            add_header Cache-Control "public";
        }

    }
}

問題在於“瀏覽器快取”部分。啟用此程式碼區塊時，我的網站會加載，但所有 css 檔案、javascript 檔案和圖像都會返回 404 location /。

我能夠透過複製/貼上解決這個問題

proxy_set_header Host $host;
proxy_pass http://localhost:8080;

在我所有的location塊中，但這並不是很優雅，實際上讓我的網站感覺慢了很多...

我還嘗試移動location瀏覽器快取的兩個區塊location \，以便後者充當“父級”。但這並沒有影響影像等返回 404 的行為。

如何在 Nginx 中設定靜態檔案的快取？

編輯： 我將以下內容添加到我的http-block 中：

  map $uri $cache_control {
                ~/Website/assets/media/images    "public, no-transform";
        }
        map $uri $expire {
            ~/Website/assets/media/images   365d;
        }

將以下內容添加到我的server-block 中：

 expires $expire;
                add_header Cache-Control $cache_control;

沒有任何內容被快取。

答案1

如果您無法像@TeroKilkanen 建議的那樣透過 nginx 直接從檔案系統提供靜態資產，您可以使用類似於中所示的技術這答：

map $uri $expire {
    ~\.(?:j|cs)s$                      180d;
    ~\.(?:jpe?g|png|webp|woff2?|ttf)$  365d;
    default                            off;
}
map $uri $cache_control {
    ~\.(?:js|css|jpe?g|png|webp|woff2?|ttf)$  public;
}
server {
    ...
    expires $expire;
    add_header Pragma $cache_control;
    add_header Cache-Control $cache_control;
    ...
}

如果您的請求 URI 與正規表示式不匹配，$cache_control則變數將具有空值，且 nginx根本不會向其回應新增標頭Pragma。Cache-Control

答案2

這實際上並沒有回答您的問題，但顯示了使用 nginx 提供靜態資產的首選方式。

由於您似乎在同一台主機上運行 Web 應用程序，因此我建議您直接使用 nginx 提供靜態檔案。

root /path/to/webroot;

location ~* \.(js|jss)$ {
    expires 180d;
    add_header Pragma "public";
    add_header Cache-Control "public;

    try_files $uri =404;
}

location ~* \.(jpg|jpeg|png|webp|woff|woff2|ttf)$ {
    expires 365d;
    add_header Pragma "public";
    add_header Cache-Control "public";

    try_files $uri =404;
}

這個仍然有重複的快取定義。您可以透過在單獨的檔案中指定指令並使用include在設定中包含該檔案來消除一些重複。

您將輸入以下內容進行proxy_header.conf歸檔：

add_header Pragma "public";
add_header Cache-Control "public";

在你的配置中：

location ~* ... {
    include /path/to/webroot;
    expires 365d;
}

相關內容