1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

VisualStudioCode + DockerコンテナでNode.jsのリモートデバッグ実行

Last updated at Posted at 2018-11-02

#環境

ローカル

OS: Windows 10 pro 1803
VisualStudioCode: 1.28.2
node -v v10.13.0

npm -v 6.4.1

Docker ホスト

OS:Windows 10 pro 1803
Docker:
Client:
Version: 18.06.1-ce API version: 1.38 Go version: go1.10.3

Server:
Engine: Version: 18.06.1-ce API version: 1.38 (minimum version 1.12) Go version: go1.10.3 Kubernetes: Version: v1.10.3

デバッグ対象のコンテナ上で可動するnode.js
# node -v v10.12.0
# npm -v 6.4.1

事前準備

Node.jsサーバ

以下のコマンドで、node.jsを含んだイメージを使ってコンテナを作る。
docker run --name nodejs.server -p 8080:3000 -it node /bin/bash

--name オプションは付けてもつけなくても良い。付けなかったらデフォルトで名前が任意に振られる。
-pオプションはポートプロキシさせるので、適当に。
:より左側はDockerホストの受付ポート。右側は、node.jsサーバを実行したときの受付ポート。

適当なnode.jsのスクリプトともに、node [任意のjsファイル]で起動。
ローカル環境から、Webブラウザ経由で、以下のURLを参考に接続する。
http://[Docker ホストのIPアドレス]:8080

つながらない場合、以下のURLにDocker ホストの環境から接続を試す。
http://localhost:8080

これでもつながらない場合は、node.jsやコンテナの起動から見直す。
起動確認が完了すれば、一度コンテナを停止し削除しておく。

Visual Studio Code

  1. Visual Studio Codeで、.vscode ディレクトリにあるlaunch.jsonを開く。
  2. 構成の追加ボタンをクリックし、Docker: Attach to Nodeを追加。
  3. addressには、Docker ホストのIPアドレス、portには任意のポートを記載しておく。
    localRoot,RemoteRootは、デバッグ対象のjsファイルがある場所にしておく。
    launch.json.png

#デバッグ

  1. コンテナの起動
    docker run --name nodejs.server -p 8080:3000 -p 2983:2983 -it node /bin/bash
  • 1つ目の-pオプション
    node.js用のDocker ホスト側のポートと、Node.jsサーバが受け付けるポート
  • 2つ目の-pオプション
    launch.json で記載したポートと、node.jsのデバッグポート
  1. node.jsのデバッグ起動
    node --inspect=0.0.0.0:[デバッグポート] [デバッグしたいjsファイル]
    注)デバッガで接続する接続元を絞りたい場合は0.0.0.0を任意に変更してください。

  2. Visual Studio Code で、デバッグ対象のjsファイルを開いたまま、デバッガを起動
    表示→デバッグ画面に遷移後、再生ボタンの直ぐ側のドロップダウンリストから、Docker: Attach to Nodeを選択。再生ボタンをクリック。

debug.png
注)ソースコードを消してます。
4. 適当なところにブレークポイントを貼って、WebブラウザからNode.jsサーバへアクセスすると、
ブレークポイントでストップする。

※自分用メモですが、何かあればコメントをお願いします。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?