Zenn
🐡

「npm run dev」で起動するものをデバッグ実行する方法

に公開
JavaScript
Next.js
Node.js
TypeScript
tech

はじめに

「npm run dev」で起動するものをデバッグ実行する方法
をまとめました。
別に、yarn devだったとしても、同様のやり方で対処できます。

「npm run dev」のデバッグ起動の件
の目次項目では、ホスト側のターミナル上で、「npm run dev」を打ち込む
状況でのやり方を書きました

Docker内部で「npm run dev」する場合にVSコードでデバッグ実行する方法
の目次項目では、dockerコンテナにログイン後に、「npm run dev」を打ち込む
状況で、ホスト側で動作しているVSコードでリモートデバッグする
やり方を書きました

ただ、いずれも、ブラウザ側でうごいてるコンポーネントの実装部分のデバッグ実行は
ブラウザーのデバッガーで行うことになります。

ここで紹介しているのは、いずれも、サーバー側のコンポーネントでの実装部分の
デバッグ実行のやり方です。

「npm run dev」のデバッグ起動の件

npm run devでバックエンドを起動してるケースの話で。
バックエンド側の実装をデバッグ実行したいケース。

npm run devのコマンドが打てるということは
package.jsonに、"scripts"の"dev"についての挙動が
下記のような記述で書いてある

  "scripts": {
    "dev": "ts-node src/index.ts"
  },

.vscode/launch.json
に、

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Next.js + JSON Server",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run", "dev"],
            // **** "cwd": "${workspaceFolder}/21_nextjs_app_router/start", // package.json のあるディレクトリを指定
            "env": {
              "NODE_ENV": "development"
            },
        }
    ]
}

があれば、デバッグ実行で「npm run dev」が動作する
下の図は、デバッグ実行している様子。

package.jsonが、VSコードを開いたフォルダの直下に無い場合は、
// **** "cwd": "${workspaceFolder}/21_nextjs_app_router/start", // package.json のあるディレクトリを指定
の部分の行を生かす（今、コメントアウトされている)

${workspaceFolder}は、VSコードを開いたフォルダのこと、
package.jsonがある場所を指定しておけば、
npm run devを実行する直前に、そこまで、cdコマンドで移動した上で
npm run devを実行してくれることになる
そこにある、package.jsonの"scripts"の"dev"に書かれた内容で
デバッグ実行してくれる。

Docker内部で「npm run dev」する場合にVSコードでデバッグ実行する方法

準備1)
package.json
に、下記の
"dev:debug": "node --inspect=0.0.0.0:9229 ./node_modules/.bin/next dev",
を追記する。

  "scripts": {
    "dev": "next dev",
    "dev:debug": "node --inspect=0.0.0.0:9229 ./node_modules/.bin/next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
＜他、省略＞

準備2)
launch.json
を下記のようにして、9229ポートでアタッチできるようにする

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Next.js inside Docker",
            "port": 9229,
            "address": "localhost",
            "restart": true,
            "skipFiles": [
                "<node_internals>/**"
            ],
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "/www/html/nextapp"
        }
    ]
}

準備3)
docker-compose.ymlで、該当のコンテナについて、9229をホスト側に
フォワーディングする。

 foo:
    container_name: foo_app
    ports:
      - "3000:3000"
      - "9229:9229"  # リモートデバッグ用のポートを追加

準備4)

コンテナ側で「yarn dev」する場合には、
( package.jsonの定義に従い「yarn dev:debug」でした )
Dockerfile
に、下記の記述が必要になる。
「RUN corepack enable && corepack prepare yarn@4.1.1 --activate」

なお、コンテナ側で「npm run dev」する場合には、不要です。
( package.jsonの定義に従い「npm run dev:debug」でした )

#***  FROM node:16.17.0-buster-slim
FROM node:18-bullseye-slim

WORKDIR /www/html

# error This project's package.json defines "packageManager": "yarn@4.1.1". However the current global version of Yarn is 1.22.22.
# のエラー回避のため
RUN corepack enable && corepack prepare yarn@4.1.1 --activate

Discussion