在 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 ，我可以看到該節點沒有監聽 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"

那應該能讓你繼續前進。

如果您想對此有更深入的了解，有一個較長的對話可能對您有用 - 在主要webpack-dev-server GitHub 存儲庫上查看此評論。