소개

TypeScript의 풀 스택 서버 사이드 프레임 워크인, 아는 사람 아는 Nest.js 를 Docker 로 동작시켜 리모트 디버그 하는 방법을 정리했습니다.

영어 연습하고 싶었기 때문에 영어로 써 보았습니다. (쓰기 맛은 거의 AWS Amplify 의 문서의 파크리입니다.)

TypeScript 와 Docker 가 겹치면 여러가지 귀찮았습니다.

소스는 → 여기 ← 에 놓습니다.

Debugging Nest.js in a Docker Container

This recipe shows how to run and debug a VS Code Nest.js, Full Stack TypeScript Framework, project in a Docker container.

The recipe assumes that you have a recent version of Docker installed.

Step 1. Create a New App

With the following commands, create the directory ( nest-js-app ) and files for the app.

$ mkdir nest-js-app && cd nest-js-app
$ touch Dockerfile docker-compose.yml .dockerignore

The app directory structure should be:

- nest-js-app
    - .dockerignore
    - .gitignore
    - docker-compose.yml
    - Dockerfile

Add the following to the Dockerfile file:

Dockerfile

FROM node:8.10.0

RUN mkdir -p /nest
ADD . /nest
WORKDIR /nest

RUN npm i -g @nestjs/cli

Add the following to the docker-compose.yml file:

docker-compose.yml

version: "3"

services:
  nest:
    build: .
    volumes:
      - .:/nest
    ports:
      - 3000:3000
      - 9229:9229
    tty: true

Add the following to the .gitignore file:

.gitignore

# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Coverage directory used by tools like istanbul
coverage

# Dependency directories
node_modules/

# Output files
dist

# dotenv environment variables file
.env

Add the following to the .dockerignore file:

.dockerignore

.git
.github
.vscode
coverage
docker-compose.yml
README.md

# Node Files #
node_modules
npm-debug.log
npm-debug.log.*

빌드 도커 이미지 :

$ docker-compose build

Start and login to the container:

$ docker-compose up -d
$ docker-compose exec nest bash

Scaffold the base project with the Nest CLI and install dependencies:

# nest new .
# npm install

Run the app:

# npm start

Open a browser and navigate to http://localhost:3000 .
You should see the Hello world! message.

Step 2. Set up the debugging environment

With the following commands, create the directory ( .vscode ) and files for debugging.

# mkdir .vscode && touch .vscode/launch.json nodemon-docker-debug.json

The app directory structure should be:



Add the following to the launch.json file:

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Docker: Attach to Node",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "address": "localhost",
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/nest",
      "protocol": "inspector",
      "restart": true
    }
  ]
}

Add the following to the nodemon-docker-debug.json file:

nodemon-docker-debug.json

{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "tsc && node --inspect=0.0.0.0 ./dist/main.js"
}

Add the following line into the scripts block of the package.json file:

package.json

"scripts": {
  "debug": "nodemon -L --config nodemon-docker-debug.json",

}

Step 3. Debugging

For the test operation, add some codes into the src/app.service.ts and set breakpoints as below.



Run the app in debugging mode:

# npm run debug

Start the debug on the VScode.



Open a browser and navigate to http://localhost:3000 .
You should see the program stop at the breakpoints.



Happy coding!

Reference

Debugging TypeScript in a Docker Container
그래서 몬
npm 명령을 동시 실행
Is there a way to use npm scripts to run tsc -watch && nodemon --watch?