Docker nginx reverse proxy not load static file

Question

I am working on a project with AWS LIghtsail container and I am facing with the following problem.

I created 3 docker containers:

-NGINX port 80 -NodeJs port 5000 -Cadvisor port 8080

Lightsail container service allows you to have only one port open from which you can reach your resources, for this reason I used nginx proxy pass to make all my containers reachable on port 80.

My problem is that when I try to reach $host/containers it does not load static resources (CSS, JS, images....).

These are my nginx configs

events {}

http {
     upstream node {
         server  ${NODE_HOST}:${NODE_PORT};
         }
      upstream cad {
          server ${CAD_HOST}:${CAD_PORT};
          }

      server {
         listen 80;

           #proxy pass nodejs works  
           location / {
                proxy_pass http://node;
                      }

           #proxy pass cadvisor port8080 not work
           location /containers/ {
                proxy_pass http://cad;
                
    }
}
 }

#EV VAR

NGINX_ENVSUBST_OUTPUT_DIR=/etc/nginx
NODE_HOST=node
NODE_PORT=5000
CAD_HOST=cad
CAD_PORT=8080

I was following this AWS official guide (step 5): https://aws.amazon.com/it/getting-started/hands-on/setup-an-nginx-reverse-proxy/

Screenshot

Answer 1

Try:

http {

    upstream node {
        server ${NODE_HOST}:${NODE_PORT};
    }

    upstream cad {
        server ${CAD_HOST}:${CAD_PORT};
    }

    server {
        listen 80;

        location / {
            proxy_pass http://node;
        }

        location @cad {
            proxy_pass http://cad;
        }

        location /docker/ {
            alias /cadvisor/docker/;
        }

        location /containers/ {
            alias /cadvisor/containers/;

            try_files $uri $uri/ @cad;
        }
    }

}

and check your logs after