WPML
教程

使用 Docker、Xdebug 和 PhpStorm 设置本地 WordPress 开发环境

Eran Helzer3 分钟

分享：

借助 Docker Compose、Xdebug 和 PhpStorm，您可以创建一个可重现、隔离且易于管理的本地开发环境。该环境与生产服务器一致，有助于提高 WordPress 项目的质量。

各位 WordPress 开发者和高级用户，大家好！今天，我很高兴与大家分享一篇全面而简单的教程，介绍如何使用 Docker Compose 设置本地 WordPress 开发环境。最近加入 OnTheGoSystems 充满活力的团队后，我决定把我的舒适区也带过来，这就是这套设置的由来。

目标很简单：开发一套设置，让我能对开发工具进行细粒度控制，将 Xdebug 和 WP-CLI 与官方 WordPress Docker 镜像集成。这套设置并不是要重新发明轮子，而是要对其进行定制，以符合个人偏好和工作风格。我希望本指南能帮助您配置类似的环境，从而提升您的 WordPress 开发之旅。

先决条件

要充分利用本教程，您需要安装以下依赖项：

  1. Docker：我们将使用 Docker 作为使用容器创建、部署和运行应用程序的主要工具。它允许我们将应用程序及其所需的所有部分打包到一个容器中，并作为一个包发布。使 Docker 更加强大的是它承诺的细粒度控制，允许我们精确定义应用程序设置的各个方面。这种控制有助于打造完全符合我们需求的开发环境。
  2. Xdebug Chrome 扩展程序：此浏览器扩展程序将帮助我们逐步调试代码、发现错误并提高 WordPress 项目的整体质量。
  3. PhpStorm：由 JetBrains 开发的智能且功能齐全的 PHP IDE。它提供 PHP、HTML 和 JavaScript 的编辑器，并针对这些语言提供即时代码分析和自动重构功能。

为什么选择 Docker、Xdebug 和 PhpStorm？

我们的目标是建立一个隔离、可重现且易于管理的本地 WordPress 开发环境。Docker 构成了此设置的骨干，提供了包含和管理应用程序的基础设施。Xdebug 和 PhpStorm 是这一拼图的补充部分，提供了增强的 PHP 代码开发和调试功能。

我们的旅程将从制作一个扩展官方 WordPress Docker 镜像的 Dockerfile 开始。我们将通过整合 Xdebug 和 WP-CLI 来增强此镜像，这些工具在我们的 WordPress 开发和调试任务中起着重要作用。

接下来，我们将起草一个 Docker Compose 文件来编排两个关键服务：WordPress 和 MySQL。信不信由您，基本上就是这样！

这种设置的妙处在于，它产生了一个本地开发环境，不仅与生产服务器一致，而且很容易复制。这意味着我们可以轻松地在多个环境或机器上复制完全相同的设置，确保一致性并减少与设置相关的问题。

分步教程

第 1 步：Dockerfile

我们的旅程从创建一个新的 Dockerfile 开始。该文件指示 Docker 如何构建我们的镜像。以下是我通常开始的基本设置：

# Use the official WordPress image as a parent image
FROM wordpress:latest

# Install Xdebug
RUN pecl install xdebug 

# Install WP-CLI
RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar && \
    chmod +x wp-cli.phar && \
    mv wp-cli.phar /usr/local/bin/wp

# Copy xdebug.ini into the container
COPY xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini

在此 Dockerfile 中，我们从官方 WordPress 镜像开始。然后，我们分别安装 Xdebug 和 WP-CLI，以提高清晰度和可维护性。Xdebug 配置文件（xdebug.ini）被复制到容器中的相应目录。这构成了我本地 WordPress 开发环境首选设置的基础。

第 2 步：Xdebug 配置文件（xdebug.ini）

现在我们已经在 Docker 镜像中安装了 Xdebug，我们需要对其进行配置，使其在我们的本地开发环境中工作。这涉及创建一个具有以下设置的 xdebug.ini 文件：

ini
zend_extension=xdebug
xdebug.mode=debug
xdebug.client_port=9003
xdebug.start_with_request=yes

这些设置启用了 Xdebug 扩展，将其设置为在每次请求时开始调试，并定义了它应连接的客户端端口（在本例中为 9003）。您可能已经注意到我们还没有指定 client_host，但不用担心，它很快就会在我们的设置过程中发挥作用。

第 3 步：Docker Compose 文件

接下来，我们将创建一个 docker-compose.yml 文件，用于设置我们的 WordPress 和 MySQL 服务：

yaml
version: '3'
services:
  # MySQL Service
  mysql:
    image: mysql:latest
    container_name: mysql_container
    restart: always
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
  
  # WordPress Service
  wordpress:
    depends_on: 
      - mysql
    image: wordpress:latest
    container_name: wp_container
    volumes:
      - ./wp_data:/var/www/html
    environment:
      WORDPRESS_DB_HOST: mysql
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DEBUG: 1
      XDEBUG_CONFIG: client_host=host.docker.internal
    ports:
      - "8000:8000"

volumes:
  db_data:

在此文件中，我们定义了两个服务：MySQL 和 WordPress。这两个服务都具有唯一的容器名称，以便于参考和管理。

restart: always 指令可确保服务在意外停止时始终重新启动。如果手动停止，则仅在手动重启容器时才会重新启动。

