Nginx does not redirect to the correct port - docker

Question

I am using a docker-compose to run my frontend application, backend application and nginx webserver. I would like to redirect the requests to the correct port (backend or frontend), but for some reason I just get Internal Server errors.
This is my docker-compose:
version: "3"
services:
webserver:
image: nginx:alpine
ports:
- "80:80"
- "443:443"
networks:
- project
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
- ./nginx/error.log:/etc/nginx/error_log.log
- ./nginx/cache/:/etc/nginx/cache
- /etc/letsencrypt/:/etc/letsencrypt/
backend:
build:
context: ./project-backend
dockerfile: stage.Dockerfile
env_file:
- ./project-backend/environments/stage.env
volumes:
- ./project-backend/src:/usr/src/app/src
ports:
- "3000:3000"
networks:
- project
frontend:
build:
context: ./project-frontend
dockerfile: stage.Dockerfile
ports:
- "4200:80"
networks:
- project
networks:
project:
This works fine. I can access both of the frontend and backend.
This is my nginx.conf file:
events {}
http {
client_max_body_size 20m;
proxy_cache_path /etc/nginx/cache keys_zone=one:500m max_size=1000m;
server {
proxy_cache one;
proxy_cache_key $request_method$request_uri;
proxy_cache_min_uses 1;
proxy_cache_methods GET;
proxy_cache_valid 200 1y;
listen 80;
server_name localhost;
location /api {
proxy_pass http://localhost:3000/api;
rewrite ^/api(.*)$ $1 break;
}
location / {
proxy_pass http://localhost:4200;
rewrite ^/(.*)$ $1 break;
}
}
}

Answer 1

Try to reach by service name, instead of localhost.
example:
Change proxy_pass http://localhost:3000/api; -> proxy_pass http://backend:3000/api;
Change proxy_pass http://localhost:4200; -> proxy_pass http://frontend:4200;