Dockerコンテナー内のwebpack-dev-serverアプリケーションをデバッグする


8

私はwebpack-dev-serverDockerコンテナー内でNestjsアプリケーションを実行するために使用しています。すべてが稼働していますが、VS Codeインスタンスからアプリケーションをデバッグできません。私はこの設定を使用して9229ポートを公開しようとしていますwebpack.config.js

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

netstat -lコンテナー内で実行すると、ノードが9229ポートをリッスンしていないことがわかります。

netstatの出力

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がプロセスに接続できないというメッセージが表示されます。

VSコードメッセージ

だから、私の質問は:webpack-dev-server Dockerコンテナー内で実行されているJavaScript / TypeScriptアプリをデバッグする方法はありますか?私の環境の何が問題になっていますか?

助けてくれてありがとう。

編集

どうやら私の問題はDockerとは関係ありません。コンテナの外で再現できるからです。


1
docker-compose psのショーopen-tuna-api9229:9229ポートにバインドされますか?vscodeの設定でアドレスをlocalhostまたはに変更してみてください127.0.0.1
cbr

1
さらに重要なのは、サービスの提供に成功するかどうかです。デバッグを開始した後、localhost:3000にアクセスできますか?
cbr

1
ああ、問題が発生しました。開発サーバーのポートはノードインスペクターのポートと同じです。開発サーバーのポートを別のポート(8080?9000?本当に何か)に変更し、それをdocker-composeファイルのにも渡しますports。:9229にバインドしようとすると、ノードのインスペクタサーバーまたはwebpack開発サーバーのいずれかが失敗するため、起動に失敗する可能性があります。両方が同じポートにバインドしようとするためです。
cbr

こんにちは@cubrr、助けてくれてありがとう。はい、localhost:3000でアプリケーションにアクセスできます。そして、私はVS Code構成でを使用localhostしてみ127.0.0.1ました。また、9229ポートを9000すべてのファイルに変更しましたが、問題は解決しません。
Bruno Peres

1
それはあなたwebpack-dev-server自身をデバッグしようとしているように見え、すでにバンドルを構築した後、開発サーバーはwebpack --config webpack.config.js呼び出しを回避することを意図しています。サーバーのエントリファイルは何ですか?
MrBar

回答:


0

設定を見て、programフィールドが含まれていることを確認してください。そして、それをの正しいファイルにポイントしますnode_modules

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

これでうまくいくはずです。

これについてより深い洞察が必要な場合は、役立つと思われるより長い会話があります。メインのwebpack-dev-server GitHubリポジトリでこのコメントを確認してください。


こんにちは@idancali、回答ありがとうございます。試しましたが、同じ問題が発生します。また、VSコードから「program」プロパティが許可されていないという警告が表示されます。投稿したリンクを見ていきます。
ブルーノペレス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.