今回は、Code ServerでPHPのデバッグを行いたいと思います。当然ながら、デバッグにはPHPが必要なのでRaspberry Pi 4に構築していきます。
(※Raspberry Pi 4構築時のメモを紛失したので、今回はVMで構築していますが、設定内容等は同じです。)
Code Serverがインストールしてない場合は、下記の記事を参考にインストールしてください。
・PHPのインストール
まずは必要なモジュールをインストールします。今回使うHTTPサーバはApacheを使用します。
1 |
sudo apt install apache2 php php-dev php-pear |
インストール完了後、Apacheの自動起動を有効化します。
1 |
sudo systemctl enable apache2 |
次にApacheのドキュメントルートにPHPの情報を表示するファイルを作成します。
1 |
sudo nano /var/www/html/info.php |
ファイルの内容は下記の1行のみです。
1 |
<?php phpinfo(); ?> |
ファイルが作成出来たら、ブラウザからinfo.phpにアクセスします。
画像のような画面が表示されれば、PHPのインストールは完了です。
・Xdebugのインストール
次にPHPのデバッグに必要なXdebugをインストールします。今回はphp-pearを使用してインストールします。
1 |
sudo pecl install xdebug |
完了すると、画像のようなメッセージが表示されます。この情報は後で必要なので、メモしておいてください。
インストール完了後、PHPにXdebugを認識させるiniファイルを作成します。phpinfoによると、/etc/php/7.4/apache2/conf.d/がiniファイルのディレクトリのようなので、そのディレクトリに30-xdebug.iniファイルを作成します。
1 |
sudo nano /etc/php/7.4/apache2/conf.d/30-xdebug.ini |
ファイルの内容は下記のとおりです。
1 2 3 4 5 |
[xdebug] zend_extension=/usr/lib/php/20190902/xdebug.so xdebug.client_host=localhost xdebug.mode = debug xdebug.start_with_request=yes |
保存後、Apacheを再起動します。その後、phpinfoを再確認します。画像のように30-xdebug.iniファイルが読み込まれていることを確認します。
読み込まれていることが確認出来たら、ブラウザの検索でXdebugが正常に読み込まれていることを確認します。
読み込まれていれば、Xdebugのインストールは完了です。
・フォルダの作成
現状の設定では、Code Severで/var/www/html配下のディレクトリを編集できないので、PHPのソースを配置するディレクトリを作成します。
今回は/home/ubuntu/phpディレクトリにソースを保存することにします。
1 |
mkdir /home/ubuntu/php |
次に作成したディレクトリのシンボリックリンクを/var/www/htmlに作成します。
1 |
sudo ln -s /home/ubuntu/php /var/www/html/php |
コマンド実行後、無事にリンクが作成できているか確認します。
1 |
ls -lah /var/www/html |
画像のように、先ほど作成したディレクトリが->の後に表示されていれば完了です。
・Code Serverの設定
PHPのデバッグに必要な拡張機能、「PHP Debug」をインストールします。
次に「フォルダーを開く」から先ほど作成した/home/ubuntu/phpディレクトリを開きます。
フォルダーを開いたら、新規ファイルを作成します。今回は「xdebug.php」を作成しました。
ファイルの内容は下記の1行のみです。
1 |
<?php xdebug_info(); ?> |
ファイルが作成出来たら、試しにhttp://ipアドレス/php/xdebug.phpでアクセスしてみます。
無事に画面が表示されることが確認出来たら、実行を開いて「launch.jsonファイルを作成します」をクリックします。
表示されたポップアップにPHPがあるので、PHPをクリックします。(表示されない場合は、Code Serverを再読み込みしてみてください)
するとlaunch.jsonファイルが作成されるので、必要な情報を編集・追記していきます。変更後の内容は画像のとおりです。
portはxdebug_infoで表示されているxdebug.client_portのポートを設定してください。
pathMappingsはサーバ側のソースの場所と、Code Serverで表示しているソースの対応付けを記述します。今回はシンボリックリンクを作成しているので、シンボリックリンクのパス(/var/www/html/php)とソースの実際の場所(/home/ubuntu/php)を記載します。
今回の場合、Code Serverで/home/ubuntu/phpを開いているため、上記画像のように${workspaceFolderRoot}と記述することもできます。
編集が終わったら、xdebug.phpにブレークポイント(停止箇所:赤丸)を設置します。ソースの行数の横をクリックすることで設置できます。
ここまでできれば準備完了です。
・ステップ実行してみる
準備が出来たら、「実行」の緑色の再生ボタンをクリックします。
Code Serverの下部のバーがオレンジ色になれば起動完了です。
ブラウザから再度、http://ipアドレス/php/xdebug.phpに接続します。
画像のように、設置したブレークポイントで停止されていれば、ステップ実行ができています。
今回は変数等は使用していませんが、変数などがあれば左側に変数の内容も表示されます。
・終わり
恥ずかしながら、PHPのステップ実行の方法を最近まで知りませんでした……。それまではprint_r()やechoで頑張って表示してました。ステップ実行できるようになれば、デバッグがすごく楽になります。
Code Severの性質上、Xdebugのclient_hostをlocalhostにできたりpathMappingsの設定がソースの配置フォルダ良かったりするのは、設定が楽でいいですね。
今回はCode Serverで行いましたが、VSCodeのRemote SSHでも同様の設定でできます。
PHPを使う機会があれば、ぜひ試してみてください。
では、この辺で。
三条 海斗
コメント