今回は、Dockerコンテナで動作させているNode.jsのデバッグを、
VSCodeでリモート接続して実行する際のメモとなります。
目次
環境
・OS：mac OS Catalina 10.15.6
・VSCode：1.44.2 Microsoft Visual Studio Code
・Remote Development：v0.20.0 VS Code Remote Development
・Node.js：12.0
前提
尚、Node.jsの実行ファイル、Dockerコンテナの内容などは、
以下の記事の内容で準備済みの前提でメモさせて頂きます。
また、VsCodeでデバッグする際に、
Remote DevelopmentというExtension(拡張機能)を利用します。
DockerでNode.jsのサービスを起動しておき、VSCodeの拡張機能Remote Developmentを利用して、
リモート接続しつつ、デバッグを行います。
そのため、Extension(拡張機能)より、Remote Developmentをインストールしておく必要があります。
package.json 調整
リモートデバッグを行うために、package.jsonを調整します。
“scripts” の部分に、”start:debug”を追加します。
"start:debug": "nodemon -L --inspect-brk=0.0.0.0:9229 src/index.js"
こちらの例では、ソース変更が発生したら自動でサーバーを再起動するように、nodemonを指定しています。
また、インスペクタクを有効にして、アドレス・ポートを指定します。
(start:debug追加に伴い、前列の末尾にカンマを付与します)
こちらは用途に応じて、変更頂ければと思います。
{
"name": "docker_node_app",
"version": "1.0.0",
"description": "Node.js on Docker",
"main": "index.js",
"scripts": {
"start": "node index.js",
"start:debug": "nodemon -L --inspect-brk=0.0.0.0:9119 src/index.js"
}
}
Docker イメージビルド コンテナ作成
package.jsonを調整したら、通常実行時と同様に、
イメージビルド → コンテナ作成を行います。
まず、Dockerfileの存在する場所で、docker buildコマンドを実行します。
docker build -t コンテナ名:タグ .
docker build -t node_debug:latest .
その後、コンテナ作成してサービスを起動します。
docker run -p ホストOS側ポート番号:コンテナOS側ポート番号 -d コンテナ名:タグ
docker run -p 8080:3000 -d node_debug:latest
リモート接続 開始
Dockerコンテナが起動したら、
VsCodeの左下に表示されている、Open a Remote Windowのマークをクリックします。
クリックするとリモート接続方法の候補が表示されますので、
今回は、Remote-Containers: Open Folder in Container…を選択します。
リモート接続先と同様の構成であるフォルダを指定します。
今回の場合、デバッグ対象のjsが配置されているsrcフォルダを指定します。
しばらくすると、VScodeがリモート接続に開き直されます。
初回などは、開かれるまでに数分時間がかかる場合があります。
完全に読み込まれると、選択したフォルダがルートとして表示されます。
VsCode通常時(ローカル表示)と同様に、配置されているファイルなども確認できます。
デバッグ開始
デバッグを開始するために、試しにブレークポイントを設置します。
今回の場合、事前に用意していたindex.jsに幾つかのブレークポイントを設置します。
ブレークポイントは、行番号の左側をクリックすれば設置できます。
次に、RUN AND DEBUGの部分から、Run and Debugボタンをクリックします。
クリックすると、デバッグ設定の選択候補が表示されますので、
今回は、Node.jsを選択します。
選択後、デバッグ準備が整った状態になります。
DEBUG CONSOLEの部分に、デバッグ設定として読み込まれているjsファイル名と、
アドレス・ポート名が表示されます。
このアドレス・ポート名を、ブラウザ等でアクセスするとデバッグを行えます。
ブラウザのURL欄にて入力してアクセスすると、早速ブレークポイントの部分で処理が停止されます。
RUN AND DEBUG、VARIABLESの部分で、変数の内容を確認することができますし、
(変数名にカーソルを当てても内容が表示されます)
Step Over(F10)やStep Into(F11)などで、ステップ実行することもできます。
今回の場合、全て処理を流し切ると、Hello Worldの文字がブラウザに表示されます。
デバッグを終了する際には、停止ボタンから終了可能です。
リモート接続 終了
リモート接続を終了して、元のVScodeの表示に戻す場合には、
まず、画面左下のDev:container:Node.jsをクリックします。
クリックすると、操作の選択候補が表示されますので、
Remote-Containers: Reopen Locallyをクリックします。
VSCodeが開き直されて、通常のローカル表示に戻ります。
今回のメモは以上となります。
Dockerコンテナへのリモート接続でも、
VSCodeの拡張機能を利用すれば、快適に作業できます。
デバッグも、ローカル実行と同じ要領で実行できます。
