XAMPP 網頁伺服器架站工具設定與使用教學

XAMPP是一套整合Apache網頁伺服器、MariaDB資料庫、PHP和Perl程式語言的架站工具整合包，由Apache Friends維護與開放原始碼的免費軟體。XAMPP因其操作簡單和支援多個平台，有Windows、macOS和Linux，所以使用者可以很輕易的在自己電腦環境上建立一個網頁伺服器，若未有架站的經驗，那選擇XAMPP來入門也是一個不錯的選擇。XAMPP算是很成熟的架站工具，且更新頻率極高，會隨著PHP版本更新而釋出更新的版本，除了剛剛提到的Apache網頁伺服器和MariaDB資料庫等等工具外，此安裝包還整合了FileZilla FTP Server（檔案伺服器）、Mercury Mail Server（郵件伺服器）、Tomcat和phpMyAdmin等等不同的工具。另外，XAMPP除了有提供安裝版本外，也提供了免安裝的版本，讓想要學習與開發網站的使用者來說方便了許多。

本文教學將要介紹一款網路上蠻多人推薦的XAMPP網頁伺服器架站工具，內容將會指引使用者如何設定與使用XAMPP網頁伺服器架站工具。若要使用XAMPP架設WordPress，Joomla或Drupal等等其他不同的CMS套件、Wiki類型的網站、e-Commerce（電子商務）類型的網站或者其他不同的架站應用，都可以參考本篇教學來進行設定。本文教學分為8個部分，開始會指引使用者如何下載需要的XAMPP版本、第二部分為若要下載免安裝版本應如何做設定、第三部分為如何更改XAMPP預設的文字編輯器，以方便日後在編輯設定檔時，如：php.ini或其他，是開啟你要的文字編輯器、第四部分為如何設定資料、第五部分為要開啟的網頁，應放在哪個根目錄、第六部分為如何更改XAMPP預設的首頁、第七部分為若XAMPP沒在使用建議需手動停止服務及最後部分為若在開始使用XAMPP可能會遇到的一些問題的解決方法，如：HTTP Port 80被佔用等等的問題。雖然說XAMPP提供了一個很好的網站開發環境，但基於網站的安全性考量，除非你有對XAMPP的安全性有在做額外設定，否則不建議使用者直接將XAMPP用在正式的線上環境，僅可將此工具用在學習與網站開發及測試的環境用途。

1）下載與安裝XAMPP網頁伺服器架站工具。

Step 1：連結至XAMPP正體中文官方網站下載頁面，因為筆者想要下載免安裝的XAMPP版本，所以會點選如下圖所示的『更多下載』，來選擇其他的XAMPP版本。若想要直接將XAMPP安裝至電腦，可以在此頁選擇與下載需要的XAMPP版本，並直接執行安裝程式將XAMPP架站軟體安裝至電腦。

Step 2：請依照電腦系統的環境，來選擇相對應的XAMPP架站工具，如：筆者是使用Windows OS，所以就會選擇『XAMPP Windows』。

Step 3：XAMPP軟體版本號的命名方式，是依照PHP的版本，比如說你要PHP 8.0的環境，那就選擇8.0.7的XAMPP版本。請依照所使用的架站軟體要求的PHP版本，來選擇相對應的XAMPP版本，比方說筆者想要安裝WordPress CMS，而WordPress 5.7版本官方推薦的PHP版本為7.4或以上，那筆者可以選擇XAMPP所提供7.4、8.0及8.1或以上的版本。

Step 4：XAMPP跟其他架站工具不同的就是，除了有提供安裝版本外，還多了免安裝版本的選擇，這對於想要學習和開發網站的開發人員來說方便了很多，因為可以直接把XAMPP檔案直接複製進USB或上傳至雲端空間，如果在其他地方使用不同的電腦時，只要再重新執行XAMPP的『setup_xampp』批次檔來更新路徑，不需要在重新架設環境與設定一堆有的沒得，而就可以在不同電腦上繼續開發網站了。以下筆者列出比較常用的XAMPP版本格式：

xampp-windows-x64-x.x.xx-x-Vxxx.zip→免安裝版本，此免安裝版本保留了安裝版本該有的工具，例如說：如果需要架設FileZilla FTP伺服器或者是Mercury郵件伺服器，那就要下載此版本。此版本也是筆者本教學所使用的版本。

