Issue with Docker-compose and nginx - docker

Question

Please assist
I'm trying to run both react.js and nest.js on http://localhost:3000 with docker-compose and Nginx, however
my react.js app isn't binding correctly. When I visit the link, I only see the nginx welcome page.
This is my docker-compose.yaml
version: "3.6"
services:
database:
image: postgres:13.1-alpine
env_file:
- ./database/.env
volumes:
- "db-data:/var/lib/postgresql/data"
networks:
- challenge
ports:
- "5432:5432"
backend:
build:
context: $PWD/../../backend
dockerfile: $PWD/backend/Dockerfile
volumes:
- ./backend/.env:/app/.env
- ../../backend/src:/app/src
- storage:/app/storage
ports:
- 3000
networks:
- challenge
depends_on:
- database
env_file:
- ./backend/.env
environment:
- FORCE_COLOR=1
frontend:
build:
context: $PWD/../../web
dockerfile: $PWD/frontend/Dockerfile
ports:
- 3001
networks:
- challenge
depends_on:
- backend
env_file:
- ./frontend/.env
volumes:
- ../../web/src:/app/frontend/src
nginx:
image: nginx
volumes:
- ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
ports:
- 3000:80
depends_on:
- backend
- frontend
networks:
- challenge
volumes:
db-data:
storage:
networks:
challenge:
And this is my Dockerfile for the React
FROM node:14.18.1-alpine3.14 as build
WORKDIR /app/frontend
COPY package.json /app/frontend/
COPY yarn.lock /app/frontend/
RUN yarn install --frozen-lockfile
COPY . /app/frontend
RUN yarn run build
FROM nginx:1.21.3-alpine
COPY --from=build /app/frontend/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Also, this is my nginx.conf
events {
worker_connections 1024;
}
http {
client_max_body_size 1000M;
server {
gzip on;
gzip_disable "msie6";
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
listen 80;
server_name localhost;
location /api/v1 {
proxy_pass http://backend:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cache_bypass $http_upgrade;
}
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
Please assist as I've tried changing the ports, and exposing different ports but that doesn't seem to work.

Answer 1

You have two nginx servers: one inside frontend service and another one inside nginx service. Is it intended?
I suppose you need to access the nginx service provided by frontend so in that case you need to go to:
http://localhost:3001
and map 3001:80 because 80 is the exposed port in that image.