How to configure Webstorm node debugger with Webpack dev-server behind Nginx on Docker

Hi!

I've have the following setup:

• React application running on a Docker container on port 3000 (container port). The server is a Webpack dev-server configured to run on host 0.0.0.0 and port 3000 while public property is set to http://localhost:8080 to tell where Nginx is listening on host (see https://webpack.js.org/configuration/dev-server/#devserverpublic).
• Nginx running on a Docker container which serves traffic on port 8080 (host port) and redirects traffic to the React app.
• A docker-compose file. Nginx container exposes ports 8080:80. React container exposes ports 9229:9229 (for node debugger).

What I would like to do is to debug the React app from Webstorm. I has been able to attach the debugger from Webstorm, ma none of my breakpoints is triggered.

-----------------------------------------------------------------------------------------

This is the Nginx configuration:

upstream reactclient {
    server react_client:3000 fail_timeout=20s max_fails=100;
}

server {
    listen 80;

    location / {
        proxy_pass http://reactclient;
    }

    location /sockjs-node/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $host;

        proxy_pass http://reactclient;
        proxy_redirect off;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

-----------------------------------------------------------------------------------------

This is Webpack dev-server configuration:

devtool: 'source-map',

devServer: {
    host: '0.0.0.0',
    port: 3000,
    public: 'localhost:8080',
    contentBase: path.resolve(__dirname, 'build'),
    historyApiFallback: false,
    hot: true,
    inline: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: /node_modules/,
    },
    disableHostCheck: true,
},

---------------------------------------------------------------------------------------------

This is the docker-compose.yml file:

version: "3.7"
services:
  react_client:
    build: 
      dockerfile: Dockerfile
      context: ./react-client 
    hostname: "react_client"
    container_name: "react_client" 
    ports:
      - 9229:9229 

  nginx:
    build:
      dockerfile: Dockerfile
      context: ./nginx 
    container_name: "nginx" 
    ports:
      - 8080:80
    depends_on:
      - react_client

---------------------------------------------------------------------------------------------

This is the npm script launched when React container start:

node --inspect=0.0.0.0:9229 node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.dev.js

---------------------------------------------------------------------------------------------

Then in Webstorm I've created an Attach to Node.js/Chrome configuration with Host=localhost and port=9229. If I launch the docker-compose and this Webstorm configuration I can see that the debugger attach, but the breakpoints I've put in Webstorm are ignored.

What am I missing?