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'

포인트는 이하의 2점.
* ports에 디버그 포트의 9229를 여십시오.
* command에서 NODE_OPTIONS='--inspect=0.0.0.0:9229'를 지정합니다.

이 상태에서 컨테이너를 시작하면 Next.js의 앱과 함께 디버그 모드에서 시작됩니다.

WebStorm 설정

WebStorm 측에서 포트를 연결하는 설정을 추가합니다.

Run/Debug Configurations에서 Attach to Node.js/Chrome을 다음과 같이 설정합니다.


이 설정을 Debug 아이콘으로 기동하면, 성공하면 디버그 윈도우에 로그등이 표시된다.


그리고는, 브레이크 포인트를 설정해 화면을 읽으면 정지해 준다.