Mac 使用 XAMPP 建立 php 開發環境教學

matt

18 min readJan 10, 2018

最近筆電剛好拿去重灌，藉此機會就來記錄一下如何在 macOS 的環境 使用 XAMPP 建立 php 開發環境。

我的筆電作業系統版本為：macOS Sierra 10.12.6

當然在開發過程中，也包含了一些開發時常用的工具，這裡也一並裝上，安裝的項目皆是當前最新版本，而這整篇文的安裝清單如下：

XAMPP (php 7.1.12)
Composer 1.6.2
Xdebug

開始安裝 XAMPP

步驟一、下載並安裝 XAMPP

https://www.apachefriends.org/zh_tw/download.html

首先到 XAMPP 的官方網站，選擇 php 7.1.12 版本

下載完之後，這邊基本上我習慣是 Next 按到底

在安裝過程中，你會看到有這麼一頁的畫面，提供你兩個選項打勾

XAMPP Core Files 一定要打勾，因為這裡面就是我們要的 Apache、MySQL(嚴格來說是MariaDB)、Perl 以及他們所需的依賴套件
XAMPP Developer ㄧ些開發所用的檔案以及文件，以往安裝時沒特別注意這個選項，但建議也打勾，容量也不大，日後或許會用到其中的文件也不一定（當然通常都是 Google就搞定）。

一路安裝完畢之後，顯示這個畫面便表示安裝成功，這是 Apache 控制台，用於啟動 Apache、MySQL等等

再點選到 Manage Servers 之後，點選 Apache Web Server 再按下右側的 Start即可

點選完之後，開啟你的瀏覽器並輸入在網址列輸入 localhost 看到下方的畫面表示 Apache 運行成功， XAMPP 安裝完畢！

步驟二、設定 .bash_profile 的 php 環境變數

由於 Mac OS 在一開始便已經有 php 了，此時你打開你的終端機並且輸入以下指令

php -v

這個指令會顯示你當前系統所使用的 php 版本（但這不代表是 Apache 執行時就一定是執行這一個 php，這必須看你 apache 指定的 php)，這時會發現版本 5.6.30 並非是剛剛下載XAMPP 當中的 php 7.1.12，很顯然地，這是因為現在還是使用預設的 php

為了使系統能使用我們下載的 XAMPP 的 php，你必須使用 .bash_profile 檔案設定該使用者的環境變數，指向到 XAMPP 的 php，白話一點就是告訴你的電腦：php檔案在哪個位置，給我去執行它！

.bash_profile 並不是什麼可怕的怪物（？），只是一個檔案，然後裡面放一堆電腦能理解的英文和符號（就是指令）

這時候開啟終端機，來到當前使用者目錄（基本上終端機一打開就預設是使用者目錄了），如果擔心所在目錄不是的話，可以在終端機輸入以下指列到使用者目錄

cd ~

為了在此新增一個 .bash_profile 這個檔案，輸入下以下指令

之後看到下面的畫面，表示進入 VI 編輯器模式

由於 XAMPP php 檔案路徑基本上鮮少會更動，於是這裡就可以直接把下面這段環境變數指令貼上，記得先點下鍵盤上的 i 進入編輯模式，底下的.bash_profile 就會變成 — INSERT —

export PATH=/Applications/XAMPP/xamppfiles/bin:$PATH

然後按下 ESC ，結束編輯模式，底下的 — INSERT — 不見了即是

再來輸入下方這個指令，儲存並關閉檔案回到終端機。

:wq

再來輸入以下的指令載入目前的 .bash_profile 即可，載入之後

# 這個 source 就是幫你載入 當前的 .bash_profile
source .bash_profile

然後再輸入 php -v 確定版本，看到 7.1.12 就代表設定 .bash_profile 成功完畢！

步驟三、設定 Apache 的 VirtualHost

再來就是我們要開始設定 Apache 的 VirtualHost了， VirtualHost 是一種能在單一伺服器運作複數網域網站的一種技術，我們只要下點簡單的指令 apache就會幫我們搞定基礎建設，而完成這步驟，XAMPP 的基本設定就算完成

備註：若是使用 Oracle 或是 MS SQL 之類的資料庫則需要再安裝其所屬的 PDO Driver/Extension)

