VSCodeでTypeScript×Nodemon×Dockerのデバッグ環境構築

## 概要

- VSCodeでTypeScript×Nodemon×Dockerのデバッグ環境構築を行なったの際のメモ

## 前提 

下記の記事で作成したローカルでの開発環境と、Docker環境を使う
- https://qiita.com/omukaik/items/ac092a07e5575d07e1f9

## ローカル開発でのデバッグ方法 

### lanch.jsonファイルの作成

- vscodeのメニュー「実行とデバッグ」を開き、`lanch.jsonファイルを作成します`をクリック

![スクリーンショット 2022-09-24 20.23.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366054/ef0d369c-3d26-9afa-46d1-cc8ecc76925a.png)

- メニューが表示されるので、Node.js を選択

![スクリーンショット 2022-09-24 20.29.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366054/f3b418bb-6b5c-733a-3b9f-5dfd6dd888c4.png)

- lanch.json が作成される。configurationsの中身は今回特に不要だったが、設定されていないとデバッグが実行できないので設定したままにしておく（この辺りは後で調べる）

```lanch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}
```

- 画面左の`実行とデバッグ`から`package.json`の`scripts`で登録したコマンドが選択可能になっていることを確認しておく

![スクリーンショット 2022-09-24 20.38.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366054/a240a5ff-ad78-1668-813d-70d531d7411d.png)

### sourceMapの有効化

- これによりtsファイルをコンパイルした際に`dist`に`index.js.map`が生成され、tsファイル上でbreak pointを有効化することが可能になる

```json:tsconfig.json
  "sourceMap": true
```

### ブレークポイントを設定してデバッグしてみる

- デバッグを行いたい箇所に break pointを設定する

![スクリーンショット 2022-09-24 20.53.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366054/79783a34-fea8-2552-89d7-77404ccd6a38.png)

- 画面左の`実行とデバッグ`から `Run Script: dev` を選択しアプリケーションを起動する
- ブラウザ上で http://localhost:3000/ にアクセスをすると設定した`break point`で処理が止まることが確認できる

![スクリーンショット 2022-09-24 20.57.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366054/6acddbee-b8b3-e2d1-34f2-ccbef3f46266.png)

## Docker環境でのデバッグ方法

- Docker composeにより起動したコンテナのデバッグを行う
- `ローカル開発でのデバッグ方法` で行なった設定を更新していく

### package.jsonの設定

- `start:debug`と`dev:debug`を追加する

```json:package.json
  "scripts": {
    "start": "nodemon -L dist/index.js",
    "start:debug": "nodemon -L --inspect=0.0.0.0:9229 dist/index.js",
    "build": "npx tsc",
    "build:watch": "npx tsc --watch",
    "dev": "npm run build:watch & npm run start",
    "dev:debug": "npm run build:watch & npm run start:debug"
  }
```


### docker compose ファイルの設定

- `expose`と`port`に`9229`を追加し、`command`をdebug用に修正する

```yml:docker-compose.yml
version: "3"
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: app
    volumes:
      - /usr/src/node_modules
      - .:/usr/src/app
    command: npm run dev:debug
    expose:
      - 3000
      - 9229
    ports:
      - 3000:3000
      - 9229:9229
```


### lanch.json の設定

- VSCodeとデバッグの`構成と追加`の`Docker: Attach to Node`を選択して追加される`configurations`に、追加で修正を加える

![スクリーンショット 2022-09-24 22.46.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366054/84c3d3a6-503b-aedf-2779-c619f3647b71.png)

- ローカル開発環境では実行とデバッグからアプリケーションを起動するので `request:lanch` という設定でしたが、Docker環境でデバッグを有効にするにはDocker composeで起動してあるアプリケーションのプロセスに対してデバッガーを有効化する形になるので `request:attach` を設定する

```json:lanch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Docker: Attach to Node",
      "port": 9229,
      "address": "localhost",
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/usr/src/app"
    }
  ]
}
```

### アプリケーションを起動し、デバッグを行う

- docker composeによりアプリケーション起動する

```shell
$ docker-compose up
```

- VSCodeの実行とデバッグから、設定した `Docker: Attach to Node`を実行する

![スクリーンショット 2022-09-24 22.56.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366054/97fe565e-4bd1-7c46-3b15-f807138dc035.png)

- `docker-compose up` を実行したコンソール上に下記のメッセージが表示されていればattach成功となる

```shell
app  | Debugger attached.
```

- ローカル環境でデバッグを行なったようにbreak pointを設定して、ブラウザ上から`http://localhost:3000`にアクセスすることでデバッグが可能なことが確認できる

## 参考
- https://qiita.com/tailix/items/987df0f85dcc79662cb4
- https://qiita.com/tailix/items/fe3804e7a58978741d56