はじめに
自分の開発環境にマッチした設定が意外と見つからず、
デバッグするまでてこずったので記録
前提
仮想環境のゲストマシン内に開発環境を閉じ込める構成
環境
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プロトコルを使用した方が良い
参照
その他の詳細は以下のリポジトリを参照
追記
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
}
]
}