xampp-portable-windows-x64-x.x.xx-x-Vxxx.zip→免安裝版本，此免安裝版本為瘦身版，因為此版本移除，如：FileZilla FTP伺服器與Mercury郵件伺服器等等的工具，所以XAMPP檔案大小小很多。

xampp-windows-x64-x.x.xx-x-Vxxx-installer.exe→安裝檔版本，如果需要將XAMPP安裝至電腦，那可以下載此版本。

Step 5：選擇好需要的XAMPP版本後，稍等一下就能看到XAMPP軟體正在下載至電腦。

2）XAMPP免安裝版本，在開始使用之前，需先執行批次檔進行路徑的更新。

**如果是直接安裝至電腦的安裝版本，請忽略此部分，直接到本頁的下部分（第3部分）來更改XAMPP預設的文字編輯器。

Step 1：若是下載免安裝版本，在解壓縮時要注意的是不要直接解壓縮至電腦桌面，因為XAMPP的路徑是不可以含有中文或一些特殊字元，如果路徑含有中文字，XAMPP會無法正常執行，所以筆者建議解壓縮至，如：D槽，路徑大概是這樣『D:\』，XAMPP在執行時比較不會出現問題。另外，還需注意的是XAMPP解壓縮之後，若需要重新命名XAMPP資料夾是可以的，但命名時也是不可含有中文字。

Step 2：解壓縮至你要的磁區位置後，XAMPP免安裝版本第一次使用需執行『setup_xampp.bat』的批次檔，如下圖所示直接點擊執行『setup_xampp』批次檔吧。另外需注意假如日後移動XAMPP至其他位置、更改XAMPP資料夾名稱或者在不同的電腦執行XAMPP時，都需要重新執行『setup_xampp』批次檔更新路徑，若沒有執行批次檔，在啟動Apache HTTP Server時會出現『Error: Apache shutdown unexpectedly. This may be due to a blocked port, missing dependencies, improper privileges, a crash, or a shutdown by another method. Press the Logs button to view error logs and check the Windows Event Viewer for more clues. If you need more help, copy and post this entire log window on the forums』的錯誤訊息。

Step 3：如下圖所示可以看到環境與路徑已完成更新，按鍵盤任意鍵關閉視窗。

Step 4：接著可以點擊如下圖所示的『xampp-control.exe』來開啟XAMPP控制台，第一次使用時需要選擇語言，只有英文與德文供使用者選擇，那只好選擇『英文』及點選『Save』。

Step 5：如下圖所示為XAMPP控制台，接著可以開始使用XAMPP網頁伺服器架站工具了。

3）更改XAMPP預設的文字編輯器及更改phpMyAdmin的驗證模式。

Step 1：XAMPP預設使用的文字編輯器是Windows內建的記事本，若使用者沒有更改至其他文字編輯器，而直接使用Windows內建記事本編輯XAMPP設定檔時，就會發現到文字都擠在一堆，這會造成編輯上的不便。筆者通常習慣在安裝完成XAMPP時，都會馬上更改XAMPP預設的文字編輯器，點選如下圖所示的『Config』，並點選Editor的圖形『資料夾』，在你電腦本機中選擇習慣使用的文字編輯器，選擇好後點選『開啟』。若電腦上沒有文字編輯器，那可以使用輕量級的Notepad++或者筆者在此篇教學所使用的VS Code。

Step 2：如下圖所示筆者已選擇自己習慣使用的編輯器後，點選『Save』儲存變更。

Step 3：在開始使用XAMPP之前，建議更改登入phpMyAdmin的驗證模式，以提高資料庫的安全性，點選如下圖所示『Config』，並點選『phpMyAdmin (config.inc.php)』。另外順便說一下，如果日後要修改php.ini（PHP的設定檔），也是在這邊點選『PHP (php.ini)』，就可以直接修改PHP的設定檔了，但在更改完成後，若Apache服務還在開啟狀態時，記得要重啟Apache，這樣PHP設定才會生效。

