はじめに

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.*

Build docker image:

$ 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
nodemon
npmのコマンドを同時実行する
 Is there a way to use npm scripts to run tsc -watch && nodemon --watch?

Debugging Nest.js (TypeScript) in a Docker Container