mozikeru.com

和歌山在住。1児の父。IoTエンジニア。各種ご相談承ります。

Windows10 + Vagrant + VisualStuidoCodeでPHPのデバッグ環境を構築する

Windowsマシンを頑なに使用し続けていますが、PHPのデバッグ環境が随分前からXAMPP+Eclipseの組み合わせのままになっていて、時代に取り残されている感がすごかったため、もう少し小回りが効く環境を作りたいなと思い、重い腰を上げました。

 

ここで言う小回りが効くというのは必要に応じてサーバーOSやPHPのバージョン、Apatchやnginx等のHTTPDエンジンを変更する事が出来るというような意味です。仮想環境を切り替えるのも当然ながら、構築に必要なコマンドを定形的に保存しておいて、最低限の環境なら調べ物無く作れるようにしておく、という目論見もあります。


■VisualStudioCodeのインストール

下記のURLからインストーラをダウンロードしてインストールします。

code.visualstudio.com


■VirtualBoxのインストール

下記のURLからインストーラをダウンロードしてインストールします。

https://www.virtualbox.org/wiki/Downloads

※Hyper-VとVirtualBoxは共存できません。
 https://qiita.com/shinyay/items/9ca418e5d2ae71567f53
 Hyper-VがONになっているとVirtualBoxの仮想環境を立ち上げた途端ブルースクリーンになったりします。Windows用のDockerがインストール済みの環境だったりする場合は注意して下さい。

 

■Vagrantのインストール

続いて下記のURLからインストーラをダウンロードしてインストールします。

www.vagrantup.com


■VagrantのBOXファイルをダウンロード

コマンドプロンプトにて下記形式のコマンドを実行することで、
Vagrantの個別の仮想環境である、BOXファイルをダウンロードします。

vagrant box add 任意のBOX名 boxファイルURL


今回は以下のコマンドでCentOSのVer7.1をCentOS71という名前で取得しました。

vagrant box add CentOS71 https://github.com/CommanderK5/packer-centos-template/releases/download/0.7.1/vagrant-centos-7.1.box

BOXファイルURLの一覧は下記から参照できます。

A list of base boxes for Vagrant - Vagrantbox.es


ちなみに、取ってきたBOXファイルは以下のPATHに保存されます

C:\Users\ユーザー名\.vagrant.d\boxes
※環境によって違うかもしれません。


■Vagrantfileの作成

それぞれの仮想環境の設定が書かれたファイルがVagrantfileです。
以下のコマンドで作成します。

(環境を配置したいディレクトリの配下にて)

vagrant init box名 

今回の私の環境の場合、C:\vagrant\centos71というディレクトリに環境を
作成する事にしました。また、BOXをCentOS71という名前で保存しましたので、
コマンドとしては以下になります。

cd C:\vagrant\centos71
vagrant init CentOS71

今後他のVagrant環境を作成する際にはC:\vagrant\配下に、
それぞれの環境の名前のディレクトリを作成してVagrantfileを作っていくつもりです。

 

■Vagrantfileの基本設定(ネットワーク設定)

Vagrantfileをエディタで開き、下記部分のコメントアウトを解除しました。

# config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"
# config.vm.network "private_network", ip: "192.168.33.10"

config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"
config.vm.network "private_network", ip: "192.168.33.10"

これで仮想環境の80番ポート(http)が8080にフォワーディングされ、
また、仮想環境のIPアドレスが192.168.33.10に設定されます。

ですので、仮想環境にWEBサーバーを構築した場合、
ブラウザのアドレスには下記のURLを入力してアクセスすることになります。

http://192.168.33.10:8080


■仮想環境の起動

Vagrantfileを作成したディレクトリ(先程vagrant iniを実行したディレクトリ)にて、
下記コマンドを実行することで仮想環境を起動させることが出来ます。

vagrant up

仮想環境を終了する際は下記。

vagrant halt

仮想環境を再起動させる場合は

vagrant reload

↑reloadは、書き換えたVagrantfileの内容を反映させたい場合に有効です。


■SSHでの接続

vagrantの仮想環境にはSSHで接続が可能です。
Windowsの場合、teratarm等のターミナルから192.168.33.10に対してポート22で
アクセスすることで接続することが出来ます。

その場合のログインIDとパスワードです。

ID;vagarant
Pass:vagarant


■Vagrant仮想環境とホストPC(Windows)間に共有ディレクトリを作成する

Vagrantfileに下記の記述を行うことで仮想環境とホストPC間に共有ディレクトリを
作成することができます。

