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|

## フォルダ構成

### ホスト

```bash
[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
```

### サーバー

```bash
/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

```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
		}
	]
}
```

# 実践

```bash
# リポジトリダウンロード
$ 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
		}
	]
}
```