【VSCode】VSCodeでNext.jsのデバッグをする【Docker】【Yarn v3】

はじめに

VSCode上でDockerのNext.jsをデバッグできるようにしようと思い、公式ドキュメントのとおり進めましたがエラーが出てしまいました。

package.jsonに"dev": "NODE_OPTIONS='--inspect' next dev"を記述して docker compose upしたところ以下のエラーが発生しました。

ターミナル

$ docker compose up
[+] Running 1/0
 ⠿ Container next-yarn_v3-front-1  Created                                                                                   0.0s
Attaching to next-yarn_v3-front-1
next-yarn_v3-front-1  | Debugger listening on ws://127.0.0.1:9229/4f809b6d-1934-43b8-af90-31cb62c76abb
next-yarn_v3-front-1  | For help, see: https://nodejs.org/en/docs/inspector
next-yarn_v3-front-1  | internal/modules/cjs/loader.js:905
next-yarn_v3-front-1  |   throw err;
next-yarn_v3-front-1  |   ^
next-yarn_v3-front-1  |
next-yarn_v3-front-1  | Error: Cannot find module '/myapp/.yarn/__virtual__/next-virtual-0ba2df6e2a/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/bin/next'
next-yarn_v3-front-1  |     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
next-yarn_v3-front-1  |     at Function.Module._load (internal/modules/cjs/loader.js:746:27)
next-yarn_v3-front-1  |     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
next-yarn_v3-front-1  |     at internal/main/run_main_module.js:17:47 {
next-yarn_v3-front-1  |   code: 'MODULE_NOT_FOUND',
next-yarn_v3-front-1  |   requireStack: []
next-yarn_v3-front-1  | }
next-yarn_v3-front-1 exited with code 1

VSCode上でDockerのNext.jsをデバッグできるようにする方法について記載します。

VSCodeでNext.jsをデバッグできるようにする方法

lauch.jsonを作成する

.vscodeディレクトリを作成し、その中にlauch.jsonを作成します。
内容は以下のようにします。

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch", 
      "name": "Next.js: client-side", 
      "url": "http://localhost:3000", 
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack://_N_E/*": "${workspaceFolder}/*"
      }
    },
    {
      "type": "node", 
      "request": "attach", 
      "name": "Next.js: server-side",
      "port": 9229, 
      "address": "localhost", 
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/myapp"
    },
  ],
  "compounds": [
    {
      "name": "Next.js: debug",
      "configurations": [
        "Next.js: client-side",
        "Next.js: server-side"
      ]
    }
  ]
}

"localRoot": "${workspaceFolder}"はホスト側のプロジェクトルートを指定しています。
"remoteRoot": "/myapp"はコンテナ側のプロジェクトルートを指定しています。

lauch.jsonの内容については以下を参考にしてください。

docker-compose.ymlを編集する

docker-compose.ymlを以下のように編集します。

docker-compose.yml

version: '3.9'
services:
  front:
    build: .
    volumes:
      - .:/myapp
    environment:
      NODE_ENV: development
    ports:
      - 3000:3000
      # 以下追記
      - 9229:9229

ポートの指定を追加しました。

package.jsonを編集する

package.jsonを編集します。
scriptsのdevを以下に変更します。

package.json

{
  "scripts": {
    "dev": "NODE_OPTIONS='--inspect --require ./.pnp.cjs' next dev",
}

詳細については以下のページをご参照ください。

デバッグを開始する

まず、docker compose upします。

ターミナル

$ docker compose up
[+] Running 2/0
 ⠿ Network next-yarn_v3_default    Created                                                            0.0s
 ⠿ Container next-yarn_v3-front-1  Created                                                            0.0s
Attaching to next-yarn_v3-front-1
next-yarn_v3-front-1  | Debugger listening on ws://0.0.0.0:9229/099e55e2-e375-4af5-bdec-70faa381ac3c
next-yarn_v3-front-1  | For help, see: https://nodejs.org/en/docs/inspector
next-yarn_v3-front-1  | warn  - Node.js 16.14+ is required for Yarn PnP 3.20+. More info: https://github.com/vercel/next.js/pull/34688#issuecomment-1047994505
next-yarn_v3-front-1  | ready - started server on 0.0.0.0:3000, url: http://localhost:3000

F5を入力してデバッグができるか確認します。
F5を入力するとブラウザが表示されます。

そしてVSCodeの画面は以下のようになります。

デバッグコンソールが表示され、設定したブレークポイントで処理が止まっています。
また変数なども表示されています。