Debug webpack-dev-server application inside Docker container

Question

I'm using webpack-dev-server to run an Nestjs application inside a Docker container. All is up and running, but I can't debug the application from my VS Code instance. I'm trying to expose the 9229 port using this configuration on the webpack.config.js:

devServer: {
  host: '0.0.0.0',
  port: 9229,
},

When I run netstat -l inside the container I can see that node is not listening the 9229 port:

I'm exposing the port 9229 in the Dockerfile and docker-compose files. The Dockerfile:

FROM node:12.16.1-alpine
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn
COPY . .
EXPOSE 3000
EXPOSE 9229
CMD [ "yarn", "run", "start:debug"]

And the docker-compose.yml file:

version: '3.7'
services:
    open-tuna-api:
        image: opentunaapi
        ports:
            - 3000:3000
            - 9229:9229
        volumes: 
            - ./dist:/usr/src/app/dist
            - ./:/usr/src/app
        networks:
            - open-tuna-network
        expose: 
            - 9229
networks:
    open-tuna-network:

And this is the script I'm using to run the application:

"start:debug": "webpack --config webpack.config.js && node --inspect=0.0.0.0:9229 node_modules/webpack-dev-server/bin/webpack-dev-server.js",

My launch configuration is as follow:

{
    "name": "Attach",
    "preLaunchTask": "compose-up",
    "stopOnEntry": true,
    "type": "node",
    "request": "attach",
    "port": 9229,
    "cwd": "${workspaceFolder}", // the root where everything is based on
    "localRoot": "${workspaceFolder}", // root of all server files
    "remoteRoot": "/usr/src/app", // workspace path which was set in the dockerfile
    "outFiles": ["${workspaceFolder}/dist/**/*.js"], // all compiled JavaScript files
    "protocol": "inspector",
    "restart": true,
    "sourceMaps": true,
    "trace": "verbose",
    "address": "0.0.0.0",
    "skipFiles": [
        "<node_internals>/**"
    ],
}

And when I run this configuration with the container up and running I'm receiving a message saying that VS Code cannot connect to the process.

So, my question is: is there a way to debug JavaScript / TypeScript app running on webpack-dev-server inside a Docker container? What is wrong in my environment?

Thanks for the help.

EDIT

Apparently my issue has no relation with Docker, since I can reproduce it outside of the container.

Does docker-compose ps show that open-tuna-api has 9229:9229 bound in Ports? Try also changing the address in vscode's config to localhost or 127.0.0.1. — cbr
More importantly, does it succeed in bringing up the service? Can you access localhost:3000 after beginning to debug? — cbr
Ah, I see the issue, your devserver's port is the same as the node inspector port. You'll want to change the dev server's port to something else (8080? 9000? anything really) and pass that through as well in the docker-compose file's ports. It probably fails to start because either node's inspector server or the webpack dev server fails when attempting to bind to :9229 - since they both try to bind to the same port. — cbr
Hi @cubrr, thanks for the help. Yes, I can access the application on localhost:3000. And I tried using localhost and 127.0.0.1 in the VS Code config. Also, I changed the 9229 port to 9000 over all the files and the problem persists. — Bruno Peres
it looks like you are trying to debug webpack-dev-server itself, and after already building the bundle, the dev server is meant to avoid the webpack --config webpack.config.js call. what's the server's entry file? — MrBar

idancali idancali · Accepted Answer · 2020-03-10T06:36:06

Have a look at your config and make sure you include the program field. And point it to the right file under node_modules.

"program": "${workspaceRoot}/node_modules/webpack-dev-server/bin/webpack-dev-server.js"

That should get you going.

If you want more insight into this, there's a longer conversation that you might find useful - check out this comment on the main webpack-dev-server GitHub repo.

Debug webpack-dev-server application inside Docker container

1 Answers