TypeScript
Docker
VisualStudioCode

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

ローカルマシンでの開発では、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
}
]
}


参考