当尝试缓存静态文件时，NGINX返回404错误

Question

问题：

当我试图在NGINX的server.conf文件中添加缓存逻辑时，所有静态资源都会收到404错误。

目标：

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

背景：

在此示例中，我将使用www.example.com代替我的域名。

我有两个相互感知的Docker容器。一个是接收Web连接的NGINX服务器，另一个是使用JINJA创建动态HTML模板的Flask容器，用于后端处理。

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

/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配置文件 - DIFF

以下是添加到文件中会破坏配置的行：

    # ------ 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;
    }

- Birki

---

这里有完全相同的问题 - 你解决了吗？谢谢 - undefined

没有，我从来没有找到解决方法。我设法找到了一个半成品的解决办法。我刚刚在我的帖子中进行了一次编辑。 - undefined

我通过将这行代码... root /usr/share/nginx/html; ... 从我的 location block 移动到我的 server block 中使其正常工作 - 显然，root 是静态文件的路径，因为 root 在我的 location block 中（一个不同的 location block），所以在静态文件位置 block 中没有文件路径 - 将其移动到 server block 中，然后所有的 location blocks 似乎都继承自此。 - undefined

谢谢@danday74。我在你的建议上进行了改进。不再将其放在服务器级别，而是将根位置添加到新的位置块中。https://stackoverflow.com/a/77301181/1448511 - undefined

Answer 1

我也遇到了同样的问题。 一般来说，location / 部分将提供 HTML 及其静态文件的服务。现在我们正在为特定文件类型添加另一个位置部分以进行缓存。在这种情况下，您需要设置根文件夹，该文件夹基本上包含您的 HTML 和静态文件。在我的情况下，root /root/yourapp/dist; 是文件夹路径。

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;
    }

- gramcha