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

Question

我正在使用webpack-dev-server在Docker容器内运行一个Nestjs应用程序。所有内容都已经启动并运行，但是我无法从我的VS Code实例中调试该应用程序。我尝试使用以下配置在webpack.config.js中暴露9229端口：

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

当我在容器内运行 netstat -l 命令时，我发现 Node 并未监听 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无关，因为我可以在容器外重现它。

- Bruno Peres

---

docker-compose ps 显示 open-tuna-api 是否在端口中绑定了 9229:9229？同时尝试将 VSCode 配置中的地址更改为 localhost 或 127.0.0.1。 - cbr

更重要的是，它能否成功启动服务？开始调试后，您是否可以访问 localhost：3000？ - cbr

啊，我明白了问题所在，你的开发服务器端口与节点检查器端口相同。你需要将开发服务器端口更改为其他端口（8080？9000？任何端口都可以），并在docker-compose文件的“ports”中传递它。它可能无法启动，因为当尝试绑定到：9229时，无论是节点检查器服务器还是webpack开发服务器都会失败 - 因为它们都尝试绑定到相同的端口。 - cbr

看起来你正在尝试调试webpack-dev-server本身，并且在已经构建了捆绑包之后，开发服务器应该避免调用webpack --config webpack.config.js。那么服务器的入口文件是什么？ - MrBar

不是为了解决你的问题，而是查看你的webpack-dev-server用户“nltp”的选项： netstat -nltp - SofienM

Answer 1

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

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

这应该能让你开始了。

如果你想更深入地了解这个问题，可以查看主要的webpack-dev-server GitHub 仓库上的this comment，其中有更长的讨论，可能会对你有所帮助。

- idancali

---

嗨，@idancali，感谢您的回答。我尝试了，但是我遇到了相同的问题。此外，我在VS代码中收到了一个警告，指出“program”属性不被允许。我会查看您发布的链接。 - Bruno Peres