Vite React not working with docker Nginx, throwing connection refused

I'm trying to put my application in containers. Currently, I'm using React with Vite, a Django Backend and an Nginx as the server. The Django part is working fine, I'm able to make requests through Nginx and deliver responses. But, when I try to make requests to Vite, Nginx throws the error: 2023/07/27 21:37:00 [error] 10#10: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.25.0.1, server: _, request: "GET / HTTP/1.1", upstream: "http://172.25.0.2:5137/", host: "localhost".

My docker-compose.yml:

version: '3.8'

services:
  api:
    container_name: api
    build:
      context: ./api
      dockerfile: Dockerfile
    expose:
      - 8000
    env_file:
      - .env.dev

  app:
    container_name: app
    build:
      context: ./app
      dockerfile: Dockerfile
    expose:
      - 5137

  nginx:
    container_name: server
    image: nginx:latest
    volumes:
      - ./nginx/:/etc/nginx/conf.d/
    command: "/bin/sh -c 'while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"
    ports:
      - "80:80"
    depends_on:
      - api
      - app

My vite.config.js:

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        watch: {
            usePolling: true,
        },
        host: true,
        strictPort: true,
        port: 5173,
    }
})

My Dockerfile:

FROM node:latest

WORKDIR /usr/src/app

COPY package.json /usr/src/app/
COPY package-lock.json /usr/src/app/
RUN npm ci

COPY . /usr/src/app/

CMD ["npm", "run", "dev"]

My nginx.conf:

upstream api {
    server api:8000;
}

upstream app {
    server app:5137;
}

server {

    server_name _;

    listen 80;
    listen [::]:80;

    location /api/ {
        proxy_pass http://api;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
        client_max_body_size 25M;
    }

    location / {
        proxy_pass http://app;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
        client_max_body_size 25M;
    }

}

I have tried to open the 5137 port in the Vite container to outside of the container network and access it in the browser with http://localhost:5137, but it didn't work.

Any help would be appreciated.

In your code you gave 5173 port , but you exposed and queried the 5137 port.
Change your code.

Hope that helps!