XAMPPによるPHPローカル開発環境の構築（デバッグ設定まで）

# はじめに
VScodeはインストール済みであるという前提です。入っていない場合は[こちら](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)から導入してください。
Ubuntuサーバー上で動かすPHPなどのデバッグやテストを行うためにローカル環境を構築したときのメモ書きです。

# XAMPPのインストール
(1)[こちら](https://www.apachefriends.org/jp/index.html)からダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/f70a223b-30b9-7915-c557-4b3164ccbb23.png)

(2)以下すべてポジティブな選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/a21ee4ab-8c40-2758-22a0-20e4da2e2a86.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/21d44aba-524f-be2b-4c14-975a6a128fc4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/f1709a76-d2b3-4104-3b3a-d1e1f597c7a0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/4d458fb6-9116-9d8c-8df3-4a50fe6e70b1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/69e03355-cdac-db81-668b-a9cb16201da9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/1f3b8713-48f5-d470-1888-d8a4a61b04e7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/e6a0c0a1-b795-59d6-28c8-75c5eba91872.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/a1e0ab14-bd00-3079-9730-39e54454ef7f.png)

以上でインストールが完了しました。

# XAMPPセットアップ
(1)インストールしたXAMPPを管理者権限で実行
(2)以下の画面が開くので、ApacheとMysqlをstop⇒Startに変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/088c7dcf-6d23-e4a7-46d7-99b1dccebcbf.png)
＊ApacheとMysqlが緑色になれば成功です。

＊もしも以下の画面になったら....
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/c4260f97-b458-c03c-b235-bfcb99c62e81.png)

タスクスマネージャーを起動し、Ｗ3SVCを右クリックし、サービス管理ツールを開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/2c8b11b2-0524-8c1b-f742-661edd9fa127.png)

次の画面でWorldWideWebサービス発行サービスをダブルクリックして開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/51ada79b-9100-d626-d1e6-687bc89af050.png)

開いたらスタートアップの種類を開き[自動]→[手動]に変更

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/b33412ea-8e7a-5ea0-383d-b25c0d251ab0.png)

今開いている場合は停止させておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/1e2ae486-4f97-9c5d-9ca9-55cafc36e823.png)

Apacheを一度[Stop]して[Start]させることで再起動を行う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/57a2940f-0a10-36ab-8793-c5dca7d3aba6.png)

# デバッグ機能の追加
(1)C:\xampp\htdocsの下にinfo.phpというファイルを作成し、作製したファイルに以下のコードを記入します。
```
<?php
phpinfo();
```

(2)XAMPPの設定ができていれば以下のURLでphpの情報が確認できます。
[http://localhost/info.php](http://localhost/info.php)

(3)[こちらのサイト](https://xdebug.org/wizard)にinfo.phpの情報をすべてコピーして貼り付ける。その後Analyse　my phpinfo() outputをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/8c7bb8de-a206-60fa-0c68-0eaa6c2f66c0.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/c3c343e0-e06b-3416-f3e3-78efa3dd81c6.png)


(3)DLLファイルが生成されるのでダウンロードする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/c99506c9-7a81-0b07-d0dd-3cf0a499b38e.png)

(4)ダウンロードしたdllファイルを C:\xampp\php\extにコピーする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/1f150138-bb07-42e4-a9c6-d90d3b71c544.png)

(5)C:\xampp\php\php.iniの末尾に以下の行を書き加える
```
[XDebug 3.X.X]
xdebug.mode=debug
xdebug.start_with_request=yes
zend_extension = "C:\xampp\php\ext\php_xdebug-3.3.2-8.2-vs16-x86_64.dll"
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/38c92620-cdc1-82b2-1b58-de11085ce66a.png)
＊zend_extension = "C:\xampp\php\ext\php_xdebug-3.3.2-8.2-vs16-x86_64.dll"　の部分は環境によってことなるため移植したdllファイルのフルパスを確認する

(6)Apaceを再起動する

(7)環境変数のユーザーpathに C:\xampp\php を追加して、PCを再起動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/a4695068-6d31-c55c-d546-9dead287edeb.png)

# VSCode側の設定
(1)拡張機能の検索からPHP Debugを検索しインストール
*似ているのがたくさんあるが☑Xdebugと書いてあるものをインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/09285c55-830b-c976-5819-6a1c625ae432.png)

(2)執行とデバッグをクリックし、launch.jsonファイルを作成する
（C:\xampp\htdocs の中に .vscodeフォルダが無かったら、先に作成しておくこと）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/708590f7-4b42-fd30-9dde-68eb42707c6e.png)

(3)jsonファイルに対してデフォルト値はそのままで末尾に以下のコードを書き込む

```
{
"name": "Listen for Xdebug",
"type": "php",
 "request": "launch",
 "port": 9003,
"pathMappings": {
 "C:\\xampp\\htdocs": "C:\\xampp\\htdocs"
 }
}
```

(4)実行とデバッグで待機状態になっていればデバッグ開始可能

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/175b3c1c-78b8-b35a-5c21-b157e5d17439.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/90c2d62b-40b0-ce0a-b0ef-5a339649f7f7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4003510/ef465e28-2e34-74b2-2d98-0c02456c0588.png)


XAMPPのフォルダ内にphp.iniがあるはずなのでそこに必要な拡張機能の箇所のコメントアウトを外す、もしくは追加してください。
（例）
//ODBC使用
extension=pdo_odbc　

//拡張モジュールの場所を指定
extension_dir="C:\xampp\php\ext"  
//画像操作
extension=gd		

//2バイト文字
extension=mbstring	

//zipファイル操作
extension=zip					 

# おわりに
ブレークポイントの設定などをしながら実際にデバッグをしてみて問題なく動くようであれば成功です。