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

想要學習如何架設網站?如果未有架設網頁伺服器這方面的經驗,那要自己從零開始來架設網頁伺服器環境其實也是一件不是很容易的事,在網路上有開發者提供了不少架站工具整合包,讓我們在架設網站環境時變得簡單很多,本文教學將要介紹一款網路上蠻多人推薦的XAMPP網頁伺服器架站工具。XAMPP是一套整合Apache+MariaDB(舊版是使用MySQL)+PHP+Perl、操作簡單、跨平台(可以在Windows、Linux和Mac OS X跨平台執行)與開放原始碼的免費軟體。XAMPP除了提供剛剛提到的Apache網頁伺服器和MariaDB資料庫等等工具外,此安裝包還整合了FileZilla FTP Server(檔案伺服器)、Mercury  Mail Server(郵件伺服器)、Tomcat和phpMyAdmin等等不同的工具。另外,XAMPP除了有提供安裝版外,也有提供了免安裝的版本,讓想要學習與開發網站的使用者方便了許多。

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

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

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

連結至XAMPP官方網站下載頁面-xampp001

 

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

選擇適用你作業系統的XAMPP版本-xampp002

 

Step 3:XAMPP軟體版本號的命名方式,是依照PHP的版本,例如說如果你要PHP 7.0.1的環境,那就選擇7.0.1的XAMPP版本。請依照你自己所使用的架站軟體要求的PHP版本,來選擇你要的XAMPP版本,例如說筆者想要安裝Drupal 8,而Drupal 8最低需求的PHP版本為5.5.9,那筆者可以選擇XAMPP所提供的5.5、5.6及7.0以上的版本。

選擇你要的XAMPP版本-xampp003

 

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

xampp-win32-x.x.xx-x-VCxx.zip→免安裝版本,此免安裝版本保留了安裝版本該有的工具,例如說:如果你要架設FileZilla FTP伺服器或者是Mercury郵件伺服器,那你就要下載此版本。

xampp-portable-win32-x.x.xx-x-VCxx.zip→免安裝版本,此免安裝版本為瘦身版,因為此版本移除,如:FileZilla FTP伺服器與Mercury郵件伺服器等等的工具,所以XAMPP檔案體積也比較小。此版本也是筆者本教學所使用的版本。

xampp-win32-x.x.xx-x-VCxx-installer.exe→安裝檔版本,如果你要將XAMPP安裝至電腦,可以下載此版本。

選擇好安裝版或免安裝版後下載你要的XAMPP版本-xampp004

 

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

**如果你是直接安裝至電腦的安裝版本,請忽略此部分,直接到本頁的下部分來開始新增一個資料庫。

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

安裝或解壓縮XAMPP網頁伺服器架站工具-xampp021

 

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.』的錯誤訊息。

免安裝版本需執行setup_xampp的批次檔來更新路徑-xampp022

 

Step 3:如下圖所示路徑已成功更新,按鍵盤任意鍵關閉視窗。

XAMPP免安裝版本的路徑更新完成-xampp023

 

Step 4:路徑更新完成後,點擊如下圖所示的『xampp-control.exe』,開啟XAMPP控制台,第一次使用時需要選擇語言,只有英文及德文供使用者選擇,那我們只好選擇『英文』了,選擇好後,點選『Save』。

開啟XAMPP控制台,並選擇你要的語系-xampp024

 

Step 5:如下圖所示可以開始使用XAMPP網頁伺服器架站工具了。

可以開始使用使用XAMPP網頁伺服器架站工具了-xampp025

 

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

