Nginx container can't find plotly dash javascript within mounted volume - docker

Question

I have a web service powered via plotly dash running in a docker container reverse proxied by an nginx container, all coordinated via docker compose.
docker-compose.yaml
services:
reverse_proxy:
image: nginx:1.17.10
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf:Z,ro # nginx configuration
- ../../resources:/usr/share/nginx/html/:Z,ro # static assets, 404.html etc
- /etc/pki/tls/certs/:/etc/pki/tls/certs/:Z,ro # SSL stuff
ports:
- "80:80"
- "443:443"
depends_on:
- my_server
my_server:
image: my_server:v1.2.3
command: --config /app/configs/prod.yaml --port 8050 8051
nginx.conf
upstream my_server {
ip_hash;
server my_server:8050;
server my_server:8051;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
listen 443 ssl;
server_name my-server.com;
root /usr/share/nginx/html; # I assume this has something to do with it!
ssl_certificate /etc/pki/tls/certs/2022/my-server.crt;
ssl_certificate_key /etc/pki/tls/certs/2022/my-server.key;
ssl_password_file /etc/pki/tls/certs/2022/my-server.txt;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location /prod/app/ {
proxy_pass http://my_server/;
proxy_redirect off;
proxy_buffering off;
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 = / {
root /usr/share/nginx/html; # or this...?
index index.html;
}
Upon running docker compose up --remove-orphans --force-recreate --renew-anon-volumes
I see the success message that my Dash server is running:
Dash is running on http://0.0.0.0:8050/
and the nginx container starts without error. However when I query my service via https://my-server.com/prod/app/
nginx fails to (cache?) and load plotly Dash javascript within its specified root directory:
# the location seems to be found and routed correctly
10.10.193.8 - - [28/Oct/2022:15:31:21 +0000] "GET /prod/app/ HTTP/1.1" 200 5324 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:106.0) Gecko/20100101 Firefox/106.0" "-"
# fails due to css file not found
my-server-reverse_proxy-1 | 2022/10/28 15:31:21 [error] 7#7: *1 open() "/usr/share/nginx/html/assets/styles.css" failed (2: No such file or directory), client: 10.10.193.8, server: my-server.com, request: "GET /assets/styles.css?m=1666209805.0 HTTP/1.1", host: "my-server.com", referrer: "https://my-server.com/prod/app/"
# fails due to javascript not found
my-server-reverse_proxy-1 | 2022/10/28 15:31:21 [error] 7#7: *1 open() "/usr/share/nginx/html/_dash-component-suites/dash/dcc/dash_core_components.v2_6_2m1666209805.js" failed (2: No such file or directory), server: my-server.com, request: "GET /_dash-component-suites/dash/dcc/dash_core_components.v2_6_2m1666209805.js HTTP/1.1", host: "my-server.com", referrer: "https://my-server.com/prod/app/"
To debug I examined the contents of my nginx container the root directory does exist:
root#4c7190ea055a:/usr/share/nginx/html# ls
404.html 40x.html 50x.html bg.jpg index.html
I am not sure which of the following is causing this error:
nginx mis-configuration (I need to specify the server block root dir somewhere else?)
plotly Dash mis-configuration (I need to tell it to cache / load somewhere else?)
nginx docker volume issue (Doesnt seem to be the issue since I can view the folder inside the container?)
Any help is greatly appreciated!