TypeScript
Docker
VisualStudioCode
@unhurried

Docker上で動くTypeScriptアプリをVisual Studio Codeでデバッグする

TypeScriptDockerVisualStudioCode

ローカルマシンでの開発では、TypeScriptをtscでトランスパイルしてnodeで実行するのではなく、ts-nodeを使ってTypeScriptのまま実行する方法が主流になっている。Visual Studio Codeを使う場合も、ts-nodeのドキュメントの起動設定でts-nodeを起動すれば問題なくデバッグ実行ができる。

ところが、Dockerコンテナでts-nodeを実行してリモートデバッグでVIsual Studio Codeを接続する場合は、TypeScriptファイル中に設定したブレークポイントが効かない。原因は特定できていないが、ts-nodeではsouce mapファイルが出力されないため、TypeScriptファイルとのリンクができていないようである。（参考：Visual Studio Code - Debugging TypeScript）

関連しているGitHub Issuesは以下の通り。

現時点では、以下の設定のように従来通りtscを使うことで、Visual Studio Codeでデバッグ実行できる。


  • package.json（抜粋）

  {

    "scripts": {

      "serve": "tsc && node --inspect=0.0.0.0:9229 dist/server.js",

      "watch": "nodemon -L -w src -e ts -x \"npm run serve\""

    }

  }


  • tsconfig.json（抜粋）

  {

    "compilerOptions": {

      "target": "es5",

      "module": "commonjs",

      "sourceMap": true,

      "outDir": "dist"

    }

  }


  • launch.json

  {

    "version": "0.2.0",

    "configurations": [

      {

        "name": "Docker: Attach to Node",

        "type": "node",

        "request": "attach",

        "localRoot": "Visual Studio Code側のアプリルート",

        "remoteRoot": "Dockerコンテナ側のアプリルート",

        "address": "localhost",

        "port": 9229,

        "protocol": "inspector",

        "restart": true

      }

    ]

  }


参考

Edit request
2