ローカルマシンでの開発では、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
}
]
}
補足
ts-nodeはv7以前ではsource mapのキャッシュを出力できたが、v8で廃止された。この議論については以下のIssueが参考になる。
参考
-
Debugging TypeScript in VS Code without compiling, using ts-node
- Visual Studio Codeのデバッグ起動設定(launch.json)からts-nodeを実行する方法が紹介されている。
-
Create a server with Nodemon + Express + Typescript
- nodemonでソースファイルの変更を検知してts-nodeを実行する方法が紹介されている。Visual Studio Codeの自動アタッチ機能を使ってデバッガを接続している。