Step 4：phpMyAdmin驗證模式有3種，開啟phpMyAdmin的config.inc.php檔可以看到預設的驗證模式為『config』，config為最不安全的驗證模式，筆者建議更改為『cookie』或『http』，如下圖所示筆者將驗證模式改為『cookie』，更改後記得儲存變更。以下筆者列出3種不同的驗證模式：

config→此值為預設的驗證模式，是將資料庫的使用者名稱及密碼直接輸入在config.inc.php檔裡，日後登入phpMyAdmin無需重新輸入帳號及密碼，就可以直接管理資料庫，為最不安全的驗證模式。

cookie→使用資料庫做驗證，只要瀏覽器支援cookie功能就可以使用，此驗證方式為最常見到的驗證模式。

http→除了使用資料庫做驗證外，還使用了http的驗證模式，此驗證方式的安全性也最高，瀏覽器會跳出一個視窗要求輸入帳密。

Step 5：phpMyAdmin的驗證模式設定完成後，就可以啟動Apache和資料庫了。若啟動Apache出現錯誤，可以查看本教學的最後部分，來解決Apache服務無法啟動的問題。

Step 6：點選Apache的『Admin』按鈕，來測試Apache伺服器是否可以正常執行（或者也可以在瀏覽器網址列輸入『http://localhost』），如下圖所示可以開啟Apache Friends的頁面就代表XAMPP的Apache運作是正常的。另外，若要查詢PHP相關資訊，如：PHP的版本、伺服器的環境或者是PHP的擴充套件等等的各種資訊，都可以透過『PHPInfo』來查詢。

Step 7：經由PHPInfo可以查看和了解XAMPP的PHP系統組態的詳細資訊，通常能看到這頁也就表示PHP環境是正常執行的。

4）開始設定及新增資料庫。

Step 1：接下來可以開始建立資料庫，如下圖所示點選『Admin』管理資料庫（或者在瀏覽器網址列輸入『http://localhost/phpmyadmin』），接著會以剛剛設定好的驗證模式來開啟網頁，如下圖所示筆者是使用cookie的驗證模式來驗證身份，在phpMyAdmin介面中，需輸入『使用者名稱』及『密碼』，但因為第一次使用，只需要輸入使用者名稱就好，預設的使用者名稱為『root』，密碼為空，輸入好後直接點擊『執行』。

Step 2：在phpMyAdmin資料庫管理介面中有可能會看到一個警告，內容大概是因為管理者帳號root沒有設定密碼，建議設定密碼來提高資料庫的安全，點選如下圖所示的『修改密碼』，會跳出一個視窗，選擇『密碼』，並輸入兩次密碼及點選『執行』。另外，在phpMyAdmin資料庫管理介面右側中，可以看到資料庫伺服器、網頁伺服器及phpMyAdmin等等的資訊，比如在資料庫伺服器的資訊中，可以看到此版本的XAMPP所用的伺服器類別名稱，如下圖所示筆者使用的資料庫為MariaDB。

Step 3：接下來要開始建立新的資料庫，點選如下圖所示的『資料庫』，輸入新資料庫的名稱，編碼與排序方面，選擇你所需要的編碼格式，如下圖所示筆者選擇了『utf8mb4_general_ci』，選擇好後，點擊『建立』。

**現在很多CMS或其他的架站軟體幾乎都已經開始支援『utf8mb4_general_ci』或『utf8mb4_unicode_ci』編碼格式。『utf8mb4』和『utf8』兩者差異為前者『utf8mb4』一個字元可以儲存4個位元組（4-byte），而後者『utf8』一個字元僅能儲存3個位元組（3-byte）。你可以選擇『utf8mb4』編碼，因為這樣可以讓資料庫儲存Emoji表情符號或其他的會用到4個位元組的特殊符號。若你選擇『utf8mb4』編碼，而且只是要架設中英文的網站，那可以選擇『utf8mb4_general_ci』編碼格式，因為『utf8mb4_general_ci』會比『utf8mb4_unicode_ci』來說速度會快一些；若是要架設多國語言網站（如：德語、法語及俄語等等），那就需要選擇『utf8mb4_unicode_ci』，因為『utf8mb4_unicode_ci』會比『utf8mb4_general_ci』文字選擇來得會更精準。

