投稿日： 2019年6月18日
最終更新日： 2023年3月28日

【VSCoe】VisualStudioCodeでDockerのNode.jsにリモートデバッグしてみよう【Nust.js/Vue.js】

YouTubeも見てね♪

Anker PowerCor

Anker PowerCore モバイルバッテリー 20000mAh iPhone iPad Android

created by Rinker

Anker

¥4,990 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー！

【最新機種】GoPro hero11 Black

【日本国内正規品】 GoPro hero11 Black

created by Rinker

GoPro(ゴープロ)

¥62,000 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう！

[ノースフェイス] THE NORTH FACE メンズアウターマウンテンライトジャケット

created by Rinker

THE NORTH FACE(ザノースフェイス)

¥33,430 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です！

ペヤングソースやきそば 120g×18個

created by Rinker

ペヤング

¥2,600 (2024/04/03 21:42:16時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし！

モンスターエナジー 355ml×24本 [エナジードリンク]

アサヒ飲料モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker

モンスター

¥4,748 (2024/04/03 21:33:15時点 Amazon調べ-詳細)

脳を活性化させるにはこれ！

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

created by Rinker

スクウェア・エニックス(SQUARE ENIX)

¥3,250 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう！

MOFT X 【新型ミニマム版】 iPhone対応スマホスタンド

created by Rinker

MOFT

¥2,880 (2024/04/03 21:42:18時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！

1 Dockerコンテナ内のNuxt.jsをデバッグしてみよう
2 手順
3 終わりに

Dockerコンテナ内のNuxt.jsをデバッグしてみよう

先日、Docker環境を用いたNuxt.jsの開発環境構築についてご紹介しました。

参考

【Docker環境構築編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリングをしてみよう【Vue.js】

今回はVSCodeを用いたデバッグ方法についてご紹介したいと思います。

手順

前提

今回やりたいことは以下の通りです。

要件

VSCodeはホスト側のディレクトリを参照
Nuxt.jsはコンテナ側でデバッグ起動しているところにアタッチする
デバッガーを仕込み、ホスト側のChromeブラウザでアクセスした際にVSCode側で引っかかる

docker-compose.ymlにデバッグ用ポートの追加

まずは、docker-compose.ymlにデバッグで使用するポートを指定しましょう。

version: '3'
 
services:
  nuxt_sample_app:
    build: .
    ports:
      - "3000:3000"
      - "9229:9229" # 追加
    volumes:
      - ".:/projects"
    tty: true

version: '3'

services:

nuxt_sample_app:

build: .

ports:

- "3000:3000"

- "9229:9229" # 追加

volumes:

- ".:/projects"

tty: true

launch.jsonの作成

次にVSCodeのデバッグ起動用設定ファイルを用意しましょう。

{
    // 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": "node", // nodeを指定
            "request": "attach", // 起動済みのシステムに繋げるのでattachを指定
            "name": "Attach to Nuxt.js in Docker ", // VSCode上で表示される名称
            "port": 9229, // デバッグポートを指定
            "address": "localhost", // デバッグ先のホストを指定
            "localRoot": "${workspaceFolder}", // ホスト側のプロジェクトルートを指定(専用の変数を使用)
            "remoteRoot": "/projects/sample", // コンテナ側のプロジェクトルートを指定
            "protocol": "inspector"
        }
    ]
}

{

// 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": "node", // nodeを指定

"request": "attach", // 起動済みのシステムに繋げるのでattachを指定

"name": "Attach to Nuxt.js in Docker ", // VSCode上で表示される名称

"port": 9229, // デバッグポートを指定

"address": "localhost", // デバッグ先のホストを指定

"localRoot": "${workspaceFolder}", // ホスト側のプロジェクトルートを指定(専用の変数を使用)

"remoteRoot": "/projects/sample", // コンテナ側のプロジェクトルートを指定

"protocol": "inspector"

}

]

}

package.jsonにデバッグ起動のタスクを追加

次は、package.jsonにデバッグ起動するためのタスクを追加しましょう。

{
...
(略)
...
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "debug": "node --inspect=0.0.0.0:9229 node_modules/nuxt/bin/nuxt" // 追加
  },
...
(略)
...
}

{

...

(略)

...

"scripts": {

"dev": "nuxt",

"build": "nuxt build",

"start": "nuxt start",

"generate": "nuxt generate",

"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",

"precommit": "npm run lint",

"debug": "node --inspect=0.0.0.0:9229 node_modules/nuxt/bin/nuxt" // 追加

...

(略)

...

}

ポイントは、--inspect=0.0.0.0:9229の部分です。
ここを他の方の記事にあるように-inspect=9229だけでは、ホスト側からデバッグ接続出来ないので注意です。

確認

では、実際にデバッグしてみましょう。

まずは、コンテナ側でNuxt.jsをデバッグ起動しておきましょう。

yarn run v1.16.0
$ node --inspect=0.0.0.0:9229 node_modules/nuxt/bin/nuxt
Debugger listening on ws://0.0.0.0:9229/2a53a25c-c810-45f2-8f8c-06eb0a807023
For help, see: https://nodejs.org/en/docs/inspector

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.8.1                            │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://172.24.0.2:3000/     │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                               07:14:01
ℹ Initial build may take a while                                                                                                                  07:14:01
✔ Builder initialized                                                                                                                             07:14:01
✔ Nuxt files generated                                                                                                                            07:14:01

✔ Client
  Compiled successfully in 15.94s

✔ Server
  Compiled successfully in 13.72s

ℹ Waiting for file changes                                                                                                                        07:14:23
ℹ Memory usage: 135 MB (RSS: 222 MB)

yarn run v1.16.0

$ node --inspect=0.0.0.0:9229 node_modules/nuxt/bin/nuxt

Debugger listening on ws://0.0.0.0:9229/2a53a25c-c810-45f2-8f8c-06eb0a807023

For help, see: https://nodejs.org/en/docs/inspector

╭─────────────────────────────────────────────╮

│ │

│ Nuxt.js v2.8.1 │

│ Running in development mode (universal) │

│ │

│ Listening on: http://172.24.0.2:3000/ │

│ │

╰─────────────────────────────────────────────╯

ℹ Preparing project for development 07:14:01

ℹ Initial build may take a while 07:14:01

✔ Builder initialized 07:14:01

✔ Nuxt files generated 07:14:01

✔ Client

Compiled successfully in 15.94s

✔ Server

Compiled successfully in 13.72s

ℹ Waiting for file changes 07:14:23

ℹ Memory usage: 135 MB (RSS: 222 MB)

正常にデバッグモードで起動出来ました！

Debugger listening on ws://0.0.0.0:9229/2a53a25c-c810-45f2-8f8c-06eb0a807023

この状態でChromeでchrome://inspect/#devices にアクセスすると、Remote TargetにNuxt.jsが表示されていると思います。

これでデバッグ接続の準備は出来ました。

VSCodeからコンテナ内のNuxt.jsにアタッチ

では、実際にVSCodeからデバッグ接続してみましょう。

左のデバッグメニューから、先ほど作成した設定を選択して実行ボタンをクリックしましょう。

正常にアタッチ出来るとデバッグ用のツールバーが表示されます。

また、Nuxt.js側のサーバーログにもDebugger attached.と出力されます。

確認

では実際にデバッグをしてみましょう。

デバッグしたい行にdebuggerを埋め込みます。

import AppLogo from '~/components/AppLogo.vue'

export default {
  components: {
    AppLogo
  },
  async asyncData ({ context }) {
    
      var hoge = "fuga";
      debugger
      console.log(hoge)
    return 
  }
}