LoginSignup
0
0

More than 1 year has passed since last update.

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

Posted at

直近で書いた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にブレークポイントを置いて、デバッグする

image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0