Step 1:XAMPP預設使用的文字編輯器是Windows內建的記事本,如果使用者沒有更改至其他文字編輯器,直接使用Windows內建記事本編輯XAMPP設定檔時,會發現到文字都擠在一堆,造成編輯上的不便。通常筆者習慣在安裝完成XAMPP時,都會馬上更改XAMPP預設的文字編輯器,點選如下圖所示的『Config』,並點選Editor的圖形『資料夾』,在你電腦本機中選擇你習慣使用的文字編輯器,選擇好後,點選『開啟』。如果你電腦上沒有文字編輯器,筆者可以推薦你使用好用的文字編輯器Notepad++。關於Notepad++的教學,可以查看此篇Notepad++ 免費文字編輯器設定及使用教學

變更文字編輯工具,以替代預設使用的Windows內建文字編輯器-xampp041

 

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

變更文字編輯工具,以替代預設使用的Windows內建文字編輯器-xampp042

 

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

修改phpMyAdmin的認證模式-xampp051

 

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

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

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

http→除了使用資料庫做認證外,還使用了http的認證模式,此認證方式的安全性也最高。

修改phpMyAdmin的認證模式-xampp052

 

Step 5:phpMyAdmin的認證模式設定完成後,就可以啟動Apache和資料庫了。如果啟動Apache出現錯誤,可以查看本教學的最後部分,來解決無法啟動Apache的問題。

啟動Apache網頁伺服器及MySQL資料庫-xampp061

 

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

點選Apache的Admin按鈕,會開啟Apache Friends頁面-xampp062

 

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

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

點選MySQL的Admin按鈕,就可以開啟phpMyAdmin認證介面-xampp063

 

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

預設root帳號是沒有密碼的,所以需要設定一個密碼-xampp064

 

Step 3:接下來要開始建立新的資料庫,點選如下圖所示的『資料庫』,輸入你新資料庫的名稱,編碼與排序方面,選擇你自己所需要的編碼格式,一般常用的編碼格式為utf8_general_ci或者是utf8_unicode_ci,關於這兩個編碼格式的差異,可以查看維基百科utf8_unicode_ci和utf8_general_ci區別,如下圖所示筆者選擇了『utf8_general_ci』,選擇好後,點擊『建立』。

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

開始建立一個新的資料庫-xampp065

 

Step 4:接下來要開始為剛剛建立好的資料庫新增一個使用者,點選如下圖所示的首頁『屋子』圖示,並點選『資料庫』,對你剛剛建立好的資料庫點選『檢查權限』。

為剛剛建立好的資料庫新增一個使用者-xampp066

 

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

新增使用者帳號-xampp067

 

Step 6:可以跟著如下圖方式輸入登入資訊,要注意的地方就是,一般會在主機名稱選擇『本機;Local』,全域權限的區塊勾選『全選』。帳號和權限設定完成後,點擊『執行』。

輸入新使用者帳號的登入資訊-xampp068

為剛剛所建立好的資料庫授予使用者操作資料庫的權限-xampp069

新使用者帳號與權限設定完成後,點擊執行按鈕-xampp070

 

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

已成功新增了一個新使用者-xampp071

 

5)將要開啟的網頁放在XAMPP的子資料夾htdocs下面。

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

把你要開啟的網頁放在xampp子資料夾htdocs下面-xampp081

 

Step 2:要開啟htdocs資料夾裡的網頁,只需在瀏覽器的網址列輸入『http://localhost/你所命名的資料夾名稱或者是網頁名稱』,當然localhost也可替換至127.0.0.1,也是一樣本機的意思,如下圖所示筆者的資料夾是命名為『drupal8』,所以網址就輸入『http://localhost/drupal8』。

以Drupal CMS安裝為例-xampp082

 

Step 3:一般架站應用都會要求輸入『資料庫名稱』、『資料庫的使用者名稱』及『資料庫的密碼』來做資料庫連線的設定,就將剛剛所建立好的資料庫及使用者按照你所使用的架站應用要求輸入進去,如下圖所示是Drupal 8的資料庫設定方式。

**筆者已寫了關於Drupal 8詳細的安裝教學,如你想要了解Drupal 8怎麼安裝,那請查看此篇Drupal 8 好用的 CMS 架站軟體安裝設定與使用教學

