I have a angular frontend and a node.js backend, which I want to deploy for clients in different countries. We need for every country one frontend & backend container. So the idea is that nginx should redirect to the correct container inside the docker compose environment based on the path:

example.com/us/frontend -> us frontend container

example.com/us/backend -> us backend container

example.com/fr/frontend -> fr frontend container

example.com/fr/backend -> fr backend container ...

I've implemented so far:

docker-compose.yml

version: "3"
services:
  test-proxy:
    container_name: test-proxy
    image: nginx:latest
    depends_on:
      - example-frontend-us # References the service name.
    volumes:
      - ./config/nginx.conf:/etc/nginx/nginx.conf
      - ./content:/usr/share/nginx/html
    ports:
      - 80:80 # Publishs only port 80 outside of docker compose context.

  example-frontend-us:
    container_name: example-frontend-us
    image: angular-frontend
    ports:
      - 8081:80

nginx.conf:

 http {
    server {

        listen 80;
        server_name localhost 127.0.0.1;

        location = / {
            root /usr/share/nginx/html;
            try_files $uri /index.html;
        }
        

        location /us/frontend {
            proxy_pass          http:/example-frontend-us:8081;
            proxy_set_header    X-Forwarded-For $remote_addr;
        }
    }
}

If I open the browser on localhost/us/frontend I get a 502 Bad Gateway response

If I open the browser on localhost:8081 the frontend is working.

What is wrong here? How can I achieve that nginx is routing to the correct containers?