VSCode + Vagrant でPHPをデバッグする環境構築

ここ最近盛り上がりをみせるVSCode(Visual Studio Code)ですが、
今回はVagrantで作成した仮想サーバ上でデバッグを行う方法について解説します。

動作環境

Mac OS 10.13.1
Vagrant 2.0.1
VirtualBox 5.2.2
仮想環境のOSはCentOS 7.1

前提

VagrantとVirtualBoxはインストール済
Vagrantを使って仮想サーバの構築は完了している
yumがインストール済

完了してないという方は下記リンクにてここまでの環境構築について
解説していますので、参考にどうぞ

sasdfe.hatenablog.com sasdfe.hatenablog.com

1.ローカル環境と仮想環境のディレクトリ共有

ローカル環境と仮想環境のディレクトリ共有を行うことで、
ローカル環境で編集したファイルを仮想環境のWebサーバへ同期を行うことができます。
Vagrantを用いる場合、少ない手順でディレクトリ共有が行えます。

ディレクトリ共有を行いたい仮想サーバのVagrantfileを開きましょう

$ vi Vagrantfile

Vagrantfileの４６行目あたりに書いてあるconfig.vm.synced_folderのコメントアウトを行い、ローカル環境と仮想環境のパスを設定しましょう

config.vm.synced_folder "ローカル環境のパス", "仮想環境のパス",type: "rsync"

次に再起動して設定を反映しましょう

$ vagrant reload

次にそのままでは自動的に同期が行われないため、
自動同期のコマンドを実行しましょう

$ vagrant rsync-auto

自動同期コマンドを実行したターミナルが起動している以上
自動同期され続けます。

2. Xdebugを仮想環境へインストール

yumを使ってXdebugを仮想環境へインストールします。まず、仮想環境へログインします

$ vagrant ssh

Xdebugを仮想環境へインストールします

$ sudo yum --enablerepo=remi-php71 -y install php-pecl-xdebug

インストールできたか確認します

$ php -i | grep xdebug

下記のような文字列が表示されたらインストールは正常完了しています。

xdebug support => enabled
xdebug.auto_trace => Off => Off
xdebug.cli_color => 0 => 0

3. Xdebugの設定を変更

Xdebugを正常インストールできたら設定ファイルができているため、
そのファイルの修正を行いましょう
/etc/php.d/15-xdebug.iniを開いて下記の修正を行いましょう

;628行目
xdebug.remote_autostart = 1

;680行目
xdebug.remote_enable = 1

;709行目 PHPサーバへリクエストを送る側のIDアドレス phpファイルにecho $_SERVER['REMOTE_ADDR'] で確認できます。
xdebug.remote_host = 192.168.33.1

4. Apacheを再起動

修正が終わったらApacheを再起動して修正を反映させましょう

$ sudo systemctl restart httpd

5. Visual Studio Codeの設定

Visual Studio Codeの設定について解説します。
Visual Studio Codeを起動して、PHP Debugエクステンションをインストールしましょう
拡張機能の画面で「PHP Debug」と検索→インストール

次に、1.ローカル環境と仮想環境のディレクトリ共有で設定したディレクトリを
Visual Studio Codeで開きます。
ファイル→開く　で設定したディレクトリを開いてください

次にデバッグウィンドウを開いてください。
左にあるメニューバーの虫のアイコンです。

次にPHP Debugの設定をします。
左上に歯車のマークがあり、クリック→PHPを選択します。
その後、launch.jsonが開かれるので修正しましょう

congihurationsのノードの一つ目のオブジェクトに

"serverSourceRoot": "/var/www/html" と
"localSourceRoot": "${workspaceRoot}" を追記します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "serverSourceRoot": "/var/www/html",
            "localSourceRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

以上で設定は完了となります。

実行確認

実際に動くかどうか確認してみましょう。
phpファイルを作成し、簡単なプログラムを作成します。

<?php

$php = "tanosi";

if($php == "tanosi")
{
    echo "That Good!!";
}else{
    echo "So Bad!!";
}

作成後にVisual Studio Codeのデバッグウィンドウを開いて、左上の▶ボタンをクリックします。
さらにPHPの行番号の左隣をクリックするとブレークポイントが設定できます。

その状態で、ブラウザからPHPを実行してみましょう。
正常に設定できていれば、ブレークポイントで処理が止まっています。

こざさのぶろぐ

アプリケーション開発における備忘録や思ったこと