使用Docker构建集成旧版PHP（5.x）Xdebug的调试环境

1 年 ago
科, 雅
3 minutes

首先

无论是热爱新技术的技术人员，都会遇到这样的经历：他们不得不去处理那些已经过期并且不再受支持的软件版本，以进行旧系统的修复和维护。

在这种时候，不想费劲地安装旧的开发环境。

ならば仮想化技術の出番でしょう。

附注1

mac OSでうまく動かなかったので対処しました。
mac OSの場合は最終的にlocalhostにDockerコンテナ内のportがマッピングされるので、http://localhost/でアクセスできるようになります。
詳しくはDocker公式 Networking features in Docker for Mac の項を参照

这个代码已经被放置在我的Github仓库中。

追記 2

mac OSではXdebugでのブレークポイントが確認できていません。
こちらのGistを元に、コンテナ内からhostのmac OSに接続できるように設定してあげれば良いはずなのですが・・・

要做的事情 zuò de

    • Dockerを使って、ローカル環境を汚さずにPHP5.3を実行できるhttpdサーバーを立てる開発環境を構築する

 

    VSCodeからPHPにデバッグをかけ、ブレークポイントを張る

最终文件结构

在这种形式下我们将继续进行。

publicの中には、webコンテンツが、logsの中にはapacheのログファイルが入ります。

.
├── docker-compose.yml
├── Dockerfile
├── logs
│   ├── access_log
│   ├── error_log
│   └── .gitkeep
├── public
│   ├── index.php
│   └── phpinfo.php
├── README.md
└── .vscode
    └── launch.json

查询Docker版本

Dockerのバージョンを念の為に確認します。

$ docker -v
Docker version 17.09.0-ce, build afdb6d4

$ docker-compose -v
docker-compose version 1.15.0, build e12f3b9

使用Docker构建一个开发环境，可以在无需污染本地环境的情况下运行PHP5.3的httpd服务器。

ここはもう、えいやと、Dockerfileとdocker-compose.ymlを作成します。

こちらのDockerfileを大いに参考にしました。

FROM centos:6.6

# set repository
RUN rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rpm

# install httpd
RUN yum -y install httpd vim-enhanced bash-completion unzip

# install php
RUN rpm --rebuilddb; yum install -y php php-mysql php-devel php-gd php-pecl-memcache php-pspell php-snmp php-xmlrpc php-xml

# Install xdebug for php debugging
RUN yum install -y php-pecl-xdebug
RUN echo "xdebug.default_enable = 1" > /etc/php.d/xdebug_settings.ini \
    && echo "xdebug.remote_enable=on" >> /etc/php.d/xdebug_settings.ini \
    && echo "xdebug.remote_autostart=on" >> /etc/php.d/xdebug_settings.ini \
    && echo "xdebug.remote_connect_back = on" >> /etc/php.d/xdebug_settings.ini \
    && echo "xdebug.remote_port = 9000" >> /etc/php.d/xdebug_settings.ini

EXPOSE 80

# Start web server
CMD ["httpd", "-D", "FOREGROUND"]

php-debug:
  build: .
  environment:
    # replace with your local IP
    XDEBUG_CONFIG: remote_host={{192.168.179.3}} 
  volumes:
    # ローカルのWebコンテンツをマウント
    - ./public:/var/www/html
    # Apacheのlogファイルをローカルに書き出してもらうために、logsをマウント
    - ./logs:/var/log/httpd

docker-compose.ymlファイルを作成するのは、２つ理由があります。
– MySQLなどのDBコンテナを簡単に連携させるため(この記事内でDB接続はしません)
– この開発環境を利用する開発者各自のローカル環境に依存する設定をコンテナ定義の外側に出すため

Dockerのビルドの前に、開発端末のlocal IPを調べて、docker-compose.ymlを書き換える必要があります。

ip a // linux, macOS
ipconfig // windows

次のコマンドを実行して、Dockerのビルドと実行をします。
最初はイメージやライブラリのダウンロードとインストールがあるので、それなりに時間がかかります。

docker-compose build
docker-compose up

