Next.js + Docker + WebStorm での デバッグ

Next.js、Docker、WebStormでデバッグするのに手間取ったのでメモ。

• Next.js 11.0.1
• Docker 20.10.7
• Docker Compose 1.29.2
• WebStorm 2021.2

Docker設定

Dockerfileは特に特殊なことはしなくても良い。

docker-compose.ymlは以下。

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: ./servers/app/Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "NODE_OPTIONS='--inspect=0.0.0.0:9229' ./node_modules/.bin/next dev"
    ports:
      - '80:3000'
      - '9229:9229'

ポイントは以下の２点。

• portsにデバッグのポートの9229を開けるようにする。
• commandでNODE_OPTIONS='--inspect=0.0.0.0:9229'を指定する。

この状態でコンテナを立ち上げると、Next.jsのアプリとともに、デバッグモードで立ち上がる。

WebStorm設定

WebStorm側でポートをアタッチする設定を追加する。

Run/Debug Configurationsで、Attach to Node.js/Chromeを以下の通り設定する

この設定をDebugアイコンで起動すると、成功していればデバッグウィンドウにログなどが表示されだす。

あとは、ブレークポイントを設定して画面を読み込めばストップしてくれる。