フォルダ構成は以下のような感じ。
##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にブレークポイントを置く。デバッグするとブレークポイントで停止した。
(補足)ちなみにブラウザも立ち上がる。
