하고 싶은 일

Docker로 구축한 wordpress를 수중의 vscode로 디버그하고 싶다!

필자의 구성

Windows10

Wordpress (nginx+mysql+php-fpm)

파일 구성

수중에서는 이하와 같은 파일 구성으로 하고 있습니다.

.
├── cert
│   └── (証明書関連)
├── conf
│   └── default.conf
├── docker
│   └── Dockerfile
├── docker-compose.yml
├── html
│   ├── wp-admin
│   ├── wp-content
│   ├── wp-includes
│   ├── phpinfo.php # 確認用
│   └── (省略)
├── log
│   └── (いろいろログ)
└── php-xdebug.ini

Wordpress 구축

어쨌든 wordpress 세우지 않으면 시작되지 않는다.
nginx+mysql+php-fpm의 구성으로 세웁니다.
https화의 설정등도 포함되어 있습니다만, 할애합니다.

docker-compose.yml

version: '3'
services:  
  web:
    image: nginx:1.15.3-alpine
    restart: always
    depends_on:
      - wordpress
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./conf/default.conf:/etc/nginx/conf.d/default.conf
      - ./cert:/usr/local/nginx/conf
      - ./log:/var/log/nginx
      - ./html:/var/www/html
    environment:
      - ROOT=/var/www/

  mysql:
    image: mysql:5.7
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: root
      MYSQL_PASSWORD: wordpress
    command: [
      '--default_authentication_plugin=mysql_native_password',
      '--character-set-server=utf8mb4',
      '--collation-server=utf8mb4_unicode_ci',
      '--explicit_defaults_for_timestamp',
      '--innodb-use-native-aio=0'
    ]

  wordpress:
    build: ./docker/
    ports:
      - "9000"
    depends_on:
      - mysql
    volumes:
      - ./html:/var/www/html
      - ./php-xdebug.ini:/usr/local/etc/php/conf.d/php-xdebug.ini
    environment:
      WORDPRESS_DB_HOST: mysql:3306
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: root
      WORDPRESS_DB_PASSWORD: wordpress

volumes:
  db_data:

xdebug 설정

xdebug를 설치하고 싶으므로 Dockerfile에 작성

./docker/Dockerfile

FROM wordpress:5.5.0-php7.2-fpm

RUN pecl install xdebug \
    && docker-php-ext-enable xdebug

xdebug의 설정은 php-xdebug.inixdebug3계로 기술.

php-xdebug.ini

zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20180731/xdebug.so

[xdebug]
xdebug.mode=debug
xdebug.start_with_request=1
xdebug.client_host=host.docker.internal
xdebug.client_port=9012
xdebug.log=/var/log/xdebug.log

호스트에서 docker를 실행하는 경우 host.docker.internal에서 확인
VM의 게스트 OS상에서 docker등을 세우고 있는 경우는, 컨테이너로부터는 호스트 OS가 보이지 않기 때문에, 호스트 OS의 IP 어드레스를 지정한다.
※ VM의 네트워크 환경에 따라 적절히 변경하십시오.

시작

$ docker-compose up -d --build

xdebug가 활성화되어 있는지 확인

phpinfo.php 를 만들고 ./html
phpinfo.php

<?php phpinfo(); ?>

브라우저로 액세스합니다.

php-xdebug.ini가 로드되었는지 확인합니다.


xdebug가 작동하는지 확인

vscode 설정

[파일] → [폴더 열기]에서 파일 구성 디렉토리를 선택합니다.
실행 → 구성 추가에서 PHP를 선택합니다.
lanch.json을 다음과 같이 변경한다.

launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9012,
            "pathMappings": {
                "/var/www/html":"${workspaceFolder}/html"
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

실행 → 디버깅 시작을 클릭합니다.

브레이크 포인트를 설정하면서 브라우저에서 wordpress에 액세스하면 OK.

(여담) xdebug.log 확인

문제 해결에서 xdebug.log를 확인하려면 docker-compose의 exec 명령으로 컨테이너 안으로 들어갑니다.

$ docker-compose exec wordpress /bin/bash
root@5573d83385bf:/var/www/html# cat /var/log/xdebug.log
(だらだら～とログが流れる)

참고로 한 페이지