Debuggen Sie die Webpack-Dev-Server-Anwendung im Docker-Container

Ich verwende webpack-dev-server, um eine Nestjs-Anwendung in einem Docker-Container auszuführen. Alles ist in Betrieb, aber ich kann die Anwendung nicht von meiner VS-Code-Instanz aus debuggen. Ich versuche, den 9229-Port mithilfe dieser Konfiguration auf dem webpack.config.jsfolgenden Konto freizulegen :

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

Wenn ich netstat -lim Container laufe, kann ich sehen, dass der Knoten den 9229-Port nicht überwacht:

Ich mache den Port 9229 in den Dockerfile- und Docker-Compose-Dateien verfügbar. Die Docker-Datei:

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"]

Und die Datei 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:

Und dies ist das Skript, mit dem ich die Anwendung ausführe:

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

Meine Startkonfiguration lautet wie folgt:

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

Und wenn ich diese Konfiguration mit laufendem Container ausführe, erhalte ich die Meldung, dass VS Code keine Verbindung zum Prozess herstellen kann.

Meine Frage lautet also: Gibt es eine Möglichkeit, die JavaScript / TypeScript-App zu debuggen, die webpack-dev-serverin einem Docker-Container ausgeführt wird? Was ist in meiner Umgebung falsch?

Danke für die Hilfe.

BEARBEITEN

Anscheinend hat mein Problem keine Beziehung zu Docker, da ich es außerhalb des Containers reproduzieren kann.

— Bruno Peres
quelle

Zeigt docker-compose ps, dass in Ports gebunden open-tuna-apihat 9229:9229? Versuchen Sie auch, die Adresse in der Konfiguration von vscode in localhostoder zu ändern 127.0.0.1.

— 2.

Noch wichtiger ist, gelingt es, den Dienst aufzurufen? Können Sie nach dem Debuggen auf localhost: 3000 zugreifen?

— 2.

Ah, ich sehe das Problem, der Port Ihres Devservers ist der gleiche wie der Port des Node Inspector. Sie sollten den Port des Dev-Servers in etwas anderes ändern (8080? 9000? Wirklich alles) und dies auch in den Docker-Compose-Dateien weitergeben ports. Es kann wahrscheinlich nicht gestartet werden, da entweder der Inspector-Server des Knotens oder der Webpack-Entwicklungsserver beim Versuch, eine Verbindung herzustellen, fehlschlägt: 9229 - da beide versuchen, an denselben Port zu binden.

— 2.

Hallo @cubrr, danke für die Hilfe. Ja, ich kann auf localhost: 3000 auf die Anwendung zugreifen. Und ich habe versucht, localhostund 127.0.0.1in der VS-Code-Konfiguration. Außerdem habe ich den 9229Port auf 9000über alle Dateien geändert und das Problem besteht weiterhin.

— Bruno Peres

Es sieht so aus, als würden Sie versuchen, sich webpack-dev-serverselbst zu debuggen. Nachdem Sie das Bundle bereits erstellt haben, soll der Dev-Server den webpack --config webpack.config.jsAufruf vermeiden . Wie lautet die Eingabedatei des Servers?

— MrBar

Schauen Sie sich Ihre Konfiguration an und stellen Sie sicher, dass Sie das programFeld einschließen . Und zeigen Sie auf die richtige Datei unter node_modules.

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

Das sollte dich zum Laufen bringen.

Wenn Sie mehr darüber erfahren möchten, gibt es eine längere Konversation, die Sie möglicherweise nützlich finden - lesen Sie diesen Kommentar auf dem GitHub-Repo des Webpack-Dev-Servers .

— idancali
quelle

Hallo @idancali, danke für deine Antwort. Ich habe es versucht, aber ich bekomme das gleiche Problem. Außerdem erhalte ich eine Warnung vom VS-Code, dass die Eigenschaft "program" nicht zulässig ist. Ich werde mir die von Ihnen geposteten Links ansehen.

— Bruno Peres