ここまで実行すると、次のようなメッセージがコンソールに表示され、httpdサービスがコンテナ内で動作している状態になります。

Recreating phpdebug_php-debug_1 ... 
Recreating phpdebug_php-debug_1 ... done
Attaching to phpdebug_php-debug_1
php-debug_1  | httpd: Could not reliably determine the server's fully qualified domain name, using 172.17.0.3 for ServerNam

让我们在浏览器中输入显示的IP地址。

Apache 2 测试页面
由CentOS提供支持

只要显示为“成功”，就代表成功。

あとは、コンテナ内の/var/www/htmlにマウントしているディレクトリの中にphpinfo.phpを作成して、ちゃんとマウントされているかも確認しておきましょう。

<?
    phpinfo();
?>

ブラウザに 172.17.0.3/phpinfo.php と入力してphpinfo()の内容が見れるか確認しましょう。

VisualStudioCodeからPHPにデバッグをかけ、ブレークポイントを張る

Xdebugの機能でPHPのデバッグを行うのは、VisualStudioCode限定ではないのですが、有料のPhpStormを除けば、一番手軽だと思うので、VisualStudioCodeでデバッグをしてみます。

操作非常简单。

    • VisualStudioCodeにphp-debugの拡張をインストール

 

    • デバッグでXdebug向け構成を作成

 

    • デバッガ起動

 

    • 動作を確認したいphpコードにブレークポイントを張る

 

    phpファイルにブラウザからアクセス

请在Visual Studio Code中安装php-debug扩展。

拡張の検索で、 php-debug と入力してさくっとインストールしてください。

ブレークポイントを張るという目的ならば必要ありませんが、がっつり開発したいなら、好みで、php-intellisenseを入れましょう。
機能を最大限使うためには、ローカル環境にphp 7コマンドをインストールしてあげる必要があります。

制作适用于Xdebug的调试配置

通过添加调试配置来生成launch.json文件，并将其内容设置如下。

{
  "version": "0.2.0",
  "configurations": [

    {
      "name": "Listen for XDebug",
      "type": "php",
      "request": "launch",
      "port": 9000,
      "pathMappings": {
        "/var/www/html": "${workspaceRoot}/public"
      }
    }
  ]
}

デフォルト生成状態では追加されない項目が以下の２つですが、ブレークポイントを張るためには重要なので、設定を追加してください。
localSourceRootは、ローカル環境に置いてある、デバッグ対象のWebコンテンツルートを指定します。この記事の例では、同じプロジェクトディレクトリにあるので、${workspaceRoot}を使っていますが、そうでない場合は、絶対パスでgitリポジトリを指定するなどしましょう。
serverSourceRootはコンテナ内のWebコンテンツルートを指定します。

启动调试器

在VisualStudioCode的调试配置中选择”监听XDebug”，然后开始调试。

在想要确认动作的PHP代码中设置断点。

為了試一試，我們來創建以下這樣的文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="background-color:lightgray;">
    <?php
    $a = "world";
    echo "hello " . $a . " <br/>";
    echo "from xdebug!";
?>
    </div>

</body>
</html>
Screenshot from 2017-10-06 01-28-30.png

从浏览器访问php文件。

当浏览器访问目标的php文件时，在设置断点的情况下，浏览器会进入等待响应状态，而VisualStudioCode则会处于断点等待状态。

Screenshot from 2017-10-06 01-33-56.png

完善

或许有些人会对在xdebug的配置中将远程端口设置为9000，但在Dockerfile中没有使用EXPOSE而感到疑惑。这是因为VisualStudioCode正在以9000端口进行监听，容器内的xdebug会访问该端口，这是容器内部→外部的通信，因此不需要打开端口。

当我们仔细查看Visual Studio Code的调试设置时，我们会发现它使用”Listen for XDebug”，并且等待来自9000端口的通信，这意味着等待通信的一方是Visual Studio Code。
由于与Chrome调试器的通信方向相反，这可能会导致误解。
（Chrome调试模式使用9222端口等待通信，所以编辑器需要主动连接）。

✖
广告
将在 10 秒后关闭
bannerAds