VPS

さくらのVPS5日目 XdebugとPhpStormのセットアップ

今回の目標の1つが、VPSサーバーを利用した開発環境の構築で、XdebugをインストールしてPhpStormでソースデバッギングができることです。諦めかけましたが、なんとか動作させるまでの設定操作を確認することができました。

Xdebugのインストール

インストールしたPHPのモジュールを確認します。

#yum list installed | grep 'php'

php.x86_64          7.1.10-1.el7.remi @remi-php71 
php-cli.x86_64      7.1.10-1.el7.remi @remi-php71 
php-common.x86_64   7.1.10-1.el7.remi @remi-php71 
php-devel.x86_64    7.1.10-1.el7.remi @remi-php71 
php-gd.x86_64       7.1.10-1.el7.remi @remi-php71 
php-json.x86_64     7.1.10-1.el7.remi @remi-php71 
php-mbstring.x86_64 7.1.10-1.el7.remi @remi-php71 
php-mysqlnd.x86_64  7.1.10-1.el7.remi @remi-php71 
php-pdo.x86_64      7.1.10-1.el7.remi @remi-php71 
php-soap.x86_64     7.1.10-1.el7.remi @remi-php71 
php-xml.x86_64      7.1.10-1.el7.remi @remi-php71 
php-xmlrpc.x86_64   7.1.10-1.el7.remi @remi-php71

PHP7.1のxdebugモジュールの有無と、どのリポジトリにあるかを確認します。

# yum list available | grep 'php71'
:
php71-php-pecl-xdebug.x86_64 2.5.5-1.e17.remi remi-safe
:

xdebugをインストールします。

# yum install --enablerepo=remi-php71 php-xdebug

phpを確認します。

# php -v

PHP 7.1.10 (cli) (built: Sep 27 2017 08:27:18) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies
 with Xdebug v2.5.5, Copyright (c) 2002-2017, by Derick Rethans

Apacheを再起動して、phpinfo()でxdebugを確認して見ましょう。

# systemctl restart httpd.service

 

必要となる設定

VPSサーバーでXdebugを実行し、PhpStormが動作するPCでソースデバッグを実現するためには、通信やセキュリティに関する設定が結構大変です。何回も試してようやく動作させることができましたので、以下に要点をまとめます。

Xdebugを利用した作業は、VPSサーバーとPCのPhpStormが通信して動作します。そのため、VPSサーバーにXdebugをインストールしたら、クライアントPC側のインターネットに関する接続情報の設定が必要になります。

それに合わせて、クライアントPC側もVPSサーバーからのアクセスを受け入れられるように、インターネットの機器を設定しなければなりません。

以下の説明はこちらの環境に合わせたものとなります。利用環境はそれぞれ異なると思いますので、ご自身の環境に合わせて設定してください。

当方のPCのインターネット接続ですが、ルーターを通してPPPoE接続でインターネットに接続しています。ルーターのWAN側のIPアドレスは、ISPからDHCPサーバーを通して割り振られています。

利用しているPCはMac miniで、OSは最新のOS X 10.13.1 High Sierra、PhpStormは 2017.2.4を動作させています。

サーバー側の設定

設定項目には、クライアントPCのIPアドレス項目とアクセスポート指定があります。

Xdebugをインストールすると/etc/php.d/15-xdebug.iniファイルが登録されます。このファイルの内容を以下のように設定します。

xdebug.idekey = "PhpStorm"
xdebug.remote_addr_header = "HTTP_X_XDEBUG_REMOTE_ADDRESS"
xdebug.remote_autostart = 1
xdebug.remote_enable = 1
xdebug.remote_host = x.x.x.x ルーターのWAN側IPアドレス
xdebug.remote_log = /var/log/php_xdebug
xdebug.remote_port = 9000

設定が終了したらApacheを再起動します。

# systemctl restart httpd

