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は以下の通り。

• https://github.com/TypeStrong/ts-node/issues/807
• https://github.com/TypeStrong/ts-node/issues/778

現時点では、以下の設定のように従来通り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が参考になる。

• https://github.com/TypeStrong/ts-node/issues/672
• https://github.com/TypeStrong/ts-node/issues/748

参考

• 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の自動アタッチ機能を使ってデバッガを接続している。