我想做的事情

我想在我的本地vscode中对使用Docker构建的WordPress进行调试！

作者的结构。

• 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的设置，但这里省略不提。

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。

FROM wordpress:5.5.0-php7.2-fpm

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

xdebug的设置在php-xdebug.ini文件中单独配置。
使用xdebug3版本进行描述。

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。
如果在虚拟机的Guest OS上运行Docker等容器，则无法从容器中看到主机OS，需要指定主机OS的IP地址。
* 请根据虚拟机的网络环境适当进行更改。

启动

$ docker-compose up -d --build

请确认是否启用了xdebug。

创建一个名为phpinfo.php的文件，并将其放置在./html文件夹下。

<?php phpinfo(); ?>

在浏览器中访问。

VS Code的设置

点击 [文件]，选择 [打开文件夹]，然后选择文件结构的目录。
点击 [运行]，选择 [添加配置]，选中 PHP。
将 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的同时设置断点即可。

检查xdebug.log (附加信息)

当需要通过故障排除查看xdebug.log时，可以使用docker-compose的exec命令进入容器内部。

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

参考页面