Dockerコンテナで起動したAngularをVSCodeでデバッグ

VSCodeのlaunch.jsonで手間取ってしまったのでメモ。

前提

• アプリはdockerコンテナ内の /app/front ディレクトリで公開
• 公開URLはlocalhostではなく http://myapp.develop/ で公開。npm hotelを使ってlocalhost:port に独自のローカルドメインを付与しているだけなので通常のlocalhost:4200でも特に問題ない。ちなみに npm hotel は複数の案件を手がけなければならないときなど非常に便利です。各サービスごとに自由にドメインを設定できるし、今時ならローカル開発時からSSLでやるのも珍しくないでしょうから重宝します。

VSCode launch.jsonの設定

VSCodeが生成するChrome用のデバッグ設定は以下のようになる。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

私の環境の場合まず、独自ローカルドメインでホストしているのでurlを次のように変更する必要がある。

"url": "http://myapp.develop",

Angularは内部でwebpackを使ってソースをバンドルしてるため以下の追加設定をlaunch.jsonに追加する必要がある。

.vscode/launch.json

    "sourceMapPathOverrides": {
    "webpack:////app/front/*": "${webRoot}/*"
    }

VSCodeが自動で展開してくれる sourceMapPathOverrides のデフォルトは以下のようになる。
通常の開発では作業ディレクトリがそのまま公開URLのルートになるのでこのデフォルトのままでもいけるようだがdockerコンテナで公開している場合などは適宜ソースマップのパスを変換してやる必要がある。

.vscode/launch.json

      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*",
        "meteor://💻app/*": "${webRoot}/*"
      }

最終的に出来があるlaunch.jsonは

.vscode/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://myapp.develop",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:////app/front/*": "${webRoot}/*"
      }
    }
  ]
}

これでVSCodeでF5を押せばブラウザが起動してVSCodeでブレークポイントをおいたりデバッグが可能になる。

ソースマップのオーバーライドパスがよくわからない場合は、Chromeの開発ツールでsourceの箇所を開いて適当なソースファイルがどのようなパスになっているか確認してみればすぐ分かる。

この場合だと、webpack:////app/front/ をワークスペースのパスで置き換えるように指定してあげればよい。