VSCode用のDocker+TypeScriptの開発・デバッグ環境のたたき台を作った

はじめに

自分の開発環境にマッチした設定が意外と見つからず、
デバッグするまでてこずったので記録

前提

仮想環境のゲストマシン内に開発環境を閉じ込める構成

環境

	ver
Vagrant	1.8.0
docker	17.03.0-ce
docker-compose	1.12.0
Node.js	7.9
TypeScript	2.3.2

フォルダ構成

ホスト

[workspaceRoot] $ tree
.
├── .vscode
│   └── launch.json
├── dist # トランスパイル出力フォルダ
│   ├── Index.js
│   ├── Index.js.map
│   ├── Server.js
│   └── Server.js.map
├── docker-compose.yml
├── Dockerfile
├── node_modules # パッケージフォルダ
├── package.json
├── README.md
├── server # TypeScriptソースフォルダ
│   ├── Index.ts
│   └── Server.ts
├── tsconfig.json
└── yarn.lock

サーバー

/var/www $ tree
.
├── .vscode
│   └── launch.json
├── dist
│   ├── Index.js
│   ├── Index.js.map
│   ├── Server.js
│   └── Server.js.map
├── docker-compose.yml
├── Dockerfile
├── node_modules
├── package.json
├── README.md
├── server
│   ├── Index.ts
│   └── Server.ts
├── tsconfig.json
└── yarn.lock

設定周り

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "strictNullChecks": true
    },
    "include": [
        "./server/**/*.ts"
    ],
    "exclude": [
        "./node_modules"
    ]
}

docker-compose.yml

version: '3'
services:
  ts:
    container_name: ts
    build: ./
    image: ts:latest
    volumes:
      - ./:/var/www
    ports:
      - 8080:80
      - 5858:5858
    command: ['node', '--debug=0.0.0.0:5858', '/var/www/dist/Server.js'] # `--debug=5858`だと反応しないので注意

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "ポートへのアタッチ",
            "protocol": "legacy",
            "address": "localhost",
            "port": 5858,
            "outFiles": [
                "${workspaceRoot}/dist/**/*.js"
            ],
            "remoteRoot": "/var/www/dist",
            "localRoot": "${workspaceRoot}/dist",
            "trace": true
        }
    ]
}

実践

# リポジトリダウンロード
$ git clone https://github.com/rog-works/ts-start.git
$ cd ts-start

# イメージビルド
$ docker-compose build

# パッケージインストール(ホストマシンにも同期される)
$ docker run --rm -v `pwd`:/var/www ts:latest yarn install --no-bin-links

# .ts をビルド
$ docker run --rm -v `pwd`:/var/www ts:latest node_modules/typescript/bin/tsc

# サーバー起動(デバッグも同時にlistenする)
$ docker-compose up -d

VSCode

• デバッグ開始(F5)
• ブレイクポイント設定(該当行上でF9)
• Ctrl+@でターミナルを起動し、$ curl localhost:8080 を実行

最後に

Node.js7.9でもlegacyプロトコルはdeprecated
Node.js8以降削除されるので、今後はinspectorプロトコルを使用した方が良い

参照

その他の詳細は以下のリポジトリを参照

• https://github.com/rog-works/ts-start

追記

inspectorプロトコルにする場合は、以下2箇所を変えるだけ

docker-compose.yml

version: '3'
services:
  ts:
    container_name: ts
    build: ./
    image: ts:latest
    volumes:
      - ./:/var/www
    ports:
      - 8080:80
      - 5858:5858
    command: ['node', '--inspect=0.0.0.0:5858', '/var/www/dist/Server.js'] # debug -> inspect

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "ポートへのアタッチ",
            "protocol": "inspect", # lagacy -> inspect
            "address": "localhost",
            "port": 5858,
            "outFiles": [
                "${workspaceRoot}/dist/**/*.js"
            ],
            "remoteRoot": "/var/www/dist",
            "localRoot": "${workspaceRoot}/dist",
            "trace": true
        }
    ]
}