Depurar aplicativo webpack-dev-server dentro do contêiner Docker

8

Estou usando webpack-dev-serverpara executar um aplicativo Nestjs dentro de um contêiner do Docker. Tudo está instalado e funcionando, mas não consigo depurar o aplicativo da minha instância do VS Code. Estou tentando expor a porta 9229 usando esta configuração no webpack.config.js:

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

Quando corro netstat -ldentro do contêiner, vejo que o nó não está escutando a porta 9229:

saída netstat

Estou expondo a porta 9229 nos arquivos Dockerfile e docker-compose. O arquivo Docker:

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

E o arquivo 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:

E este é o script que estou usando para executar o aplicativo:

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

Minha configuração de inicialização é a seguinte:

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

E quando executo essa configuração com o contêiner instalado, estou recebendo uma mensagem dizendo que o VS Code não pode se conectar ao processo.

Mensagem do código VS

Portanto, minha pergunta é: existe uma maneira de depurar o aplicativo JavaScript / TypeScript em execução webpack-dev-serverdentro de um contêiner do Docker? O que há de errado no meu ambiente?

Obrigado pela ajuda.

EDITAR

Aparentemente, meu problema não tem relação com o Docker, pois posso reproduzi-lo fora do contêiner.

Bruno Peres
fonte
1
Será que docker-compose psmostram que open-tuna-apitem 9229:9229ligado nos portos? Tente também alterar o endereço na configuração do vscode para localhostou 127.0.0.1.
cbr
1
Mais importante, consegue trazer o serviço? Você pode acessar o localhost: 3000 após iniciar a depuração?
cbr
1
Ah, entendi o problema, a porta do seu devserver é a mesma da porta do inspetor do nó. Você desejará alterar a porta do servidor de desenvolvimento para outra (8080-9000? Qualquer coisa realmente) e passar isso também nos arquivos do docker-compose ports. Provavelmente, falha ao iniciar porque o servidor inspetor do nó ou o servidor de desenvolvimento webpack falha ao tentar se conectar a: 9229 - pois ambos tentam se conectar à mesma porta.
cbr
Olá @cubrr, obrigado pela ajuda. Sim, eu posso acessar o aplicativo no localhost: 3000. E eu tentei usar localhoste 127.0.0.1na configuração do código VS. Além disso, mudei a 9229porta para 9000todos os arquivos e o problema persiste.
Bruno Peres
1
parece que você está tentando se depurar webpack-dev-servere, depois de criar o pacote, o servidor dev deve evitar a webpack --config webpack.config.jschamada. qual é o arquivo de entrada do servidor?
MrBar 4/03

Respostas:

0

Dê uma olhada na sua configuração e certifique-se de incluir o programcampo. E aponte para o arquivo certo em node_modules.

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

Isso deve fazer você ir.

Se você quiser mais informações sobre isso, há uma conversa mais longa que você pode achar útil - confira este comentário no repositório principal do GitHub do webpack-dev-server .

idancali
fonte
Olá @idancali, obrigado pela sua resposta. Eu tentei, mas estou tendo o mesmo problema. Além disso, estou recebendo um aviso do código VS dizendo que a propriedade "program" não é permitida. Vou dar uma olhada nos links que você postou.
Bruno Peres