[VS Code] Docker에서 실행되는 Node.js 서버 디버깅하기

acho·2024년 11월 3일

Docker

요즘에는 로컬 개발 환경에서도 서버를 도커에 올려 사용하는 경우가 많습니다.
서버는 도커에 올라가있는데 로컬에 깔려 있는 VS Code IDE로 어떻게 디버깅을 할 수 있을까요?

Node의 디버깅 API

Node.js는 이런 경우 원격 디버깅을 할 수 있도록 디버깅용 API를 정의하고 있습니다.
Node 버전 7 이전은 legecy Debugger API를, 8 버전 이후부터는 Inspecter API를 사용합니다. Inspecter API 기준으로 설명하겠습니다.

  1. --inspect 로 Node.js를 실행하면 디폴트로 127.0.0.1:9229 에서 디버깅 요청을 listen 합니다.
    호스트/포트를 변경하고 싶다면 아래처럼 하면 됩니다 :
node --inspect=0.0.0.0:9229
  • 호스트를 0.0.0.0으로 설정하면 모든 호스트에서 요청을 보낼 수 있습니다. 로컬 개발 환경에서는 이렇게 설정해도 큰 문제가 없습니다.
  1. VS Code에 디버그 설정파일을 작성합니다.
//.vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Docker: Attach to Node",
            "type": "node",
            "request": "attach",
            "port": 9229,
            "address": "localhost",
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "usr/src/app",
            "restart": true,
            "sourceMaps": true,
            "skipFiles": ["<node_internals>/**", "${workspaceFolder}/node_modules/**"]
        }
    ]
}
  • .vscode/launch.json에 디버그 설정을 입력할 수 있습니다.
  • type은 node, request 종류는 attach로 설정합니다.
  • port, address로 포트와 요청을 보낼 주소를 설정할 수 있습니다.
  • locarRoot와 remoteRoot는 로컬과 도커의 소스 코드를 매핑하기 위해 루트 주소를 입력하는 것입니다. src가 아닌 프로젝트 루트를 입력해야 합니다.
  • restart를 true로 하면 디버거가 disconnect 되거나 앱이 종료되는 등 예상치 못하게 종료된 상황에 자동으로 재시작합니다.
  • sourceMaps가 true이면 typescript의 컴파일된 코드와 원본 코드를 매핑해줍니다. 원본 코드 (.ts)에서 직접 디버깅을 할 수 있습니다.
  1. VS 코드 왼쪽 메뉴에서 디버거를 선택하고, 설정파일의 name 속성에 설정한 이름을 가진 설정을 선택해 디버깅을 실행합니다.

  2. 도커 로그에 다음과 같은 메세지가 뜨면 디버거가 연결되었다는 뜻입니다.

 Debugger attached.

좀 더 편리하게 디버깅하기

이렇게 디버거와 연결은 할 수 있지만 실제로 디버깅하는 데 불편함이 따릅니다. 로컬에서 수정한 코드가 도커에 바로 반영되지 않아 코드를 수정하면 도커를 재시작해야 합니다.

좀 더 편리하게 디버깅 하기 위해 도커 볼륨 + nodemon과 ts-node를 사용해 문제를 해결할 수 있습니다.

도커에서 nodemon 사용하기

nodemon은 소스 코드의 변경사항을 감지해서 자동으로 재시작해주는 툴입니다.

  • 도커에서 서버 실행시 nodemon으로 재시작하도록 설정하고,
  • 로컬의 소스 코드 변경사항이 도커에도 반영되도록 하면 로컬에서처럼 코드 수정시마다 자동으로 재시작하도록 설정할 수 있습니다.
  1. 도커 볼륨을 사용해 로컬 소스 코드의 변경사항이 컨테이너에 반영되도록 합니다.
services:
    server:
		...
        volumes:
            - ./src:/usr/src/app/src
  • 로컬 경로:도커 경로 형식으로 로컬의 폴더와 도커 컨테이너 내부의 폴더를 매핑할 수 있습니다. src 폴더를 매핑해줍니다.
  1. nodemon을 설치합니다.
npm install -d nodemon
  1. package.json에 nodemon을 사용하는 서버 스크립트를 작성합니다.
 "start:debug:watch": "nodemon --watch src -e ts --exec \"node --inspect=0.0.0.0:9229 -r ts-node/register src/main.ts\"",
  • nodemon --watch 로 파일 변경을 모니터링해 재시작하도록 합니다.
  • src -e ts는 ts 파일을 감시한다는 뜻입니다.
  • --exec로 재시작 할때마다 실행할 명령어를 입력합니다. --inspect 모드로 노드를 시작하고, 원하는 포트와 호스트를 입력합니다.

ts-node로 재빌드 없이 코드 바로 실행하기

ts-node는 컴파일 없이 ts 파일을 직접 실행하도록 해주는 툴입니다.
개발 단계에서 빌드 과정 없이 즉시 변경사항을 확인할 수 있어 편리합니다.
위의 명령어에서,

  • -r ts-node/register로 ts-node를 사용해 ts 코드를 바로 사용하도록 합니다.
  • src/main.ts는 시작지점 파일명입니다.

0개의 댓글