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

my code

or

docker-compose file

version: "3"  services:    api:      build:        context: api        dockerfile: Dockerfile.dev      ports:        - 3000:3000      volumes:        - ./api:/app    client:      build:        context: client        dockerfile: Dockerfile.dev      ports:        - 3001:3000      volumes:        - ./client:/app    nginx:      restart: always      build:        context: nginx        dockerfile: Dockerfile.dev      ports:        - 3002:80      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 /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  COPY default.dev.conf /etc/nginx/conf.d/default.conf  

1. on visiting http://localhost:3002/api - i get Cannot GET /api (magically works now i didnt change anything)
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

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