NGINX returns 404s when trying to cache static files

Problem:

When I attempt to add caching logic to my NGINX server.conf file all static assets receive a 404

Goal:

I would like to serve specific files types within the /static/* file directory with caching headers via NGINX. I would like these headers to tell clients (browsers) to cache static files locally.

Context:

I will be using www.example.com instead of my own domain in this example.

I have two docker containers that are aware of each other. One is an NGINX server that receives web connections. The other is a Flask container that does backend processing and creates dynamic HTML templates with JINJA.

The NGINX container has a folder called /static which contains files such as .css, .js, .png, .jpg, and others. The /static folder structure looks like this:

/static file structure

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

NGINX Config - WORKING

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 Config - BROKEN

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 Config - DIFF

Here are the lines which are added to the file and break things:

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