NGINX 在尝试缓存静态文件时返回 404

Question

问题：

当我尝试将缓存逻辑添加到 NGINX server.conf 文件时，所有静态资源都会收到

404

目标：

我想通过 NGINX 提供带有缓存标头的 /static/* 文件目录中的特定文件类型。我希望这些标头告诉客户端（浏览器）在本地缓存静态文件。

背景：

在此示例中我将使用

www.example.com

而不是我自己的域。

我有两个互相了解的 Docker 容器。一种是接收 Web 连接的 NGINX 服务器。另一个是 Flask 容器，它进行后端处理并使用 JINJA 创建动态 HTML 模板。

NGINX 容器有一个名为 /static 的文件夹，其中包含 .css、.js、.png、.jpg 等文件。 /static 文件夹结构如下所示：

/静态文件结构

     /static    
        ├── /assets
        │   └── sitemap.xml
        │   └── otherfiles...
        └── /img
        │   └── images...
        └── /js
        │   └── jsFiles...
        └── /css
        │   └── cssFiles...

NGINX 配置 - 工作中

server{
        listen 80;
        server_name <www.example.com>;
        return 301 <https://www.example.com>$request_uri;
}

server {

    modsecurity on;
    modsecurity_rules_file /etc/nginx/modsec/main.conf;

    listen 443 http2 ssl;
    server_name <www.mydomain.com>;
    ssl_certificate <certpath>
    ssl_certificate_key <privatekeypath>

    large_client_header_buffers 4 16k;

    location / {
        proxy_pass http://flask-app-docker:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /robots.txt {
    add_header Content-Type text/plain;
    return 200 "User-agent: *\nAllow: /\nSitemap: https://<www.example.com>/sitemap.xml";
    }

    location /sitemap.xml {
        add_header Content-Type application/xml;
        try_files $uri /static/assets/sitemap.xml;
    }

    location /static {
        rewrite ^/static(.*) /$1 break;
        root /static;
    }
}

NGINX 配置 - 损坏

server{
        listen 80;
        server_name <www.example.com>;
        return 301 <https://www.example.com>$request_uri;
}

server {

    modsecurity on;
    modsecurity_rules_file /etc/nginx/modsec/main.conf;

    listen 443 http2 ssl;
    server_name <www.mydomain.com>;
    ssl_certificate <certpath>
    ssl_certificate_key <privatekeypath>

    large_client_header_buffers 4 16k;

    # ------ Start of caching section which breaks things ------
    location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    expires 30d;
    add_header Vary Accept-Encoding;
    access_log off;
    }
    # ----------------------------------------------------------

    location / {
        proxy_pass http://flask-app-docker:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /robots.txt {
    add_header Content-Type text/plain;
    return 200 "User-agent: *\nAllow: /\nSitemap: https://<www.example.com>/sitemap.xml";
    }

    location /sitemap.xml {
        add_header Content-Type application/xml;
        try_files $uri /static/assets/sitemap.xml;
    }

    location /static {
        rewrite ^/static(.*) /$1 break;
        root /static;
    }
}

NGINX 配置 - 差异

以下是添加到文件中并破坏内容的行：

    # ------ Start of caching section which breaks things ------
    location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    expires 30d;
    add_header Vary Accept-Encoding;
    access_log off;
    }
    # ----------------------------------------------------------

编辑2020年11月9日 仍然无法根据结束文件扩展名进行缓存工作。但是，我设法通过将静态文件放入其自己的文件夹中，然后在所有文件上设置缓存标头来解决此问题。

将上面示例中的

/static

位置块更新为如下所示。 我最终可能会将其更新为答案，因为它正在工作，即使它不是完美的解决方案或我正在寻找的答案。

    location /static {
        root /static;
        expires 30d;
        add_header Vary Accept-Encoding;
    }

Answer 1

我也面临同样的问题。 一般来说，“location /”部分将提供 HTML 及其静态文件。现在我们为要缓存的特定文件类型添加另一个位置部分。在这种情况下，您需要设置基本上包含 html 和静态文件的根文件夹。

location ~* \.(jpg|jpeg|gif|png|ico|svg)$ {
     root /root/yourapp/dist;
     expires 30d;
     add_header Pragma "public";
     add_header Cache-Control "public";
    }
location / {
      root /root/yourapp/dist;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
      expires 30d;
    }