vscodeでtypescriptをデバッグする環境を構築した(docker,windows10) #Docker

フォルダ構成は以下のような感じ。

docker環境を構築

docker-compose.yml

version: '3'

services:
  php:
    build: ./php-apache/
    volumes:
      - ./php.ini:/usr/local/etc/php/php.ini
      - ./html:/var/www/html
    ports:
      - 8080:80

xdebugとnodeとnpmをインストールする

dockerfile

FROM php:7.3-apache

# Xdebugのインストール
RUN pecl install xdebug-2.9.8 \
&& docker-php-ext-enable xdebug

RUN apt-get -y update
RUN apt-get install -y \
    curl \
    gnupg

# nodeのインストール
RUN curl -fsSL https://deb.nodesource.com/setup_17.x | bash - && \
apt-get install nodejs

# npmのインストール
RUN npm install npm@latest -g

gitでコマンドを打っています。ビルドする。

$ docker-compose build

コンテナを起動する。

$ docker-compose up -d

コンテナに入る。

$ docker container exec -it docker_php_1 bash

typescriptをインストールする。

$ npm install -D typescript

tsconfig.jsonを生成する。

$ npx tsc --init

tsconfig.jsonの設定。

tsconfig.json

 "target": "es6",
 "module": "commonjs",
 "sourceMap": true,
 "outDir": "./dist/",
 "rootDir": "./src/",
 "noEmitOnError": true,
 "strict": true,
 "esModuleInterop": true,
 "experimentalDecorators": true,
 "forceConsistentCasingInFileNames": true

typescriptソース。

/src/index.ts

function sayHello(): void {
  console.log('Hello!');
}

console.log(sayHello());

vscodeのデバッグ設定。

lanch.json

    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "debug typescript",
            "url": "http://localhost:8080/section9-setup/",
            "webRoot": "${workspaceFolder}",
          }
    ]

typescriptファイルをコンパイルする。
(index.jsとindex.js.mapが生成される)

$ npx tsc

index.htmlの記述。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./dist/index.js"></script>
</head>
</html>

index.tsにブレークポイントを置く。デバッグするとブレークポイントで停止した。

(補足)ちなみにブラウザも立ち上がる。