title: node and react app with nginx connectivity issue
body: <p>i am trying to setup a node + react app for local develpoment environment using docker + nginx</p>
  <p>nginx is running on 3002</p>
  <ol>
  <li>for route /api strip off the /api and redirect to service api i.e. the node app</li>
  <li>redirect other routes to service client i.e. react app</li>
  </ol>
  <p><strong>docker-compose file</strong></p>
  <p>version: &quot;3&quot;</p>
  <pre><code>services:
    api:
      build:
        context: api
        dockerfile: Dockerfile.dev
      ports:
        - 3000:3000
      volumes:
        - ./api:/app
  
    client:
      stdin_open: true
      build:
        context: client
        dockerfile: Dockerfile.dev
      ports:
        - 3001:3000
      volumes:
        - ./client:/app
  
    nginx:
      restart: always
      build:
        context: nginx
        dockerfile: Dockerfile.dev
      ports:
        - 3002:80
      volumes:
        - ./nginx/default.dev.conf:/etc/nginx/conf.d/default.conf
      depends_on:
        - client
        - api
  </code></pre>
  <p><strong>nginx default.dev.conf</strong></p>
  <pre><code>upstream api {
      server api:3000;
  }
  
  upstream client {
      server client:3001;
  }
  
  server {
      listen 80;
  
      location / {
          proxy_pass http://client;
      }
  
      location /sockjs-node {
          proxy_pass http://client;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection &quot;Upgrade&quot;;
      }
  
      location /api {
          rewrite /api/(.*) /$1;
          proxy_pass http://api/;
      }
  }
  </code></pre>
  <p><strong>client Dockerfile.dev</strong></p>
  <pre><code>FROM node:alpine
  
  WORKDIR /app
  
  CMD [&quot;npm&quot;, &quot;run&quot;, &quot;start&quot;]
  </code></pre>
  <p><strong>api Dockerfile.dev</strong></p>
  <pre><code>FROM node:alpine
  
  WORKDIR /app
  
  CMD [&quot;npm&quot;, &quot;run&quot;, &quot;dev&quot;]
  </code></pre>
  <p><strong>nginx Dockerfile.dev</strong></p>
  <pre><code>FROM nginx
  </code></pre>
  <ol>
  <li>on visiting http://localhost:3002/api - works</li>
  <li>on visiting http://localhost:3002 - i get 502 Bad Gateway</li>
  <li>http://localhost:3000 and http://localhost:3001 work</li>
  <li>on <code>docker exec -it bytecode_api_1 sh</code> (i.e. going inside terminal of api container) <code>ping client</code> and <code>ping nginx</code> work</li>
  <li>the issue is in the connection between reat-app and nginx i.e. neither is reqeust from react going to nginx and nor is a request to http://localhost:3002 being directed to react-server</li>
  </ol>
  <p>EDIT: figured it out with the help of some good people on discord, i had made a silly mistake, it should be</p>
  <pre><code>upstream client {
      server client:3000;
  }
  </code></pre>
  <p>i.e. the container port</p>