如果你有留意到 XAMPP 安裝完畢之後使用 localhost 打開會自動導向 localhost/dashboard，其實這是一個 XAMPP 預設的 Apache 指定的根目錄，我們只需要將其指定的目錄導指向我們開發的目錄即可。

在這裡我已經先建立好一個名叫 web 的目錄，並放在使用者目錄中，這裡便以我設定的路徑為例子來示範，其路徑如下(2種皆可)

/Users/matt/web/ 
~/web/

這 web 目錄當中，有一個小小的名為 phpinfo.php 的檔案，主要用來顯示當前php所有資訊，而這個 phpinfo.php 裡面的程式碼如下（沒錯，就這麼簡單別懷疑！）

<?phpphpinfo();

首先我們使用終端機進入 XAMPP 所在的目錄，然後再找到 httpd.conf 這個檔案並編輯，輸入以下指令即（直接複製起來用即可）：

cd /Applications/XAMPP/etc
vi httpd.conf

這裡簡單說明一下，

/Applications/XAMPP ：這個就是 XAMPP 的檔案路徑，下載的 Apache、php、MySQL等等都在此處
httpd.conf ：負責管理 Apache 的主要設定檔

再開啟之後，找到下面這的一行設定指令，並把前面的井字號 # 給拿掉！

# Include etc/extra/httpd-vhosts.conf

完成後的畫面如下，之後再記得儲存（這裡的設定極其小心，多打少打一個字都會影響到 Apache 運作）

完成之後，再來進入以下的目錄，來修改剛剛拿掉註解的那行設定指令的檔案

# 進入 extra 這個資料夾
cd /Applications/XAMPP/etc/extra 
# 編輯 httpd-vhosts.conf
vi httpd-vhosts.conf

由於原本的設定對我來說用不到，於是先通通註解起來（就是在最前面加上一個井字號#），如圖

然後再加上下列這段設定，這裡建議用複製貼上，多打少打一個或在逗號旁多加一個空格都可能導致錯誤，這些設定簡單白話翻譯如下。

告訴 Apache 網域名稱
告訴 Apache 你的網頁檔案(HTML、CSS、php)在電腦哪個路徑
設定系統權限… 等

<VirtualHost *:80>
    DocumentRoot "/Users/matt/web" 
    ServerName localhost 
    <Directory "/Users/matt/web/"> 
        Require all granted 
        Options All 
        AllowOverride All 
        Order deny,allow 
        Allow from all 
    </Directory>
</VirtualHost>

設定完之後如圖所示

注意！這裡特別補充用一個簡單例子舉例，如果你期望把 Apache 的網站目錄設置在其他的位置，例如是在桌面上的一個叫做 mattQQ 的目錄，這個目錄的路徑如下

/Users/matt/Desktop/mattQQ

以上述設定來說，你就必須在 DocumentRoot 和 Directory 的路徑設定為如下（倘若路徑輸入錯誤，最後你會在開啟 localhost 的時候就會得到一個 403 的錯誤了！切記！）

<VirtualHost *:80>
    DocumentRoot "/Users/matt/Desktop/mattQQ"      
    省略...
    <Directory "/Users/matt/Desktop/mattQQ"> 
        省略...
    </Directory>
</VirtualHost>

再來儲存完之後就大功告成了，我們在開啟 Apache 並點選 Restart即可，記得每次修改 Apache 設定都必須到此重啟 Apache 才會載入最新的設定。

啟動之後再來我們的瀏覽器，網址列輸入 localhost 看到這畫面算是大功告成囉

在點選 phpinfo.php（等等在安裝 xdebug還需要使用到這個檔案！）看一下版本做最後確認吧，點選畫面後如圖，版本應該為 7.1.12，表示設定 Apache 的 VirtualHost成功完畢！

開始安裝 Composer

Composer 用於幫我們安裝、更新、刪除各種 php Library，就如同 Node.js 中的 Npm 或是 Ruby 中 Gem ，只要輸入一行指令就幫你下載好所需要的 Library。

作為一個摩登 PHP Developer，你不能不使用 composer，所以我們現在來安裝，關於 Composer 你可以從下方的連結了解更多！

