Allied ArchitectsAllied ArchitectsEngineer Blog

Vagrant + PHP + Xdebug リモートデバッグする設定手順

2014/08/29 Vagrant

お久しぶりです。野瀬です。

最後の投稿から約1年が経っており、時が経つのは早いなぁ〜と感じる今日この頃。

最近自分の周りでの開発環境はVagrantを使うのが増えてきています。
自分も流行に乗っかりVagrantを使って開発しています。

今回はそんなVagrantとPHPとXdebugを使ったステップ実行をする手順をご紹介したいと思います。しかもWebブラウザからだけではなくCommandLineからもステップ実行させる設定方法です。すご〜くいまさらな感じはしますが・・・
ググってもWebブラウザからのステップ実行は結構あるのですがCommandLineからのステップ実行の設定があまりなかったので同じように困った方の為に。

環境確認

あくまでも例ですので適宜自分の環境に置き換えてください。

Vagrant

  • Vagrant ver1.5.2
  • CentOS release 6.5 (Final)
  • PHP ver5.4
  • Apache
  • Xdebug

環境設定

  • IP:192.168.33.10(vagrant のデフォルト)
  • docroot:/var/www/html/sample

ローカルPC

  • 開発ツール:IntelliJ ver 12
  • PHP

環境設定

  • hosts設定:sample.com 192.168.33.10
  • プロジェクトディレクトリ:~/Develop/sample/sample

http://sample.com/indeex.phpでアクセスできる状態から話を始めます。

まずXdebugの設定から

サーバー設定

php.iniの編集

以下をphp.iniの一番最後に追加してください。

追加したらApacheを再起動。

IntelliJ 設定

続いて自分のPCのIntelliJの設定です。

Settings > Deploymentの設定

  • [+]Add Server
  • [Name:]Deploymentの名前を決める。今回はsampleで!
  • [Type:] (Local or mounnted folder)を選択

こんな感じ
スクリーンショット 2014-08-28 17.08.49
これでOK!!

connectionタブ

  • [Upload/download project files] > [Folder: ]プロジェクトディレクトリを指定
  • [Browse files on server] > [Web server root URL:]http://sample.com/indeex.phpを入力(多分なんでも良いと思う)

こんな感じ
スクリーンショット 2014-08-28 17.36.15

Mappingsタブ

  • [Local path:]プロジェクトディレクトリを指定
  • 下2つには/だけで良い

こんな感じ
スクリーンショット 2014-08-28 17.34.46
上記設定できたら「Apply」ボタン押下

Settings > PHP > Serversの設定

続いてServersの設定をします。

  • [+]Add
  • [Name:]何でもよい!今回はsampleで!
  • [Host]ローカルPCのhostsで設定したホスト名。今回はsample.comで!
  • [Port]80(デフォルトのまま)
  • [Debugger]Xdebug(デフォルトのまま)
  • [Use path mappings]にチェックを入れる
  • [File/Directory]のローカルPCのプロジェクトディレクトリ対になるように[Absolute path on the server]docrootを指定(今回は/var/www/html/sample)

こんな感じ
スクリーンショット 2014-08-28 17.41.11
上記設定できたら「Apply」ボタン押下
これでSettingsの設定は終わり。

Run/Debug Configurationsの設定

続いてRun/Debug Configurationsの設定です。
ここにあります。
スクリーンショット 2014-08-28 17.43.29

[+]押して[PHP Remote Debug]を選択

スクリーンショット 2014-08-28 17.46.53

  • [Name: ]何でも良い。今回はsampleで!!!
  • [Configuration] > [Servers: ]ここは[Setting > PHP > Servers]で設定したnameを選択。今回はsampleで!!!
  • [Configuration] > [Ide key(session id): ]ここではphp.iniで編集したxdebug.idekeyの値と同じものを入力する。今回はSAMPLEで!!

上記設定はこんな感じ
スクリーンショット 2014-08-28 17.50.06
[Apply]を押して[OK]押す。

これで設定は終了。お疲れ様でした。

実行

長い設定お疲れ様です。いよいよ実行してステップ実行です。

index.php のプログラムはこんな感じです。
スクリーンショット 2014-08-28 17.54.32

簡単プログラムですね。

では

ここにブレイクポイントを置いてみます。

こんな感じです。
スクリーンショット 2014-08-28 17.59.24

では実行してみます。
メニュー > Run > Debug ‘sample’を選択
スクリーンショット 2014-08-28 18.06.34

これで待機状態になります。

まずはWebブラウザからアクセス!!
スクリーンショット 2014-08-28 18.10.29

入力!そしてEnterを ターーーーーーーーーーーン!!!!!!!!!!

スクリーンショット 2014-08-28 18.12.08

キタ━━━━━━━(゚∀゚)━━━━━━━!!

Webブラウザは出来ました!
次はCommandLineからのステップ実行です。

待機状態まではWebブラウザと一緒なので省略します。

ターミナルからVagrant内に入り、phpで実行。

スクリーンショット 2014-08-28 18.21.10

そしてEnterをまたまた ターーーーーーーーーーーン!!!!!!!!!!

スクリーンショット 2014-08-28 18.24.49


キタ━━━━(゚∀゚)━━━━!!
やりました。

今回はここまで。まだまだ色々な設定方法があると思いますが今回はその一つを紹介させていただきました。
またここで紹介した開発ツールはIntelliJでしたがNetBeansやEclipseなどでも出来ると思いますので
ぜひ試してみてください。

nose.rei
  • nose.rei
  • ソフトウェアエンジニア
  • こんにちは、フットサル大好きな二児のパパです。 たまにはいい記事書けるようにがんばります。よろしくお願いします~!

RELATION ENTRY

Javascriptでスマホアプリを作ろう〜Titanium mobile 入門〜

Javascriptでスマホアプリを作ろ...

2013/10/21 JavaScript

お久しぶりです。野瀬です。モニプラ ファンブログを担当してます。 前回はC#でWindowsアプリを作るシリーズでいこうと思ったのですがPC シリーズ打ち切りを余儀なくされました。C#ではまた違った形で記事にできればと思います。 こちらが前回の記事 さて今回からはこれ! T...

続きを読む

C#でWindows アプリ作ってみる。その1:環境構築

C#でWindows アプリ作ってみる。...

2013/05/1 C#

ごあいさつ はじめまして、アライドアーキテクツの野瀬です。 先月4月にアライドアーキテクツに入社しまして、モニプラJPを担当してます。 普段ブログなど書くことがない私なので読みにくいとは思いますが、挑戦してみたいと思います。 暖かい目で見守ってくださると幸いです。 ...

続きを読む

nose.reiの記事一覧へ

ページTOPへ