Step 4：接下來可以為剛剛建立好的資料庫新增一個使用者，點選如下圖所示的首頁『屋子』圖示，並點選『資料庫』頁籤及對剛剛所建立好的資料庫點選『檢查權限』。

Step 5：在『新增』區塊中，點擊『新增使用者帳號』。

Step 6：可以參考如下圖方式輸入登入資訊，自訂使用者名稱、主機名稱選擇『本機；Local』及密碼需輸入兩次，『全域權限』的區塊勾選『全選』，以賦予此使用者該資料庫的所有權限。帳號和權限設定完成後就點擊『執行』。

Step 7：如下圖所示可以看到已成功新增了一個新使用者，而資料庫的建立也就設定完成了。

5）將要執行的網頁放在XAMPP的根目錄htdocs。

Step 1：XAMPP預設網頁存放根目錄是在如下圖所示的路徑位置，如果是放在D槽底下，一般根目錄路徑格式大概會是這樣『D:\xampp\htdocs』。你可以將要開啟的網頁或要安裝的CMS套件等等其他不同的架站應用放在根目錄htdocs裡，如下圖所示筆者想要安裝WordPress CMS，就會將『wordpress』資料夾移至根目錄htdocs，這邊也要注意的地方就是資料夾或網頁的檔名不可以含有中文或一些特殊字元。

Step 2：要開啟根目錄htdocs裡的網頁，只需在瀏覽器網址列輸入『http://localhost/你所命名的資料夾名稱或者是網頁名稱』，當然localhost也可替換至127.0.0.1，也是一樣本機的意思，比如筆者的目錄是命名為『wordpress』，所以網址就輸入『http://localhost/wordpress』就能看到網頁了。

Step 3：一般架站應用都會要求輸入『資料庫名稱』、資料庫的『使用者名稱』及『密碼』來做資料庫連線的設定，就將剛剛所建立好的資料庫及使用者按照所使用的架站應用要求輸入到正確的欄位，如下圖所示為WordPress的資料庫設定方式。

Step 4：完成資料庫所需的連線設定之後，以WordPress來說，可以看到會有成功連線至資料庫的訊息。

Step 5：如下圖所示可以看到筆者已成功安裝完成WordPress架站工具。

6）更改XAMPP預設的首頁。

Step 1：每次要在網址列輸入冗長的網址，例如說『http://localhost/wordpress』，才能進入網站首頁？在XAMPP的根目錄htdocs有一個『index.php』檔案是允許更改XAMPP預設首頁的，更改後日後只需在網址列輸入『http://localhost』就可以直接轉向需要的網頁了。

Step 2：可以使用文字編輯器開啟『index.php』檔案，如下圖所示將預設的『dashboard』更改成所需要的目錄或者是網頁首頁，修改完成後記得要儲存變更。

7）若XAMPP沒在使用建議需手動停止服務。

Step 1：若XAMPP沒在使用時，建議自行手動停止網頁伺服器、資料庫伺服器或檔案伺服器等等的服務，以免日後有其他服務要用到同樣的Port時，會導致某些服務無法正常運作。

8）XAMPP架站工具無法啟動？可能原因之解決方法教學。

問題原因1：HTTP Port 80被佔用。

如果開啟XAMPP控制台時出現如下圖所示的錯誤訊息：

[Apache]     Problem detected!
[Apache]     Port 80 in use by "Unable to open process" with PID 4!
[Apache]     Apache WILL NOT start without the configured ports free!
[Apache]     You need to uninstall/disable/reconfigure the blocking application
[Apache]     or reconfigure Apache and the Control Panel to listen on a different port

並且在進一步啟動Apache時，還是無法正常啟動Apache服務，還出現如下圖所示第二張圖的錯誤訊息，這問題通常是因為電腦有其他服務或程式佔用到Port 80，進而導致Apache服務無法啟動，解決此問題有兩種解決方法，第一種解決方法為將佔用到Port 80的服務或程式停用，而第二種方法是將Apache預設Port 80改用至其他Port。

Port 80被佔用解決方法一：將佔用到Port 80的服務或程式停用。

Step 1：在XAMPP控制台有提供『Netstat』工具讓我們查找有哪些服務或程式佔用到Port 80，如下圖所示只需注意『Port』和『Name』這兩個欄位來檢查是哪個服務佔用到80 Port，以這邊的例子來說，筆者所遇到的問題是Port 80被PID為4的系統服務佔用，通常看到這個大概也知道IIS服務的W3SVC服務佔用到80 Port。