config.vm.synced_folder "ホストOS側のフォルダ", "仮想環境側のフォルダ"

またオプションを指定することで仮想環境側の所有者やパーミッション等を指定することが出来ます。


今回、私は仮想環境側の共有ディレクトリをhttpの公開ディレクトリに紐付けて直接デバッグしたかったので、下記の設定にVagrantfileを書き換えました。

config.vm.synced_folder "./shared", "/project/vagrant/shared", :owner => 'apache', :group => 'apache', mount_options: ['dmode=777','fmode=755']

↑ホスト側のsharedディレクトリ(C:\vagrant\centos71\shared)と仮想環境側の/project/vagrant/sharedを共有しています。

 ちなみに、この設定を書いて起動する場合、仮想環境側のディレクトリはvagrant up時に作成されますが、Windows側の該当ディレクトリは自動で生成されません。事前に手動で作成しておかないと起動に失敗します。

各オプションの説明は以下の記事を参考にさせて頂きました。

qiita.com


■ホストPC側(Windows側)にシンボリックリンクを作成する

Windows側共有ディレクトリは、Vagrantfileからの相対パスですので、先ほどの設定に則ると私の環境では以下のパスとなります。

C:\vagrant\centos71\shared

しかし、これでは環境の数だけデバッグ対象のPHPファイルをコピーしないといけません。メンテナンス性が悪すぎます。
(コピーし忘れて古いバージョンでデバッグしてしまうとかあるあるです…)


というわけで一箇所に集めたいと思います。

Windows側に下記のPATHのディレクトリを作成します。

C:\project\vagrant\shared

※仮想環境側共有ディレクトリとPATHを合わせるのがポイントです。
 xdebug経由でVisualStudioCodeにてPHPデバッグする際に、仮想環境のPATHに
 Widnows側でもソースを探しに行ってしまうため、上記PATHにソースコードを
 置いてしまうのが手っ取り早いです。

次に、上記ディレクトリとVagrantfileディレクトリにシンボリックリンクを作成します。(ショートカットではなくシンボリックリンクです。注意!)

C:\Windows\system32>mklink /D C:\vagrant\centos71\shared C:\project\vagrant\shared

上記のコマンドでも作成出来ますが、WindowsとLinuxでコマンドのターゲットとソースの書き方が逆だったりして嫌な感じだったので、私は下記のツールを使用しています。

www.gigafree.net

  

■仮想環境にPHP,HTTPD、その他諸々をインストール

仮想環境にSSHで接続後、CentOSなので普通にyumでインストールします。

sudo yum -y install httpd

sudo yum install --enablerepo=remi,remi-php70 php php-devel php-mbstring php-pdo php-gd

sudo yum install -y php-opcache php-mbstring php-gd php-mcrypt php-xml php-pear php-devel php-xmlrpc php-pecl-apcu php-pecl-xdebug


的な。
一応httpdとphp7とxdebugをインストールしています。
入れたらhttpdの起動設定等々必要ですが、その辺は割愛します。

weblabo.oscasierra.net


■共有ディレクトリとhttpdの公開ディレクトリにシンボリックリンクを作成する

仮想環境化のhttpdの公開ディレクトリ(/var/www/html/)と先程の共有ディレクトリ間にシンボリックリンクを貼ります。

すでに存在するhtmlディレクトリを削除後、シンボリックリンクを作って、
パーミッションを変更しています。

sudo rm -rf /var/www/html/

sudo ln -fs /project/vagrant/shared /var/www/html

sudo chmod 755 /project/vagrant/

 

■xdebugの設定

下記URLに従って仮想環境側にphpのデバッグツールであるxdebugの設定を行います。

qiita.com


■Visual Studio CodeへのPHPデバッグの設定

下記を参考にVSCodeに設定を施しました。

qiita.com


ポイントは
・PHP Debugの機能拡張をインストールすること

・launch.jsonの設定に下記二行を追加すること
 "serverSourceRoot": "/var/www/html",
 "localSourceRoot": "${workspaceRoot}"

・仮想環境側のxdebugとポート番号をあわせる事


という感じかと思います。

--------------------------------------------------------------------- 

以上、つらつらと書きましたが、これでようやく少しはモダン(?)なPHPデバッグ環境を
手に入れることができました。
Vagrantを使用すると、作成した環境を独自のBOXにパッケージング(vagrant packageコマンド)して人に配ることも出来るので、各人の開発環境による挙動差異も減らせ、チーム開発も捗るように思います。