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の46行目あたりに書いてある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の行番号の左隣をクリックするとブレークポイントが設定できます。