XAMPPをインストールしてPHPの環境を簡易構築した備忘録

## はじめに

業務で扱う可能性が出てきたためPHPの環境を自宅に作りたいと思い構築した備忘録です。
実際にWebサーバを起動させてブラウザで表示させるところまで試します。

## XAMPPってなに？

簡易的にPHPの環境を構築できるOSSのツールです。
インストールするだけで、PHP、DB、Webサーバ等を一括で使えるようにできます。
本来であれば、個別にインストールしないといけないため、今回は手間を省くために使ってみます。

#### XAMPPってどういう意味？
それぞれの頭文字をとっています。
```
X:クロスプラットフォーム(Windows,Linux,MaxOSどれでも使える)
A:Apache(Webサーバ)
M:MySQL(DB)
P:PHP
P:Perl
```
::: note
**注意**
インストールするXAMPPのバージョンによって使用できる各言語、サーバのバージョンが決まってるます。
:::

## XAMPPインストール

下記サイトから自分が使用するOSに合わせてインストールします。
今回はWindowsにインストールします。

https://www.apachefriends.org/jp/index.html

インストールが終わるとインストーラがローカルに保存されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/7f58dd06-a592-4879-9828-ef5a5f0e74b2.png)

## XAMPPセットアップ

1. インストーラの起動
起動すると下記画像のような警告のポップアップが表示されます
→OK押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/1a96d6a6-24b2-49a2-b969-998c27029843.png)

2. 画面に沿ってNextを押していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/e5e6e3f4-8378-400b-b335-94b4a7c54594.png)

3. インストールするものにチェックを付けてNext押します。不要なら外してOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/2b84eeca-8952-4377-b8f1-69e2060c3838.png)

4. インストールするPathを決めます。デフォルトでOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/37c39677-93e7-4b00-93b1-c8a4eb8f6ab1.png)

5.言語を決めます。日本語はないのでデフォルトの英語にしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/006e41e6-4d5e-4aec-a4c4-31e7c89859a7.png)

6. 最後にNext押してインストールがはじまります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/11077610-3058-4461-9b4f-484113c9fa73.png)

7. しばらく待機します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/322680cc-fb48-466c-a1d5-d3b1521b2d6e.png)

8.Finishで完了です。「このアプリをセキュリティ的に許可するか？」とポップアップがでたら許可でOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/ebd75a10-19ee-4e51-9526-3bcc5c367772.png)


## XAMPP起動

起動後の画面です。
各モジュールに対するStartボタンを押すことで起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/28236aad-2c8b-474c-bd4b-8b2bf1ab86b0.png)

1. Apacheを起動する。成功すると緑のマークが付き、ポート番号、PIDが表示される。
エラーがでたら、Logsを押すことでErrorログ等を確認できるため、ログから原因を調査する。
→だいたいポートの競合でエラーを吐くことが多い。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/40bb2e63-910c-4aa2-8468-cc720d590ef7.png)

::: note 
**メモ**
Netstatボタンを押すことで現在使用している端末のポート状態を確認できる

例：Apatchでポート競合していエラーが出た場合、Nameに**System**となってることがある。
この場合使用端末で既にポートを使用している場合があるため、問題なければ先に使ってるプロセスを止める。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/dccbc2d7-4ca0-4a1c-863a-a0a41f36f824.png)
:::

#### Windowsの競合の場合
下記を確認する

コントロールパネル→プログラムプログラムと機能→Windowsの機能の有効化または無効化を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/4e4b9a20-9ce8-4c6c-8867-feadfd17411a.png)

インターネットインフォメーションサービスん→World Wide Webサービスのチェックを外してOK
→Windowsでデフォルトで機能しているIIS(webサーバ)を停止ができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/06393672-f2bb-44bb-9647-9de38092fe6a.png)

2.ブラウザでWebサーバが機能してるか確認する

アドレスバーに**localhost**と入力してEnterで下記画面が表示されていればOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/b7eceaed-74b3-4657-b9ab-921d26e06719.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/2cc485df-e9c4-4910-bbe7-0361042d3ad9.png)


## テスト用PHPファイルを作って画面上に表示する

1. VSCODEを起動します。(エディタは何でもよいです。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/0030e949-3d10-46bb-889e-6a13b04d01cb.png)

2. 先程インストールしたXAMPPのフォルダ配下にあるhtdocsをVSCODEで開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/a41b151f-0aee-4f2a-a73f-1e4e5751256b.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/05f9b553-e084-4b43-9145-3109e18d16a5.png)

3.新規にファイルを作成しhello.phpとする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/df328df5-fc35-41e7-98b1-6414ed6317fd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/24178d41-2efb-4f75-9062-0cf363a14efd.png)

4. hello.phpにテストコードを書く

```
# hello.php
<html>
    <body>
        <h2> My First PHP Webpage </h2>

        <?php echo "Hello World!!";
        ?>
    </body>
</html>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/9725eca0-7b56-413f-acc9-893b484e7dcf.png)


5.アドレスバーに作成したファイルのパスを書いて実行
ブラウザ上に表示されることを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/4ec9fc0c-9079-42b4-8cc0-5c341b8a8297.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/60b59268-158c-4b1c-94e5-052414e754fc.png)

以上、ソフトのインストールからブラウザ上に作成ファイルを表示するところまで確認ができました。