在開始之前貼心提醒，這裡的指令完全從 ComposerDownload 這裏複製過來，如果發現官網的指令有所變動，與這裡安裝的指令不同，請優先選擇使用官方網站的指令

步驟一、下載 composer-setup.php

接下來步驟都需要使用終端機，所以請開啟終端機，輸入以下指令（這裡建議待在使用者目錄，方便確認你是否下載成功）

# 輸入以下指令 下載 composer-setup.php
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

這個指令幫助你下載一個php 檔案，這個檔案叫做 composer-setup.php，是用來幫助你安裝 Composer的，具體畫面如下：

可以在輸入一個 ls 的指令，如果安裝成功你就會看到 composer-setup.php

步驟二、檢查 composer-setup.php 是否安全無毒，可安心服用

再來輸入以下指令，用來 SHA-384 的 Hash演算法來驗證你現在所下載的 composer-setup.php 是否有人惡意竄改（白話翻譯就是：檢查你安裝的 composer-setup.php 是否安全無毒，可安心服用）

php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

驗證成功的話，你會看到畫面出現一段訊息為

Installer verified

具體畫面如下

步驟三、執行 composer-setup.php 安裝 composer

這步驟就是執行 php 檔案而已，你 php 檔案裡面寫什麼程式，電腦就跟者執行，你叫他坐下他就坐下，叫他幫你倒垃圾就倒垃圾，叫他幫你安裝 Composer 就安裝 Composer

php composer-setup.php

下載完畢之後，你會看到出現一個檔案叫做 composer.phar，具體畫面如下，

步驟四、移除 composer-setup.php

輸入這行指令，移除 composer-setup.php 這個不需要的檔案。

php -r "unlink('composer-setup.php');"

執行完畢後，具體畫面如下

事實上，只要每次安裝 Library 的時候使用下列指令就可以安裝了

# 安裝 symfony 的 HTTP套件吧！
php composer.phar require symfony/http-foundation

但這樣有個缺點就是….

每次安裝都要先把composer.phar 複製一份到欲安裝的目錄

步驟五、移動 composer ，使系統能在任何位置呼叫 Composer

為了使系統能在任何一個位置呼叫 composer ，我們必須將其移動到一個神奇的目錄，移動到此處，我們能在任何地方隨心所欲的呼叫 Composer 安裝 Library了，而這個目錄就是 /usr/local/bin/composer。

輸入以下指令移動檔案

# 移動 composer.phar 到 /usr/local/bin/composer
mv composer.phar /usr/local/bin/composer
# 輸入 composer 確認 結果
composer

移動完畢後，再輸入 composer ，具體畫面如下，代表 Composer 安裝成功！

開始安裝 Xdebug

我知道並非每一個人都使用 Xdebug，在 JetBrains 針對 php開發者所調查的資料顯示，有 54% 的使用者使用 Xdebug，差不多一半，如果你使用 phpStorm 作為開發工具，開發機本身記憶體與效能不差（筆者筆電為 Macbook Pro 13寸 16 GB 記憶體），這裡建議裝上吧☺

這裡有個前情提要，請先安裝 Homebrew ，還沒有安裝的話請到 Homebrew官方網站(中文) 安裝，並確保你再輸下類似以下的指令是可運作的

# 以安裝 git 來舉例
brew install git

步驟一、複製 phpinfo 並到 xdebug wizard 解析

還記得我們前面安裝 XAMPP 的時候，有一個 phpinfo.php 嗎？打開你的瀏覽器輸入 localhost（如果還沒有，請新增一個跟上述一樣的php 檔案）

打開 phpinfo.php 這一頁，全選並且複製（不要懷疑！複製整個瀏覽器畫面上的所有內容！）

# 全選的快捷鍵
⌘ + A
# 複製的快捷鍵
⌘ + C

具體複製畫面如下，請確認整個網頁內容皆複製完畢

點選這個連結 Xdebug Wizar.php，並且把剛剛複製的內容輸入欄位並點選分析，這個頁面藉由讀取 phpinfo的內容，來協助我們下載適合的版本以及引導整個安裝的流程，具體畫面如下

把你的網頁往下滑，你會發現上面已經有詳細的安裝流程步驟，但這些步驟我在實際安裝發現時，有額外的狀況，這裏建議可同時參考我實際的安裝流程

