node and react app with nginx connectivity issue

i am trying to setup a node + react app for local develpoment environment using docker + nginx

nginx is running on 3002

1. for route /api strip off the /api and redirect to service api i.e. the node app
2. redirect other routes to service client i.e. react app

docker-compose file

version: "3"

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  

nginx default.dev.conf

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 "Upgrade";      }        location /api {          rewrite /api/(.*) /$1;          proxy_pass http://api/;      }  }  

client Dockerfile.dev

FROM node:alpine    WORKDIR /app    CMD ["npm", "run", "start"]  

api Dockerfile.dev

FROM node:alpine    WORKDIR /app    CMD ["npm", "run", "dev"]  

nginx Dockerfile.dev

FROM nginx  

1. on visiting http://localhost:3002/api - works
2. on visiting http://localhost:3002 - i get 502 Bad Gateway
3. http://localhost:3000 and http://localhost:3001 work
4. on docker exec -it bytecode_api_1 sh (i.e. going inside terminal of api container) ping client and ping nginx work
5. 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

EDIT: figured it out with the help of some good people on discord, i had made a silly mistake, it should be

upstream client {      server client:3000;  }  

i.e. the container port

https://stackoverflow.com/questions/66083317/node-and-react-app-with-nginx-connectivity-issue February 07, 2021 at 08:12AM