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

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

https://nextjs.org/docs/advanced-features/debugging

`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`の内容については以下を参考にしてください。

https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes

### `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",
}
```
詳細については以下のページをご参照ください。

https://yarnpkg.com/features/pnp#initializing-pnp


### デバッグを開始する
まず、`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の画面は以下のようになります。
![スクリーンショット 2022-05-05 2.17.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/222655f8-0baa-a0a2-20e2-58915c69493e.png)

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