Depurar la aplicación webpack-dev-server dentro del contenedor Docker

8

Estoy usando webpack-dev-serverpara ejecutar una aplicación Nestjs dentro de un contenedor Docker. Todo está en funcionamiento, pero no puedo depurar la aplicación desde mi instancia de VS Code. Estoy tratando de exponer el puerto 9229 usando esta configuración en webpack.config.js:

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

Cuando ejecuto netstat -ldentro del contenedor, puedo ver que el nodo no está escuchando el puerto 9229:

salida netstat

Estoy exponiendo el puerto 9229 en el Dockerfile y los archivos docker-compose. El 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"]

Y el archivo 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:

Y este es el script que estoy usando para ejecutar la aplicación:

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

Mi configuración de inicio es la siguiente:

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

Y cuando ejecuto esta configuración con el contenedor en funcionamiento, recibo un mensaje que dice que VS Code no se puede conectar al proceso.

Mensaje de código VS

Entonces, mi pregunta es: ¿hay alguna forma de depurar la aplicación JavaScript / TypeScript que se ejecuta webpack-dev-serverdentro de un contenedor Docker? ¿Qué hay de malo en mi entorno?

Gracias por la ayuda.

EDITAR

Aparentemente, mi problema no tiene relación con Docker, ya que puedo reproducirlo fuera del contenedor.

Bruno Peres
fuente
1
¿ docker-compose psMuestra que se open-tuna-apiha 9229:9229atado en los puertos? Pruebe también cambiar la dirección en la configuración de vscode a localhosto 127.0.0.1.
cbr
1
Más importante aún, ¿tiene éxito en mencionar el servicio? ¿Se puede acceder a localhost: 3000 después de comenzar a depurar?
cbr
1
Ah, veo el problema, el puerto de su servidor dev es el mismo que el puerto del inspector de nodos. Querrá cambiar el puerto del servidor de desarrollo a otra cosa (8080? 9000? Cualquier cosa realmente) y pasar eso también en los archivos de compilación de docker ports. Probablemente no se inicie porque el servidor de inspección del nodo o el servidor de desarrollo webpack falla cuando intenta vincularse a: 9229, ya que ambos intentan vincularse al mismo puerto.
cbr
Hola @cubrr, gracias por la ayuda. Sí, puedo acceder a la aplicación en localhost: 3000. Y traté de usar localhosty 127.0.0.1en la configuración de VS Code. Además, cambié el 9229puerto a 9000todos los archivos y el problema persiste.
Bruno Peres
1
parece que está intentando depurarse webpack-dev-server, y después de construir el paquete, el servidor de desarrollo debe evitar la webpack --config webpack.config.jsllamada. ¿Cuál es el archivo de entrada del servidor?
MrBar

Respuestas:

0

Eche un vistazo a su configuración y asegúrese de incluir el programcampo. Y apúntelo al archivo correcto debajo node_modules.

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

Eso te ayudara a llegar.

Si desea obtener más información sobre esto, hay una conversación más larga que puede serle útil: consulte este comentario en el repositorio principal de webpack-dev-server GitHub.

idancali
fuente
Hola @idancali, gracias por tu respuesta. Lo intenté, pero tengo el mismo problema. Además, recibo una advertencia del código VS que dice que la propiedad "programa" no está permitida. Echaré un vistazo a los enlaces que publicaste.
Bruno Peres