Express js app with nginx - a conflict with static

Question

upstream app {
    server localhost:3000;
}

server {
    ...
    # If I comment this location out, images are displayed on the website
    location ~* \.(?:jpg|jpeg|png|gif|swf|xml|txt|css|js)$ {

        expires 6004800;
        add_header Pragma public;
        add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    }
    ...
    location /app {
        alias /path/to/app/public/; 
        try_files $uri $uri @app;
    }

    location @app {
        rewrite /app(.*) $1 break;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $proxy_host;
        proxy_set_header X-NginX-Proxy true;

        proxy_pass http://app;
        proxy_redirect http://app/ /app/;
    }
    ...
}

I'm struggling with this for some time. I have an express app in a sub folder under nginx. Above is the code in my nginx file in /sites-available/. When I remove the location for the static files, the images and css of the app are proxied, but if the static files cache is in the nginx file then the images and css files of the express app are not displayed on the website.

Could someone help, please?

Answer 1

Regex locations have precedence over prefixed location blocks in nginx request processing. Hereinafter are relevant excerpts of nginx's location directive documentation.

I strongly encourage you to read them carefully as many people don't do it and miss the basics.

A few examples before to understand keywords :

• prefixed location : location /toto { [...] }
• regular expression location : location ~ /toto { [...] }

[ ... ]

To find location matching a given request, nginx first checks locations defined using the prefix strings (prefix locations). Among them, the location with the longest matching prefix is selected and remembered. Then regular expressions are checked, in the order of their appearance in the configuration file. The search of regular expressions terminates on the first match, and the corresponding configuration is used. If no match with a regular expression is found then the configuration of the prefix location remembered earlier is used.

[ ... ]

If the longest matching prefix location has the “^~” modifier then regular expressions are not checked.

[ ... ]

Also, using the “=” modifier it is possible to define an exact match of URI and location. If an exact match is found, the search terminates. [...]

A few other examples to illustrate the two operators that modifies location lookup order :

• location ^~ /toto { [...] } : prefixed location with higher priority than regex locations
• location = /toto { [...] } : exact prefixed location (exact match, highest priority)

To sum things up, the priority list during location election for incoming request URI is :

1. location = /too
2. location ^~ /toto
3. location ~ /toto
4. location /toto

So the cleaner way to solve your issue is using :

location ^~ /app {
    alias /path/to/app/public/; 
    try_files $uri $uri @app;
}