Mac XAMPPを用いてPHPのローカル開発環境を整える

## 〜宣伝〜

:::note info
個人開発でエンジニア専門マッチングサービスを開発しましたので、是非未経験からエンジニア目指している人！現役エンジニアで教えたい人！使ってみてください！

β版リリース記念キャンペーン中です！

10名様限定、抽選でお好きな技術本1冊プレゼント！
🎉当選者にはメッセージ差し上げます(送付の際に住所はお聞きしません)
詳しくはこちらから↓

https://x.com/dokupro01/status/1796837336145436846
:::
https://dokupro.dev/

# 目的

- PHP7.4のローカル開発環境の整え方をまとめる
- 環境構築を優先しその他の作業は誰でも理解できるような方法で進める
- ApacheとMySQLを使用して構築する

# 余談

- MacはXAMPPではなくMAMPを使うらしい、本末転倒感があるが本方法よりMAMPを使う方法がいいと思う。
- MacのローカルにLaravelの開発環境を作りたいならHomeBrewなどを使用してPHPやMySQLを入れたほうが勉強になるかもしれない。下記にMacに直接Laravelのローカル開発環境を構築したときの記事のリンクを記載する。
    - [Mac HomebrewでPHPをインストールする](https://qiita.com/miriwo/items/cd54077aad7e139cf518)
    - [Mac Laravelの環境構築を行う](https://qiita.com/miriwo/items/adaaaeecae69d6392e08)
    - [Mac HomebrewでMySQLをインストールする](https://qiita.com/drafts/37e4dfec4484d389db07/edit)
- PHPをテスト実行したいだけなら下記サービスのほうが簡単にPHPを実行できて良い。
    - [https://paiza.io/ja](https://paiza.io/ja)

# 実施方法概要

1. XAMPPのインストール
1. ApacheとMySQLの起動
1. テスト

# 実施方法詳細

1. XAMPPのインストール
    1. 下記サイトにアクセスする。
        - [https://www.apachefriends.org/download.html](https://www.apachefriends.org/download.html)
    1. XAMPP for OS Xの「7.4.2 / PHP 7.4.2」の「Download(64bit)」をクリックする。
        ![スクリーンショット 2020-02-28 22.34.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/db62dfea-a796-6334-562e-c7682b405ab5.png)
    1. 画面が切り替わり、ダウンロードが開始されるので完了するまで待機する。
        ![スクリーンショット 2020-02-28 22.34.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/cf5b1cef-59a5-8b55-e89c-0a4cba8f5cf1.png)
    1. Downloadフォルダを開きダウンロードしたインストーラ「xampp-osx-7.4.2-0-vm.dmg」を開く。
        ![スクリーンショット 2020-02-28 22.48.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/25570e59-9283-41dc-c8f0-f2ed4e5408e1.png)
    1. 下記のウインドウが開いたらXAMPPのアイコンをドラックしてアプリケーションフォルダに移動する。
        ![スクリーンショット 2020-02-28 22.49.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/0f7df5fb-a50a-451f-b26a-4809a1e824fc.png)
    1. アプリケーションフォルダを開きXAMPPのアイコンをクリックして起動する。
        ![スクリーンショット 2020-02-28 22.52.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f2854ab0-0010-9cba-7bd5-73b9fdfc81ec.png)
    1. 下記のウインドウで「開く」をクリックする。
        ![スクリーンショット 2020-02-28 22.53.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/5deaadb7-3dac-f7ad-3ddd-6567b9604c36.png)
    1. 初回インストールなので管理者権限が必要になるウインドウが開くので「OK」をクリックする。
        ![スクリーンショット 2020-02-28 22.54.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/da404a6a-a9d7-8488-3fb3-e449acff6ecb.png)
    1. 下記のウインドウが開いたら現在のアカウントにログインする時のパスワードを入力する。
        ![スクリーンショット 2020-02-28 22.55.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/01c2d6e7-17a1-a396-334b-04249a320543.png)
    1. DockのXAMPPのアイコンをクリックして下記のウインドウが表示されればXAMPPのインストールは完了である。
        ![スクリーンショット 2020-02-28 22.57.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/cef23d19-f73b-a93e-a6b5-6782da2599e7.png)
1. ApacheとMySQLの起動
    1. XAMPPを起動して下記の画面が開いたことを確認する。
        ![スクリーンショット 2020-02-28 22.57.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/af5ac971-6b8f-b694-f90d-0a726791792a.png)
    1. 「Start」をクリックしたあとStatusが一旦黄色になることを確認し待機する。
        ![スクリーンショット 2020-02-28 23.19.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/35bccc92-69b4-8e47-842f-30d3b5710955.png)
    1. ウインドウが変化し、Statusが緑色になりIP Addressが表示されことを確認する。
        ![スクリーンショット 2020-02-28 23.23.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/6434d247-5a5c-a21f-2e57-5a9680997f24.png)
    1. Serviceのタブを開く
        ![スクリーンショット 2020-02-28 23.26.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/91ed6a35-f126-9ea7-0166-19de4d2b56ec.png)
    1. 「Restart All」をクリックし待機する。Apache MySQL ProFTRDのステータスが一時的に黄色に変化する。
        ![スクリーンショット 2020-02-28 23.27.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/84432650-1803-2518-b766-0fe78bc3bef4.png)
    1. Apache MySQL ProFTRDのステータスが緑色になったことを確認する。
        ![スクリーンショット 2020-02-28 23.28.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/fe4f0356-1ea0-432a-d04c-ca036e772879.png)
1. ネットワーク設定
    1. XAMPPのNetworkタブを開く
        ![スクリーンショット 2020-02-29 0.35.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/2d465ab5-b5ea-707d-9aeb-07d81b9744cf.png)
    1. localhost8080 -> 80(Over SSH)を選択し「Enable」をクリックし、ステータスが緑色になったことを確認する。
        ![スクリーンショット 2020-02-29 0.36.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/11640a5c-8b0f-79d3-a56f-77fd09c00e8c.png)
1. マウント設定
    1. XAMPPのVolumesタブを開く
        ![スクリーンショット 2020-02-29 0.22.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f1ea6f29-e1f5-0b9c-69c2-bd90e096d087.png)
    1. 「Mount」をクリックする。
        ![スクリーンショット 2020-02-29 0.23.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/2032753c-c618-7286-d26c-ce2b8fd4d170.png)
1. テスト
    1. 「Explore」をクリックする。
    1. 下記のようにフォルダが開く。
        ![スクリーンショット 2020-02-29 0.24.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/c06fc62b-bf50-0461-4ad5-635f9ee20455.png)
    1. htdocsフォルダの中にprojectフォルダを作成し、hello_world.phpとというファイルを作成する。
        ![スクリーンショット 2020-02-29 0.27.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/3d817a1c-8990-c785-1fbe-eda6809b68e9.png)
    1. hello_world.phpをテキストエディタで開き下記の内容を記載する。

        ```php
        <?php
            echo "hello world";
        ?>
        ```

    1. 下記にアクセスしてhello worldが表示されているか確認する。
        - [http://localhost:8080/project/hello_world.php](http://localhost:8080/project/hello_world.php)
    1. 下記のように表示されていれば環境構築完了である。
        ![スクリーンショット 2020-02-29 0.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f6cb8870-55eb-0143-3870-8ff1b84f3d81.png)