MySQL 服务挂载了一个 Docker 卷（db_data），即使容器被删除也能确保持久存储。对于 WordPress 服务，我们将本地目录（./wp_data）挂载到容器中。这意味着我们本地系统上 WordPress 文件的任何更改都会反映在容器中。

我们为 WordPress 服务添加了两个额外的环境变量：WORDPRESS_DEBUG 用于启用 WordPress 调试，XDEBUG_CONFIG 用于指定 Xdebug 的客户端主机。client_host 设置为 host.docker.internal，这是一个特殊的 DNS 名称，可路由到主机的内部 IP 地址，从而允许 Xdebug 与主机上的 IDE 进行通信。

请注意，client_host 设置是为 Windows 和 macOS 量身定制的。对于 Linux，一种常见的替代方法是将 host.docker.internal 替换为您机器的实际 IP 地址，可以通过终端命令 ip addr show 获取该地址。

第 4 步：运行本地 WordPress 开发环境

准备好 Dockerfile、Xdebug 配置文件和 Docker Compose 文件后，就可以启动您的本地 WordPress 开发环境了。

为此，只需在终端中导航到包含 Docker Compose 文件的目录，然后运行以下命令：

bash
docker-compose up -d

此命令将指示 Docker 在后台启动您的服务。

成功执行后，您将在本地机器上运行一个 WordPress 网站，可以通过 http://localhost:8000 访问。您对 WordPress PHP 文件所做的任何更改现在都会反映在此网站上，提供了一种简单有效的方法来开发和调试 WordPress 应用程序。

此外，您的 MySQL 服务也将启动并运行，可通过端口 3306 访问。这为您的 WordPress 应用程序提供了一个功能齐全的 MySQL 数据库，为您的开发需求复制了真实的运行环境。

第 4.5 步：额外步骤 – 添加 phpinfo.php 文件

对于那些想要更深入地了解其 PHP 配置的人，我们可以将 phpinfo.php 文件引入到我们的 Docker 镜像中。访问此文件时，它将全面概述您的 PHP 设置。
要添加 phpinfo.php 文件，您首先需要在与 Dockerfile 相同的目录中创建它。该文件应包含以下 PHP 代码：

<?php phpinfo(); ?>

接下来，将以下行添加到您的 Dockerfile 中：

# Bonus: Copy phpinfo.php into the container
COPY phpinfo.php /var/www/html/phpinfo.php

此命令会将 phpinfo.php 文件复制到 Docker 镜像内的 WordPress 根目录中。

为确保这些更改生效，您需要重新构建 Docker 镜像并重启 Docker Compose 服务。在终端中运行以下命令：

bash
docker-compose down
docker-compose up -d --build

docker-compose down 命令会停止并删除当前的 Docker 容器。随后，docker-compose up -d –build 会使用新添加的 phpinfo.php 文件重新构建 Docker 镜像，并在后台重启 WordPress 和 MySQL 服务。
现在，您可以在 Web 浏览器中导航到 http://localhost:8000/phpinfo.php 来访问 phpinfo.php 文件。在这里，您将看到一个概述 PHP 配置的详细页面，这可能是调试和验证的宝贵资源。

第 5 步：开始调试

现在您已经使用 Docker、Xdebug 和 PhpStorm 设置了本地 WordPress 开发环境，您可以开始调试您的 WordPress 网站了。以下是快速入门指南：

  1. 在 PhpStorm 中设置 Xdebug：打开 PhpStorm，前往 File → Settings（在 Mac 上为 Preferences）→ Languages & Frameworks → PHP → Debug。在 Xdebug 部分下，确保 Debug port 设置为 9003，并勾选 Can accept external connections 选项。
  2. 添加 PhpStorm 服务器：导航到 PHP → Servers。添加一个名为 wordpress、主机为 localhost 的新服务器。将端口设置为 8000。确保路径映射设置正确：wp_data 文件夹在服务器上的绝对路径应为 /var/www/html。
  3. 安装 Xdebug helper 扩展程序：为 Google Chrome 安装 Xdebug helper 扩展程序。安装后，单击错误（bug）图标并将 IDE 密钥设置为 PHPSTORM。
  4. 开始监听 PHP Debug 连接：在 PhpStorm 中，单击右上角的 bug 图标以开始监听 PHP Debug 连接。
  5. 开始调试：完成上述步骤后，您就可以开始调试 WordPress 应用程序了。只需根据需要在 PhpStorm 中设置断点，然后重新加载您的网站即可。祝您调试愉快！

总结

在结束本教程之际，我希望它能像在我自己的旅程中一样，成为您的宝贵资源。自定义此设置的能力（就像我们通过添加 phpinfo.php 文件所做的那样）开启了无数的可能性，使我们的开发过程更加稳健和高效。所有代码都可以在此 GitHub 存储库中找到。请毫不犹豫地拉取、尝试并提出改进建议！

我个人使用的是 Ubuntu OS，但这种设置的妙处在于，由于有了 Docker，使用什么操作系统都无关紧要！因为 Docker 可以在任何操作系统上同等运行，无论您喜欢 macOS、Windows 还是 Linux，设置和使用都是一样的！

感谢您陪伴我完成本教程。我希望能听到您的经验，或者您对进一步改进此设置的任何建议。请记住，成长源于知识共享和协作精神。

祝您编码愉快，让我们一起继续创造令人惊叹的 WordPress 体验吧！

觉得有用吗？分享这篇文章：

您可能还喜欢