vscode+php+xdebug3系(+typescript) [docker window10]

直近で書いたtypescriptをvscodeでデバッグする環境にphpのデバッグ環境(xdebug3系)を追加してみた。

##【ディレクトリ構造】

docker
│  docker-compose.yml 
├─html
│  │  xdebug.log
│  │  
│  ├─.vscode
│  │      launch.json
│  │      
│  └─section9-setup
│      │  index.html
│      │  index.php
│      │  tsconfig.json
│      ├─.vscode
│      │      launch.json   
│      ├─dist
│      │      index.js
│      │      index.js.map                        
│      └─src
│              index.ts
├─php
│      Dockerfile
│      php.ini

##docker-compose.yml

docker-compose.yml

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

##Dockerfile

FROM php:7.4-apache

# php.iniをdockerコンテナ内にコピって設置している
COPY php.ini /usr/local/etc/php/

# Xdebugのインストール(xdebug3系)
RUN pecl install xdebug \
&& 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

##php.ini

php.ini

[xdebug]
xdebug.mode=debug
xdebug.start_with_request = yes
; host.docker.internalはdockerのhostマシンのIPを解決してくれる。
xdebug.client_host=host.docker.internal
xdebug.client_port=9003
xdebug.remote_log="/var/www/html/xdebug.log"

##index.php

index.php

<?php
phpinfo();

##lanch.json

lanch.json

    "version": "0.2.0",
    "configurations": [
        {
            //typescriptデバッグ用
            "type": "pwa-chrome",
            "request": "launch",
            "name": "debug typescript",
            "url": "http://localhost:8080/section9-setup/",
            "webRoot": "${workspaceFolder}",
        },
        {
            //phpデバッグ用
            "name": "debug php",
            "type": "php",
            "request": "launch",
            "port": 9003,//php.iniで設定したxdebug用のport番号
            "pathMappings": {
                // {docker上のdocument root}:{ローカルのdocument root} 
                "/var/www/html/section9-setup/":"${workspaceRoot}"
            }
        }
    ]

##index.phpにブレークポイントを置いて、デバッグする