輸入剛剛建立好的資料庫與使用者等等的設定-xampp083

 

Step 4:如下圖所示筆者已安裝好了Drupal 8。

已成功安裝了Drupal-xampp084

 

6)更改XAMPP預設的首頁。

Step 1:每次要在網址列輸入冗長的網址,例如說『http://localhost/drupal8』,才能進入網站首頁?在XAMPP的子資料夾htdocs下面有一個『index.php』檔案,是允許你更改XAMPP預設首頁的,更改後,你日後只要在網址列輸入『http://localhost』就可以直接轉入至你要的網頁首頁。

更改XAMPP預設的首頁-xampp101

 

Step 2:你可以使用文字編輯器開啟『index.php』檔案,在如下圖所示的地方,更改至你要的資料夾或者是網頁首頁,修改完成後記得儲存你的變更。

更改XAMPP預設的首頁-xampp102

 

7)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被佔用的處理方式-xampp121

Port 80被佔用的處理方式-xampp122

 

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的解決方法

使用Netstat來檢查是哪個程式或服務佔用到Port-xampp123

 

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

Port 80被佔用,使用服務停止解決方式-xampp131

 

**此項教學在操作時請謹慎,不要變更自己不熟悉的服務,以免影響到你系統的執行。

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

Port 80被佔用,使用服務停止解決方式-xampp132

 

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

Port 80被佔用,使用服務停止解決方式-xampp133

 

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

解決80 Port被佔用後,Apache網頁伺服器就可以正常啟動了-xampp134

 

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

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

Port 80被佔用,改成其他Port的解決方式-xampp141

 

Step 2:在httpd.conf設定檔中要修改兩個地方,你可以在文字編輯器按鍵盤『Ctrl鍵』+『F』使用文字搜尋方式,來更改Apache預設Port 80,如下圖所示其中一個要改的是『Listen 80』。

Port 80被佔用,改成其他Port的解決方式-xampp142

 

Step 3:找到Listen 80後,將『80』改至其他的Port,例如:『8080』。

Port 80被佔用,改成其他Port的解決方式-xampp143

 

Step 4:然後另外一個也是一樣,文字搜尋『localhost:80』,將『80』改成『8080』,修改完成後,記得儲存。

Port 80被佔用,改成其他Port的解決方式-xampp144

 

Step 5:修改儲存,及啟動Apache後,可以看到如下圖所示Apache的Port已變更成8080了。

改成其他Port後,Apache網頁伺服器就可以正常啟動了-xampp145

 

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

改至其他Port後,日後在輸入網址需加上你更換的Port號-xampp146

 

問題原因2:移動XAMPP至其他位置、更改xampp資料夾名稱或XAMPP的路徑含有中文或一些特殊字元。

**此問題通常是使用XAMPP免安裝版本才會遇到的問題,如果你是直接安裝至電腦的XAMPP版本,請忽略此項。

Step 1:如果你有移動XAMPP至其他位置、更改xampp資料夾名稱或者是XAMPP的路徑含有中文或一些特殊字元,在你開啟XAMPP控制台後,啟動Apache時會出現如下圖所示的錯誤。

免安裝版本的XAMPP資料夾有移動過位置或名稱更改等等,都需要重新更新路徑-xampp151

 

Step 2:如下圖所示筆者有變更到xampp資料夾名稱,所以需要重新執行『setup_xampp』批次檔來更新路徑。

需執行setup_xampp的批次檔來更新路徑-xampp152

 

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

需執行setup_xampp的批次檔來更新路徑-xampp153

 

Step 4:如下圖所示路徑已成功更新,按鍵盤任意鍵關閉視窗。

XAMPP免安裝版本的路徑更新完成-xampp154

 

Step 5:路徑更新完成後,如下圖所示Apache網頁伺服器就可以正常啟動了。

路徑更新完成後,Apache網頁伺服器就可以正常啟動了-xampp155