I am trying to connect a react frontend to a deployed node js backend which also has a socket.io connection. this is working fine locally.
But when deploying and connecting to it, it is not making the connection.

I have provided the following code snippets.

• frontend code
• backend code
• nginx server configuration

Frontend code

import { io } from "socket.io-client";

const WS = "http://dev.abc.def.com"; 
const options = {
  path: "/socket.io",
  transports: ['websocket'], 
};

export const ws = io(WS, options); 

Backend code

const app = express();

// cors
app.use(cors());

//data parsing
app.use(express.json({ limit: "1024kb" }));
app.use(express.urlencoded({ limit: "1024kb", extended: false }));

app.use(morgan("dev"));
app.use(helmet());

// Route config
app.use("/api/v1", baseRouter);

const port = process.env.APP_PORT ?? 3200;

// express server
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

const server = http.createServer(app);
const socketPort = 8080;

const io = new Server(server, {
  cors: {
      origin: "*",
      methods: ['GET', 'POST']
  },
});

io.on("connection", (socket) => {
  console.log('user is connected');

  RoomHandler(socket);

  socket.on("disconnect", () => {
      console.log('user is disconnected');
  })
})

// socket server
server.listen(socketPort, () => {
  console.log("socket server is running on", socketPort);
})

Nginx server configurations

        location /api {
                proxy_pass http://localhost:3225;
                include proxy_params;
        }

        location /socket.io {
               proxy_pass http://localhost:8080;
               include proxy_params;
               proxy_http_version 1.1;
               proxy_set_header Upgrade $http_upgrade;
               proxy_set_header Connection "upgrade";
        }

        location /peers {
                proxy_pass http://localhost:9000/peers;
                include proxy_params;
        }

May I know how to configure these setting correct. Thank you.