Dockerコンテナ上のNode.jsアプリをVS Codeでデバッグ

今回はDockerコンテナでのNode.jsをVS Codeでデバッグする手順です。

前提

VS Code レシピのサンプルコードを題材にしています。

VS Codeレシピ
https://github.com/Microsoft/vscode-recipes/tree/master/Docker-TypeScript

またNode.jsのバージョンがV7以降を想定しています。
(以前のバージョンでは、異なる部分があるため)

(例) Node.jsのバージョン確認方法
docker-compose exec web node --version
v8.15.1

Node Inspectorを有効にする

Node起動時、「–inspect」オプションを付加し、
NodeのInsepctorを有効にします。
InsepctorとはNodeのデバッグ用プロセスのことです。

Inspector
https://nodejs.org/en/docs/guides/debugging-getting-started/#enable-inspector

以下ではInspectorをデバッグ用ポート(9222)でlistenさせています。

package.json
  "scripts": {
    "postinstall": "tsc -p ./src",
    "watch": "tsc -w -p ./src",
    "debug": "nodemon --watch ./dist --inspect=0.0.0.0:9222 --nolazy ./dist/index.js",
    "docker-debug": "docker-compose up",
    "start": "node ./dist/index.js"
  },

またdocker-compose upでnpm run debugを実行させています。

docker-compose.yml
version: "2"

services:
  web:
    build: .
    command: npm run debug
    volumes:
      - ./dist:/server/dist
    ports:
      - "3000:3000"
      - "9222:9222"

VS Codeのデバッガを設定

VS Codeのデバッガの設定ファイル(launch.json)にて
Node.jsにアタッチ(接続)する設定を追加。

launch.json
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Docker",
      "preLaunchTask": "tsc-watch",
      "port": 9222,

デバッガ起動

docker-compose upでコンテナを起動後
VS Codeデバッガ左上の緑の矢印をクリック。

ブレイクポイントを追加すると処理が中断。
(行が黄色くなっている)

マウスカーソルを当てることで変数確認が可能。

ステップ実行も可能。

ご覧いただきありがとうございました。
間違い等がありましたらご指摘願います。

コメントする

メールアドレスが公開されることはありません。