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

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

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

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

手順

前提

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

要件

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

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

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

[adsense-responsive]

docker-compose.yml

version: '3'

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

launch.jsonの作成

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

.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": "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にデバッグ起動するためのタスクを追加しましょう。

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" // 追加
  },
...
(略)
...
}

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

確認

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

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

[adsense-responsive]

yarn debug

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を埋め込みます。

pages/index.js

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

export default {
  components: {
    AppLogo
  },
  async asyncData ({ context }) {

      var hoge = "fuga";
      debugger
      console.log(hoge)
    return
  }
}