【2023年版】VisualStudioCode + Vagrant + Xdebugの環境構築【PHP】

古い記事が多く、上手くいかない所があったので備忘録として残します。

自分の環境は、

  • vagrant 2.2.9
  • CentOS 7.2
  • PHP 7.4
  • xdebug 2.9.6

です。

xdebugのインストール

普段はchefで自動化してますが、手動でサクッとインストールするなら以下の通り。

remiレポジトリから持ってきます。

>> sudo yum --enablerepo=remi-php74 -y install php-pecl-xdebug



以下を実行して、enabledと表示されていればOK。

>> php -i | grep "xdebug support"

xdebug.iniの設定

Vagrantfileで設定した、private_networkのipの末尾を1に変えたアドレスを使います。

例えば、192.168.33.10と設定していたら、末尾を1に変えた192.168.33.1です。

PHPでチェックすることもできます。

index.php等の適当なファイルに、

 <?= $_SERVER['REMOTE_ADDR']; ?>

を追記してブラウザからアクセスし、表示されるアドレスです。

必要なアドレスが分かったら、設定をしましょう。

xdebugのインストールが完了すると、/etc/php.d/以下に、15-xdebug.iniというファイルができています。(環境によっては”15−”は無いかも)

このファイルを編集します。(”n行目”は参考程度に。)

; 678行目
xdebug.remote_autostart = 1

; 720行目
xdebug.remote_enable = 1

; 744行目  ここでさっき調べたipアドレスを設定します。
xdebug.remote_host = 192.168.xxx.x



保存したら、apacheを再起動しましょう。

>> sudo systemctl restart httpd



以上で、サーバー側は完了です。

VSCode側の設定

VSCodeにxdebug用の拡張機能をインストールします。

いくつかありますが、インストール数が多いやつにしておきます。



拡張機能をインストールしたら、サイドバーのデバッグボタンを選択。

デバッグ設定用のlaunch.jsonファイルを作成するところを選択し、開いたリストからPHPを選択。



すると、launch.jsonが新規作成されて開くので編集します。

pathMappingsの部分を追加します。

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for XDebug",
      "type": "php",
      "request": "launch",
      "port": 9000,
      "pathMappings": {
        "サーバ側のディレクトリ": "ローカル側のディレクトリ"
      }
    },
    {
      "name": "Launch currently open script",
      "type": "php",
      "request": "launch",
      "program": "${file}",
      "cwd": "${fileDirname}",
      "port": 9000
    }
  ]
}

vagrantで立ち上げているリモートサーバー側のディレクトリと、ローカル側のディレクトリを合わせる設定です。

Vagrantfileで、共有しているディレクトリの設定を確認しましょう。

例として、自分の環境では以下の通り。

Vagrantfileがあるディレクトリのdataディレクトリと、サーバーの/var/www/htmlディレクトリを共有しています。

(dataディレクトリはユーザのホームディレクトリのdev/以下にあるとします。)

  config.vm.synced_folder "./data", "/var/www/html"

この場合は、以下のようにします。

      "pathMappings": {
        "/var/www/html": "/home/(username)/dev/data"
      }

右側の、ローカルのディレクトリはフルパスで書かないと動作しなかったので注意。

以上で設定は完了です。

お疲れ様でした。

デバッグしよう

デバッグしたい行の左側をクリックすると、赤い丸がついてブレークポイントが設定できます。

ブレークポイントを設定したら、F5を押すとデバッグ開始。

ブレークポイントを通るページにブラウザでアクセスすると、該当部分が以下のようにハイライトされて停止します。

左側に各種変数等が表示されます。

便利ですね!

F5を連続で押せば、次のブレークポイントに進める事ができます。

(もしブレークポイントで止まらない場合は、ipの設定が怪しいかもです。

詳しくは参考ページを読んでほしいのですが、192.168….の代わりに「10.0.2.2」に設定して見てください。)

参考:【Vagrant】ちゃんと理解する仮想ネットワーク #1 ~基礎編~【ネットワーク】



あなたもxdebugで快適なPHPライフを!

コメント

タイトルとURLをコピーしました