How to load static files in an Nginx + Flask setup if the app is mapped to a sub-directory

Question

I have a basic html site running at a domain (say example.com) and I want to run a flask app in a sub-directory (eg:example.com/test) flask app is running on port 5433 using the default flask development server.

I used the following nginx configuration to achieve this

location /test {
        rewrite /test(.*) $1 break;
        proxy_pass http://localhost:5433;
        proxy_redirect     default;
        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 /static/{
        alias /home/hrishi/www/example.com/test/app/static/;
    }

I am able to access the app using the example.com/test/ url but the static files fails to load(gives 404 error) despite the alias.

How can I fix this?

Update: adding entire server block as instructed

 server {

    listen   *:80 default_server; ## listen for ipv4; this line is default and implied
    #listen   [::]:80; # listen for ipv6

    root /home/hrishi/www/example.com/;
    index index.php index.html index.htm;

    # Make site accessible from http://localhost/
    server_name example.com;

    # Logging
    access_log  /home/hrishi/log/example.com/access.log;
    error_log   /home/hrishi/log/example.com/error.log notice;

    location / {
        #try_files $uri $uri/ /index.html;
        try_files $uri $uri/ /index.php;
    }

    location /doc {
        autoindex on;
    }

    location /test {
        rewrite /test(.*) $1 break;
        proxy_pass http://localhost:5433;
        proxy_redirect     default;
        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 /static/{
        alias /home/hrishi/www/example.com/test/app/static/;
    }

    #error_page 404 /404.html;

    # redirect server error pages to the static page /50x.html
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /home/hrishi/www/example.com/error/;
    }

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    try_files $uri =404;
    #    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    #    fastcgi_pass unix:/var/run/php5-fpm.sock;
    #    fastcgi_index index.php;
    #    include fastcgi_params;
    #}

    # serve static files directly
    location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|html|xml|txt)$ {
        expires           max;
    }

}

Answer 1

This is due to this :

location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|html|xml|txt)$ {
    expires           max;
}

Because regex locations take precedence over prefixed locations. I will shamefully autopromote a post of mine you should read : Nginx rewite rules 403 error.

You will either need to turn your former prefixed location block into a regex location block or use the regex location block for file extensions with a capture group an use the latter in an alias directive.