VSCode+PHP5.4+Apache24+MySQL5.6(+XDebug)で開発環境を作る

#目次
- 前書き
- MySQLのインストール
- PHP5.4のインストール
- Apache24のインストール
- 後書き

#前書き
仕事で[xoops](https://ja.wikipedia.org/wiki/XOOPS)という古代によく使われていたコンテンツ管理システムを触る必要があり、
xoopsに依存した環境をローカルに構築しなくてはなりませんでした。
せっかくMarkDownで環境構築手順書を書いたので、少し手直ししたものを共有させていただきます。:bow_tone1:

※VSCodeのインストールについては省略させていただきます。

# MySQLのインストール
- 下記ダウンロードページからインストーラをダウンロード。サイズの小さいインストーラはインターネットに接続されていないと機能が制限されてしまうバージョンのようなのでデータサイズの大きい物をダウンロードする。

[ダウンロードページ](https://dev.mysql.com/downloads/windows/installer/5.6.html)
- インストーラを起動し画面に従ってインストール
![2019-12-20-18-34-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/aa5de68c-31db-a197-a43c-159451fa17d6.png)
![2019-12-20-18-39-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/25758469-605d-c9ac-5881-c6cecd763bf0.png)
- 「execute」をクリック
![2019-12-20-18-40-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/e8164f8f-97d2-16b0-cb25-6b9f033c3c73.png)
![2019-12-20-18-41-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/8f09fa51-9951-824b-1e2f-46cf20d6b87b.png)
![2019-12-20-18-42-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/3092cd0b-f5d4-b458-0b1c-bd22fa588f0a.png)
![2019-12-20-18-42-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/f5f9f5fd-5270-283d-aea2-d876262f14af.png)
![2019-12-20-18-43-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/e2c2133b-aeb3-1c03-5bab-301415d7c12d.png)
![2019-12-20-18-43-40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/5a82128f-e590-dc76-c558-61743de4af73.png)
![2019-12-20-18-44-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/35a2cd34-bc18-ed17-e75b-8c52fd438740.png)
![2019-12-20-18-44-40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/18bebcca-028f-9c60-cb58-b9f12e759581.png)
![2019-12-20-18-45-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/1ffdde3a-7254-f42b-b857-a231c03c5e84.png)
![2019-12-20-18-46-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/17b61d7b-ae21-e6d7-9efa-f2b969c78ccd.png)
![2019-12-20-18-46-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/0adabb7f-9458-4715-3f80-6d143716e49e.png)
![2019-12-20-18-46-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/0e33f3f4-3d09-6030-fb4a-91bd0d1b3443.png)
![2019-12-20-18-47-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/802f873b-d6ca-bb42-8068-09c40ae62a2b.png)
![2019-12-20-18-47-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/161ea984-5b40-149e-f364-dd6aee340c82.png)

- コマンドプロンプトを起動し、「mysql --version」「mysql -u root -p」等実行できれば完了。
![2019-12-20-18-55-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/5fd2ef19-a126-71e3-c729-80d853622242.png)

#PHP5.4のインストール
- 下記ダウンロードページからphp-5.4.16-Win32-VC9-x86をダウンロード。

[ダウンロードページ](https://windows.php.net/downloads/releases/archives/)

- 解凍し、C直下へコピーする。フォルダ名を「PHP」へ変更。

![2019-12-21-23-05-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/5939d338-b67b-cf6b-32a8-c665f4ed722a.png)

![2019-12-21-23-05-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/3c6c800c-1747-b599-83fb-cc861963720b.png)

- 解凍したフォルダからphp.ini-developmentをC：\Windowsへコピーし、ファイル名をphp.iniへ変更する。
![2019-12-21-23-10-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/b5a109ce-3ac7-2c39-9062-6551c554e42c.png)
![2019-12-21-23-10-44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/056bc314-ad67-b822-e13d-ae5479359241.png)

### php.iniファイルの編集 
・以下のように編集して保存。

```ini:php.ini
;default_charset = "UTF-8"
↓
default_charset = "UTF-8"
```
```
; Windows: "\path1;\path2"
;include_path = ".;c:\php\includes"
↓
; Windows: "\path1;\path2"
include_path = ".;c:\PHP\includes;C:\PHP\PEAR"
```
```
doc_root =
↓
doc_root =  "C:\Apache24\htdocs"
```
```
; On windows:
; extension_dir = "ext"
↓
; On windows:
extension_dir = "C:\PHP\ext"
```
```
;extension=php_gd2.dll
↓
extension=php_gd2.dll
```
```
;extension=php_mbstring.dll
↓
extension=php_mbstring.dll
```
```
;extension=php_mysql.dll
↓
extension=php_mysql.dll
```

### システム環境変数の編集

- コントロールパネル（表示方法：小さいアイコン）＞システム＞システムの詳細設定＞環境変数からシステム環境変数内のPathを選択し、「編集」をクリック
![2019-12-21-23-42-28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/98e1b66d-178b-511d-577b-53c760f81da7.png)


- 「新規」をクリックし、「C:\PHP\」を入力し、「OK」
![2019-12-21-23-48-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/522ac960-4776-b802-d739-b0957bfadc9d.png)


### PHPインストール確認

- コマンドプロンプトを起動し「php -v」を実行。下図のようにPHPのバージョン情報が表示されれば完了。
![2019-12-21-23-53-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/63b5439e-b052-a28d-8316-6a468e979f0b.png)

# Apacheインストール
- 前提としてPHPがインストール済み
- 下記ダウンロードページからhttpd-2.4.41-win32-VS16をダウンロード。
  
[ダウンロードページ](https://www.apachelounge.com/download/)

- ダウンロードフォルダを解凍し、フォルダ内にあるApache24をC直下へコピー。
![![](2019-12-22-00-00-14.png).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/1086b6ce-673a-d144-a8ea-5ebef9131f85.png)

### httpd.confファイルの編集

- C:\Apache24内のconfフォルダを開き、httpd.confファイルを編集する。
- 176行目に一行追加

```
LoadModule php5_module "C:/PHP/php5apache2_4.dll"
```

- 以降は該当箇所を修正

```
#ServerName www.example.com:80
↓
ServerName localhost:80
```

```
<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>
↓
<IfModule dir_module>
    DirectoryIndex index.html index.php
</IfModule>
```

- 385行目に2行追加

```
AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps
```
### インストール

- コマンドプロンプトからApacheをインストールする。コマンドプロンプトを起動（管理者権限で起動する）し、「C:\apache24\bin\httpd.exe -k install」を実行。
下図のように出力されれば成功。「exit」でクローズ。
![2019-12-22-00-57-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/f4532158-3826-0bf2-a02a-141e42790755.png)


- C:\Apache24\bin内のApacheMonitor.exeを実行し、タスクバーのアイコンをダブルクリック.
- Apache2.4を選択し「Start」をクリック。
![2019-12-22-01-01-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/5163bc84-0c85-ce71-9920-f9eb3b0009ff.png)
![2019-12-22-01-07-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/658e5177-00e3-e190-be84-b822d2594d54.png)


- http://localhost/へ接続し、接続できればOK。
<img width="278" alt="2019-12-22-01-10-522.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/818c26a5-ac0a-c340-7714-8602a5d1ca0c.png">

# PHPデバッグ

- 前提としてPHPのインストール、Apacheのインストールが完了していること。

### 環境作成
- VSCode拡張機能PHP Debugをインストール
![2019-12-22-01-52-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/487e5611-1008-e428-d56b-dce0b2d0bf1a.png)


- 「php_xdebug-2.4.1-5.4-vc9.dll」を[XDebugダウンロードページ](https://xdebug.org/download)でダウンロードし、C:\PHP\ext\へ配置。
  (「Xdebug2.4.1」下の下図リンクをクリック)
  ![2020-01-20-12-24-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/bda7146e-49ec-fd2c-9c87-25be627c7563.png)


- C:\Windows\php.iniの末尾に下記追記。

```
[XDebug]
xdebug.dump_undefined = 1
xdebug.remote_enable = 1
xdebug.remote_host=localhost
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart = 1
zend_extension=C:\PHP\ext\php_xdebug-2.4.1-5.4-vc9.dll
```

- ここでPHPとの紐づけは完了したのでコマンドプロンプトで確認。（「php -v」を実行し、「with Xdebug~~」が出力されればOK）

![2019-12-22-02-58-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/fdabf390-3307-6f10-0040-c00ecaa7a3f5.png)

- VSCodeでファイル＞「フォルダーを開く」を選択し、C:\Apache24\htdocsを開く。

- VSCodeウィンドウ左の![2019-12-22-03-04-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/7870880b-cc71-170d-810b-8cc7d36312fd.png)をクリックし、![2019-12-22-03-05-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/6da692bb-b9f9-ac98-beb8-5f7d43597f8c.png)をクリックすることでlaunch.jsonを開く。

- launch.jsonに下記を追記。

```
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "${workspaceRoot}": "${workspaceRoot}"
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000,

        }
```

### デバッグ実践
-テストファイル（test.php）を下記のように記述し、C:\Apache24\htdocsに作成。

```php:test.php
<?php
    $name = "test";
    echo $name;
    $name = "test2";
    echo $name;
    ?>
```

- ブレイクポイントを設置し、Listen for XDebugを選択して実行
![2019-12-22-03-15-50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/6d67059c-3f78-e2eb-99a2-f63eaa229562.png)
![2019-12-22-03-10-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/56b4b91c-631d-3e90-56ef-5772543755e9.png)

- ブラウザでhttp://localhost/test.phpを開くとロードで止まり、VSCodeでブレイクポイント時点での変数の値等が見ることができる。F5キーで処理を進めることができる。
![2019-12-22-03-25-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482410/94a3f92a-c7da-ff53-dfa9-d08e38270459.png)

- 以降、Launch currently open scriptを選択して実行すればブラウザで対象ファイルを実行しなくともデバッグ可能。

参考：
https://qiita.com/ariaki/items/efbbf77849e0778c75fc
https://qiita.com/dz_/items/fb574782f4b4b30149a8
https://qiita.com/deux222/items/af75319ece05653c4bb5
https://www.webdlab.com/local/local-apache-5/
https://www.webdlab.com/local/local-php-4/
https://qiita.com/ariaki/items/efbbf77849e0778c75fc
https://qiita.com/dz_/items/fb574782f4b4b30149a8
https://qiita.com/deux222/items/af75319ece05653c4bb5

#後書き
所謂レガシーなシステムの改修ということでこのサイトのやり方だけでデバッグまでできる！ということがなく、様々な情報を試行し開発環境を作り上げることができました。参考にさせていただいたサイト様、筆者様に感謝です。本記事もそんなサイトの一つになれればと思います。本記事の一部でも参考になれば幸いです。:v:

以上。