Node.js Docker リモート接続 デバッグ 設定 VSCode

今回は、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コンテナの内容などは、

以下の記事の内容で準備済みの前提でメモさせて頂きます。

Node.js 実行環境 Docker コンテナ化

また、VsCodeでデバッグする際に、

Remote DevelopmentというExtension(拡張機能)を利用します。

DockerでNode.jsのサービスを起動しておき、VSCodeの拡張機能Remote Developmentを利用して、

リモート接続しつつ、デバッグを行います。

そのため、Extension(拡張機能)より、Remote Developmentをインストールしておく必要があります。

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追加に伴い、前列の末尾にカンマを付与します)

こちらは用途に応じて、変更頂ければと思います。

Node.js デバッグガイド

{
    "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 Node.js package.json

 


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

VScode Docker

 


リモート接続 開始

Dockerコンテナが起動したら、

VsCodeの左下に表示されている、Open a Remote Windowのマークをクリックします。

Open a Remote Window

Open a Remote Window

クリックするとリモート接続方法の候補が表示されますので、

今回は、Remote-Containers: Open Folder in Container…を選択します。

Remote-Containers: Open Folder in Container...

リモート接続先と同様の構成であるフォルダを指定します。

今回の場合、デバッグ対象のjsが配置されているsrcフォルダを指定します。

Remote-Containers: Open Folder in Container Select

 

しばらくすると、VScodeがリモート接続に開き直されます。

Remote-Containers

初回などは、開かれるまでに数分時間がかかる場合があります。

Starting Dev Container show log

完全に読み込まれると、選択したフォルダがルートとして表示されます。

 

VsCode通常時(ローカル表示)と同様に、配置されているファイルなども確認できます。

Remote-Containers: Open Folder in Container

 


デバッグ開始

デバッグを開始するために、試しにブレークポイントを設置します。

今回の場合、事前に用意していたindex.jsに幾つかのブレークポイントを設置します。

ブレークポイントは、行番号の左側をクリックすれば設置できます。

Remote-Containers: breakpoint

次に、RUN AND DEBUGの部分から、Run and Debugボタンをクリックします。

VSCode Run and Debug

クリックすると、デバッグ設定の選択候補が表示されますので、

今回は、Node.jsを選択します。

VSCode debug node.js select

選択後、デバッグ準備が整った状態になります。

Run and Debug VScode remote

DEBUG CONSOLEの部分に、デバッグ設定として読み込まれているjsファイル名と、

アドレス・ポート名が表示されます。

DEBUG CONSOLE

このアドレス・ポート名を、ブラウザ等でアクセスするとデバッグを行えます。

http access debug

ブラウザのURL欄にて入力してアクセスすると、早速ブレークポイントの部分で処理が停止されます。

RUN AND DEBUG、VARIABLESの部分で、変数の内容を確認することができますし、

(変数名にカーソルを当てても内容が表示されます)

VScode remote debug step go

Step Over(F10)やStep Into(F11)などで、ステップ実行することもできます。

VScode remote debug step go

今回の場合、全て処理を流し切ると、Hello Worldの文字がブラウザに表示されます。

Hello World

デバッグを終了する際には、停止ボタンから終了可能です。

VScode remote debug stop

 


リモート接続 終了

リモート接続を終了して、元のVScodeの表示に戻す場合には、

まず、画面左下のDev:container:Node.jsをクリックします。

クリックすると、操作の選択候補が表示されますので、

Remote-Containers: Reopen Locallyをクリックします。

Remote-Containers: Reopen Locally

VSCodeが開き直されて、通常のローカル表示に戻ります。

VScode Reopen Locally

 


 

今回のメモは以上となります。

Dockerコンテナへのリモート接続でも、

VSCodeの拡張機能を利用すれば、快適に作業できます。

デバッグも、ローカル実行と同じ要領で実行できます。

都内でエンジニアをやっています。 2017年に脱サラ(法人設立)しました。 仕事で調べたことや、気になったことをメモしています。
投稿を作成しました 173

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る