在Docker容器中调试webpack-dev-server应用程序

Question

bounty到期明天。该问题的答案有资格获得+ 100声望赏金。Bruno Peres想要引起更多关注对此问题。

我正在使用webpack-dev-server在Docker容器中运行Nestjs应用程序。一切都已启动并且正在运行，但是我无法从VS Code实例调试应用程序。我正在尝试使用webpack.config.js上的此配置公开9229端口：

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

当我在容器内运行netstat -l时，我可以看到该节点没有监听9229端口：

我公开了Dockerfile和docker-compose文件中的端口9229。 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"]

和docker-compose.yml文件：

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:

这是我用来运行应用程序的脚本：

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

我的启动配置如下：

{
    "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>/**"
    ],
}

并且当我在容器启动并运行的情况下运行此配置时，我收到一条消息，提示VS Code无法连接到该进程。

所以，我的问题是：有没有办法调试在Docker容器内的webpack-dev-server上运行的JavaScript / TypeScript应用程序？我的环境有什么问题？

感谢您的帮助。

编辑

显然，我的问题与Docker没有关系，因为我可以在容器外复制它。

Answer 1

查看配置，并确保包括program字段。并将其指向node_modules下的正确文件。

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

那应该让你走。

[如果您想对此有更多的了解，则可能有一段较长的对话可能对您有用-在主要的this comment GitHub存储库上查看webpack-dev-server。