Serving different static folders per location with nginx - nginx-reverse-proxy

Question

TL;DR
I need to serve two containerized apps (each on a different port) hosted on the same machine but located at two very different paths, with their own static sub-folder using an nginx reverse proxy.
Context
I went through a lot of Q/A with extra complicated stuff that doesn't help me much to understand the essence on how I can serve some static folders per location using nginx.
Let me explain what I mean by 'per location' with a simple and uncluttered starting reverse-proxy configuration:
server {
listen 80;
listen [::]:80;
root /var/www;
server_name my.server.org;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location /app-a {
proxy_pass http://127.0.0.1:8080/;
}
location /app-b {
proxy_pass http://127.0.0.1:8081/;
}
}
This is working great, except that the static files (css, js, ...) are not served.
Therefore, I changed it like the following to retrieve these files for app-b:
server {
listen 80;
listen [::]:80;
root /var/www;
server_name my.server.org;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location /app-a {
proxy_pass http://127.0.0.1:8080/;
}
location /app-b {
proxy_pass http://127.0.0.1:8081/;
}
location ^~ /static/ {
include /etc/nginx/mime.types;
root /home/debian/projects/crystallography/web/app-b/;
}
}
And that's working better; I now have these static files for app-b. But still nothing for app-a of course.
Now, you see what I'm getting at... I also need to serve app-a own static folder.
What I've tested
Here are two main ideas that I've tried (and which are not working) + other variations (not working either):
Adding an extra static location (it seems a priori to be a clean way)
server {
listen 80;
listen [::]:80;
root /var/www;
server_name my.server.org;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location /app-a {
proxy_pass http://127.0.0.1:8080/;
}
location ^~ /static/ {
include /etc/nginx/mime.types;
root /media/biology/swamps/frog-migration/app-a/; # this is a totally different path than app-b
}
location /app-b {
proxy_pass http://127.0.0.1:8081/;
}
location ^~ /static/ {
include /etc/nginx/mime.types;
root /home/debian/projects/crystallography/web/app-b/;
}
}
Which obviously conflicts with the static folder from app-b, so nginx -t naturally fails:
nginx: [emerg] duplicate location "/static/" in /etc/nginx/sites-enabled/proxy-pass.conf:24
nginx: configuration file /etc/nginx/nginx.conf test failed
Duplication of the server definition (this one doesn't sound like a great idea to me):
server {
listen 80;
listen [::]:80;
root /var/www;
server_name my.server.org;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location /app-a {
proxy_pass http://127.0.0.1:8080/;
}
location ^~ /static/ {
include /etc/nginx/mime.types;
root /media/biology/swamps/frog-migration/app-a/;
}
}
server {
listen 80;
listen [::]:80;
root /var/www;
server_name my.server.org;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location /app-b {
proxy_pass http://127.0.0.1:8081/;
}
location ^~ /static/ {
include /etc/nginx/mime.types;
root /home/debian/projects/crystallography/web/app-b/;
}
}
Syntax is OK, but I have some warnings with nginx -t:
nginx: [warn] conflicting server name "my.server.org" on 0.0.0.0:80, ignored
nginx: [warn] conflicting server name "my.server.org" on [::]:80, ignored
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
But most importantly, app-b is no more accessible (404 is returned).
Question
With nginx, how could I get two (or more of course) different apps (located at two different paths on a same host machine) to live next to each other, in their own bubble and being served with their own static sub-folder (i.e. no interference between the static files of the two apps)?

Answer 1

I have finally found this solution, with one server, which is working, but I'm not 100% satisfied as I'd like to avoid the alias directive because of the path traversal vulnerability.
Disclaimer: so please don't forget the trailing slash in your alias locations.
server {
listen 80;
listen [::]:80;
#root /var/www;
server_name server.domain.org;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location /app-a {
proxy_pass http://127.0.0.1:8080/;
location /app-a/static/ {
include /etc/nginx/mime.types;
alias /media/biology/swamps/frog-migration/app-a/static/;
}
}
location /app-b {
proxy_pass http://127.0.0.1:8081/;
location /app-b/static/ {
include /etc/nginx/mime.types;
alias /home/debian/projects/crystallography/web/app-b/static/;
}
}
}
Especially, it's not working with a root directive; as it is sending my pages without any of the static files (error 404 on these static files, which I don't understand why):
server {
listen 80;
listen [::]:80;
#root /var/www;
server_name server.domain.org;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location /app-a {
proxy_pass http://127.0.0.1:8080/;
location /app-a/static/ {
include /etc/nginx/mime.types;
root /media/biology/swamps/frog-migration/app-a/;
}
}
location /app-b {
proxy_pass http://127.0.0.1:8081/;
location /app-b/static/ {
include /etc/nginx/mime.types;
root /home/debian/projects/crystallography/web/app-b/;
}
}
}
In addition to the working solution above, I also have had to change the static path in my Flask apps to:
/app-a/static instead of just /static for app-a and
/app-b/static instead of just /static for app-b.
But by doing this, you definitely want to put your app-a and app-b strings somewhere in environment variables instead of hard coding them.