**除了IIS服務的W3SVC會佔用到Port 80之外，如果電腦有安裝微軟的Microsoft SQL Server資料庫管理系統，那有個服務名稱為『SQL Server Reporting Services』預設就會佔用到Port 80，在Netstat的TCP Listening sockets列表中，一樣可以看到Port 80被PID為4的系統服務所佔用，如果確定是微軟的資料庫佔用到80 Port，那等下下面的停用服務教學是要停止『SQL Server Reporting Services』（簡稱為ReportServer）的服務。

**如果在Netstat看到名為『Skype.exe』，那就是電腦的Skype通訊軟體正在執行，Skype預設會使用80/443 Port，假如遇到此問題可以參考微軟官方Skype佔用到80/443 Port的解決方法。

Step 2：按下鍵盤『windows鍵+R』，開啟『執行』對話框，輸入『services.msc』，並點選『確定』；或者也可以直接在XAMPP控制台直接點選『Services』來開啟Windows的服務管理。

Step 3：在Windows的服務管理中，可以看到如下圖所示World Wide Web Publishing 服務（簡稱為W3SVC）正在執行中，可以滑鼠右鍵點選W3SVC服務，並點選『內容』。

Step 4：如下圖所示的啟動類型下拉式清單中將W3SVC服務從自動設為『手動』，這樣就能在下一次開機時不會自動執行此服務，還有目前的服務狀態要點擊『停止』，將目前的執行中的服務改為已停止狀態，設定完成後點選『確定』。

Step 5：將佔用到80 Port的服務關閉後，如下圖所示Apache網頁伺服器就可以正常啟動了。

Port 80被佔用解決方法二：將Apache服務預設Port 80改用至其他Port。

Step 1：如果不知道是哪個服務佔用到80 Port，建議還是使用方法二比較好解決Port 80被佔用的問題，如下圖所示點選『Config』，並點選『Apache (httpd.conf)』。

Step 2：在httpd.conf設定檔中要修改兩個地方，可以在文字編輯器按鍵盤『Ctrl鍵+F』使用文字搜尋方式，來更改Apache服務所使用的Port，如下圖所示修改Apache設定檔中的監聽Port號從『Listen 80』改成『Listen 8080』。

Step 3：然後另外一個ServerName的Port號也要更改，搜尋『localhost:80』，將『localhost:80』改成『localhost:8080』，修改完成後記得儲存設定。

Step 4：再次嘗試啟動Apache服務應該就能正常執行了，如下圖所示可以看到Apache服務所使用的Port號已變更成8080了。

Step 5：因為是修改Apache預設Port的方式，所以在開啟網頁時，需要在瀏覽器網址列輸入『http://localhost:8080』或者是『http://127.0.0.1:8080』才能打開網頁。

問題原因2：移動XAMPP至其他位置或更改xampp資料夾名稱後，服務就無法啟動。

**此項通常是使用XAMPP免安裝的瘦身版才會遇到的問題。

Step 1：如果有移動XAMPP至其他位置或更改xampp資料夾名稱，在啟動Apache服務後會出現如下圖所示的錯誤。

[Apache] 	Error: Apache shutdown unexpectedly.
[Apache] 	This may be due to a blocked port, missing dependencies, 
[Apache] 	improper privileges, a crash, or a shutdown by another method.
[Apache] 	Press the Logs button to view error logs and check
[Apache] 	the Windows Event Viewer for more clues
[Apache] 	If you need more help, copy and post this
[Apache] 	entire log window on the forums

Step 2：如下圖所示例子筆者是移動XAMPP資料夾至其他位置，所以需要重新執行『setup_xampp』批次檔來更新路徑。

Step 3：在執行『setup_xampp』批次檔過程中，可看到如下圖所示的『1) Refresh now!』，就按下鍵盤數字鍵『1』及『Enter鍵』。

Step 4：如下圖所示可看到環境與路徑已完成更新，按鍵盤任意鍵關閉視窗。

Step 5：路徑更新完成後，如下圖所示Apache網頁伺服器又可以正常執行了。