ローカルマシンでの開発では、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の自動アタッチ機能を使ってデバッガを接続している。