さて、正常に動作しない中でApacheからのエラーログを見たところ、Xdebugで設定したログファイル「/var/log/php_xdebug」に対してオープンエラーが出力されていました。

そこでログ用のファイルを作り、ファイルパーミッション、SELinuxの設定を変更しました。

# cd /var/log
# touch php_xdebug
# chown apache:apache php_xdebug
# ls -aZ
# chcon -t httpd_log_t php_xdebug

上記「httpd_log_t」は、「ls -aZ」で確認した際phpのログファイルに設定されていたものに合わせました。

クライアント側の設定1(ルーターとPC)

ルーターとPCの設定が必要だったことに気付くまで、時間を多く使ってしまいました。

内容は利用する機器により設定が異なりますので、こちらで設定した作業を記載しますので参考にしてください。

ルーターはNATが利用されており、ポート9000のデータを接続されたLAN側PCに振り向ける必要があります。

当方はPCのLAN IPアドレスを確認し、ポート9000のデータを当該IPへ振り向けるように、ルータの管理画面から「ポートマッピングの設定エントリ追加」で設定しました。利用しているルーターはNEC製品です。

次にMac miniで、ポート9000のアクセスを許可し、接続させるアプリケーション(PhpStorm)をシステム環境設定で登録します。

アップルメニューからシステム環境を開き、「セキュリティとプライバシー」を実行します。「ファイアウォール」メニューを選択し、「ファイアウォールオプション」ボタンを押します。カギがかかっている場合は解除してください。

「外部からの接続をすべてブロック」のチェックを外し「内臓ソフトウェアが外部からの接続を受け入れるのを自動的に許可」にチェックします。

その上の+アイコンを押してPhpStormアプリケーションを登録します。

余談ですが、英語圏の方に「ルーター(router)」と言っても通じないので、「ラウター」と発音するように教わったのを思い出しました (^o^)。

クライアント側の設定2(PhpStorm)

設定は、PhpStormメニューからPreferenceウィンドウを開いて、「Languages & Frameworks」の「PHP」にある「Debug」と「Servers」に対して行います。

「Debug」はデフォルトの設定のまま利用できると思いますが、「Xdebug」セクションは確認しておきましょう。なおソースデバッギングを実施するまでの作業手順が、ダイアログ画面の上部に記載されています。

「Servers」は、サーバーホストのIPアドレスと、デバッグするソースがあるPhpStormのプロジェクトファイルのあるディレクトリを指定しました。プロジェクトファイルの指定は、上の「Use path mappings」にチェックを入れて操作します。

ここまでの設定で動作が確認できないようであれば、以下の設定も試してください。

その他の設定

その他SFTPを利用してファイルがアップロードできるように、Preferenceの「Build, Execution, Deployment」メニューから「Deployment」を設定しています。

DeploymentではSFTP接続する「Connection」タブページと、プロジェクトのディレクトリパスを指定する「Mappings」タブページを設定しています。

先にSFTPを利用してサーバーのソースを書き換える設定をしたため、インターネットを通してソースデバッギングを実行するのに、DeploymentやSFTP接続の設定が必要かどうか確認しておりません。もしかすると、プロジェクト配置情報や接続データのやり取りで必要かもしれません。

PhpStormの設定はプロジェクトを開いた状態で設定しました。Preference画面にも「For current project」と表示されていました。

 

最後に感想です。

動作が確認できるまで時間がとても掛かりました。

var_dump()を利用して開発を進めることを考えると、ソースデバッグができればとても楽になります。

が、果たして実際に自分が活用できるか、これから実践の中でさらに検討を進めて行きたいと思います(ちょっと腰が引けています)。

 

以下参考にさせていただいたページのリンクです。

PHPSTORMでXdebugを使えるようにしよう!
リモートデバッグ実行までの設定(phpstorm+php+Xdebug編)
PHP Debugging with PhpStrom and Xdebug

 

記事に関して質問をいただいても回答できませのでご了承ください。