步驟二、下載 xdebug-2.6.0beta1.tgz

點選畫面上的下載連結，具體畫面如下

步驟三、解壓縮 -xvzf xdebug-2.6.0beta1.tgz 後，並進入其檔案

接下來步驟皆需要使用終端機，請開啟終端機，來到下載資料夾的目錄，以下兩個步驟，依序執行：

進入下載的資料夾
執行解壓縮檔案指令，完畢後會產生一個名為 xdebug-2.6.0beta1 的目錄

# 進入下載的資料夾
cd /Users/matt/Downloads/ 
# 執行解壓縮檔案指令，完畢後會產生一個名為 xdebug-2.6.0beta1 的目錄
tar -xvzf xdebug-2.6.0beta1.tgz

具體畫面如下

步驟四、執行 phpize

再來進入 xdebug-2.6.0beta1 這個目錄，然後執行 phpize，而這裡將得到一個 預期的錯誤，指令如下

# 進入名為 xdebug-2.6.0beta1 的目錄
cd xdebug-2.6.0beta1
# 執行 phpize
phpize

執行完畢後，具體畫面如下：

這個訊息傳達一個訊息給我們就是：找不到 autoconf 這東西，請你先搞定這問題！

好，既然知道問題了，那麼我們使用 Homebrew 來安裝就好了，所以輸入以下指令

# 安裝 autoconf
brew install autoconf
# 等待安裝完畢後 再次嘗試 phpize
phpize

成功之後就不會在看到錯誤訊息了，具體畫面如下：

步驟五、執行 ./configure & make

接下來在終端機輸入依序輸入以下指令

# 請先輸入這個
./configure 
# 等待執行上述的指令完畢後，再輸入下面這個指令 
make

當你執行完 ./configure 的指令後，具體畫面如下

然後再執行完 make 的指令後，具體畫面如下

步驟五、複製 xdebug.so 檔案到 XAMPP 當中

要複製 xdebug.so 檔案到 XAMPP ，請輸入以下指令(記得使用 sudo，否則將出現 Permission denied，權限不足)

# /Appplications 這一長串到 /no-debug-non-zts-20160303 結尾，就是我們欲複製到的目的地以及檔名！sudo cp modules/xdebug.so /Applications/XAMPP/xamppfiles/lib/php/extensions/no-debug-non-zts-20160303

步驟六、開啟 XAMPP 的 php.ini

php.ini 是各種設定 php 的地方，再來我們必須在此啟動 xdebug，事實上 xdebug 還有諸多選項設定，這裡先不多談，只求先啟動 xdebug

請輸入以下指令到達 XAMPP 的 php 所在目錄，並且使用 vi 編輯，指令如下

cd /Applications/XAMPP/xamppfiles/etc
vi php.ini

具體執行畫面如下：

一樣是熟悉的 vi 編輯界面，請使用鍵盤輸入 大寫的G（直接輸入小寫的g會沒反應，請使用 shift + g 輸入大寫的G）這指令將會使你到達這個檔案最後一行

這裡解釋一下，我習慣將 新增的指令 放置在設定檔案最下方，以便以後尋找，因此才有此一步驟，如果你不想放在此處也是沒問題的！

再來請在按下 i （請確保底下出現 — INSERT — 字樣），然後貼入下面這一行，目的在於使 php 連接到我們安裝好的 xdebug

zend_extension = /Applications/XAMPP/xamppfiles/lib/php/extensions/no-debug-non-zts-20160303/xdebug.so

貼入完之後記得在按下ESC 確保(請確保 — INSERT — 字樣消失），再輸入:wq儲存完畢，具體畫面如下

儲存完畢回到終端機之後，請輸入 php -v 查看你的 php Xdebug是否出現在畫面上，具體畫面如下

步驟六、最後在phpinfo.php 當中再次確認

最後於phpinfo.php 確認 Xdebug 是否安裝成功之前，一樣先重新啟動 Apache，具體畫面如下

最後一樣打開你的瀏覽器，打開 phpinfo.php 然後 cmd + F 搜尋關鍵字 xdebug，具體畫面會如下，xdebug 安裝完畢！

Mac 使用 XAMPP 建立 php 開發環境 教學