How to serve two react applications with nginx and docker ? Getting 111: Connection refused and 502 Bad Gateway

Question

There are 4 docker containers running in mac os.

1. frontend app container at Port: 3000
2. frontend_admin app container at Port: 3001
3. backend app container at Port: 5055
4. nginx container at Port: 80

First I configured nginx for the frontend app and backend app. It worked well. Then I configured frontend_admin app (at Port: 3001). I want to redirect user to frontend_admin app when the url contains /admin i.e. http://localhost/admin.

So I configured nginx like below.

# Cache zone
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off;

upstream frontend {
  # server localhost:3000;
  # Container name
  server frontend:3000;
}

upstream frontend_admin {
  # server localhost:3001;
  # Container name
  server frontend_admin:3001;
}

upstream backend {
  # server localhost:5055;
  # Container name
  server backend:5055;
}

server {
  listen 80 default_server;

  server_name _;

  server_tokens off;

  gzip on;
  gzip_proxied any;
  gzip_comp_level 4;
  gzip_types text/css application/javascript image/svg+xml;

  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;

  # To serve backend
  location /api {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    # change localhost -> backend when you run in mac
    proxy_pass http://backend/api;
    proxy_redirect off;

    client_max_body_size    20m;
    client_body_buffer_size 256k;
    proxy_connect_timeout   90;
    proxy_send_timeout      90;
    proxy_read_timeout      90;
    proxy_buffers           32 4k;
  }

  # BUILT ASSETS (E.G. JS BUNDLES)
  # Browser cache - max cache headers from Next.js as build id in url
  # Server cache - valid forever (cleared after cache "inactive" period)
  # frontend app
  location /_next/static {
    proxy_cache STATIC;
    proxy_pass http://frontend;
  }

  # STATIC ASSETS (E.G. IMAGES)
  # Browser cache - "no-cache" headers from Next.js as no build id in url
  # Server cache - refresh regularly in case of changes
  # frontend app
  location /static {
    proxy_cache STATIC;
    proxy_ignore_headers Cache-Control;
    proxy_cache_valid 60m;
    proxy_pass http://frontend;
  }

  # DYNAMIC ASSETS - NO CACHE
  # frontend app
  location / {
    proxy_pass http://frontend;
  }

  # DYNAMIC ASSETS - NO CACHE
  # to redirect to frontend_admin app
  location /admin {
    rewrite /admin/(.*) /$1  break;
    proxy_pass         http://frontend_admin;
    proxy_redirect     off;
    proxy_set_header   Host $host;
  }
}

After this I am getting below error in nginx logs.

2022/11/20 10:33:58 [error] 30#30: *2 connect() failed (111: Connection refused) while connecting to upstream, client: 172.23.0.1, server: _, request: "GET /admin HTTP/1.1", upstream: "http://127.0.0.1:3001/admin", host: "localhost"
172.23.0.1 - - [20/Nov/2022:10:33:58 +0000] "GET /admin HTTP/1.1" 502 552 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36" "-"
2022/11/20 10:33:58 [error] 30#30: *2 connect() failed (111: Connection refused) while connecting to upstream, client: 172.23.0.1, server: _, request: "GET /favicon.ico HTTP/1.1", upstream: "http://127.0.0.1:3000/favicon.ico", host: "localhost", referrer: "http://localhost/admin"
172.23.0.1 - - [20/Nov/2022:10:33:58 +0000] "GET /favicon.ico HTTP/1.1" 502 552 "http://localhost/admin" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36" "-"

When I put http://localhost:3001 in browser the frontend_admin app is working well. But when I put http://localhost/admin I am getting above error logs in nginx and browser shows 502 Bad Gateway

logs in frontend_admin container

> frontend-admin@0.1.0 start
> PORT=3001 react-scripts --openssl-legacy-provider start
ℹ ｢wds｣: Project is running at http://172.23.0.3/
ℹ ｢wds｣: webpack output is served from 
ℹ ｢wds｣: Content not from webpack is served from /app/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...

Compiled successfully!
You can now view frontend-admin in the browser.
  Local:            http://localhost:3001
  On Your Network:  http://172.23.0.3:3001
Note that the development build is not optimized.
To create a production build, use npm run build.

Is this way possible or am I doing something wrong to connect two front end apps with nginx and docker ? If that is the case what will be the correct way ?

Thank you.

Edit

I have updated nginx upstream servers (replaced localhost with container name) based on @David comment.

Then I am getting this error in my browser console for http://localhost/admin

Edit 2