2.3　本地服務(wù)器的搭建

一個(gè)真正的Web應(yīng)用都需要將代碼部署到服務(wù)器上，這樣才能讓更多人訪問(wèn)。因此，搭建服務(wù)器是必不可少的環(huán)節(jié)。一般來(lái)說(shuō)，Web應(yīng)用的服務(wù)器都是在某個(gè)機(jī)房的大型服務(wù)器主機(jī)上，而在學(xué)習(xí)階段，我們可以搭建一個(gè)本地服務(wù)器就能滿足學(xué)習(xí)Web全棧開發(fā)的需要。因此，本節(jié)就來(lái)講述如何安裝一個(gè)本地服務(wù)器的集成工具。

2.3.1　Xampp的安裝

Xampp是一款功能強(qiáng)大的服務(wù)器端集成軟件，它包括最常用的Web服務(wù)器Apache，以及PHP編譯器和MySQL數(shù)據(jù)庫(kù)服務(wù)器，主要用于Web的后端開發(fā)部署。之所以選擇Xampp，是因?yàn)樗忻赓M(fèi)版提供，所以可以節(jié)省開支。同時(shí)，集成工具也省去了安裝每一個(gè)服務(wù)器的麻煩。

Xampp有什么特別之處？

提到Web應(yīng)用，就不得不談到服務(wù)器，任何一個(gè)Web應(yīng)用都離不開它。每次用戶輸入一個(gè)網(wǎng)址或通過(guò)單擊一個(gè)鏈接，其實(shí)都是在向服務(wù)器發(fā)出一次HTTP請(qǐng)求，這種請(qǐng)求的目的是想查詢服務(wù)器中的數(shù)據(jù)庫(kù)，更新數(shù)據(jù)。整個(gè)過(guò)程從服務(wù)器端來(lái)看，一定需要一款Web服務(wù)器、后端腳本解釋器和數(shù)據(jù)庫(kù)服務(wù)器，幸運(yùn)的是，Xampp集成了這三者，從而免除了我們單獨(dú)安裝每一款軟件的麻煩。

接下來(lái)，請(qǐng)你按照以下步驟完成Xampp的下載和安裝。

（1）請(qǐng)自行去官網(wǎng)https://www.apachefriends.org/index.html下載，根據(jù)你自己的計(jì)算機(jī)型號(hào)選擇合適的版本。

（2）根據(jù)你自己計(jì)算機(jī)的操作系統(tǒng)來(lái)選擇版本，Windows系統(tǒng)上安裝完成之后的界面如圖2.7所示，請(qǐng)忽略下方提示框的內(nèi)容。你可以看到Xampp已經(jīng)為我們提供了幾種Web服務(wù)器，比如Apache和Tomcat。

2.3.2　Xampp的配置

Xampp安裝完成之后，需要在本地進(jìn)行配置。具體步驟如下。

首先，本地計(jì)算機(jī)既要充當(dāng)客戶端的瀏覽器，又要充當(dāng)后臺(tái)的服務(wù)器。有了Xampp這一切就變得非常簡(jiǎn)單，你要做的只是在Xampp控制面板中單擊Apache那一行對(duì)應(yīng)的Start按鈕，即可完成Web服務(wù)器的開啟。這時(shí)，本地計(jì)算機(jī)上的瀏覽器就可以訪問(wèn)本地的服務(wù)器。由于是本地的主機(jī)，因此，這個(gè)服務(wù)器的地址是127.0.0.1，它等價(jià)于localhost。

初次使用Xampp一定要做的事

初次使用Xampp一定要測(cè)試其是否配置正確。具體做法是，首先需要開啟（Start）Apache服務(wù)器，然后在Chrome瀏覽器的地址欄中輸入localhost，看到一個(gè)Xampp默認(rèn)的首頁(yè)。這其中的原理在于Xampp的默認(rèn)配置，通過(guò)輸入一個(gè)地址，Xampp就將自動(dòng)尋找根目錄（即Xampp安裝目錄下的htdocs文件夾）中是否含有index.html，所以地址欄中的完整輸入是localhost\index.html，只不過(guò)index.html常常被省略。

但是為了將來(lái)設(shè)計(jì)屬于你自己的index.html，建議你一定要把htdocs文件夾下的所有原始文件夾及文件都刪除，保證萬(wàn)無(wú)一失。否則，你可能永遠(yuǎn)無(wú)法顯示自己的網(wǎng)頁(yè)。

接下來(lái)，我們來(lái)建立站點(diǎn)。其中，Xampp安裝目錄下的htdocs文件夾就相當(dāng)于www，所以又稱為超級(jí)根目錄。你需要做的是，把所有與你的網(wǎng)站相關(guān)的代碼和圖片等資源都放在這個(gè)文件夾下。比如，建立一個(gè)test文件夾（例如，我的目錄路徑為D:\xampp\htdocs\test），并同時(shí)準(zhǔn)備一些子文件夾和首頁(yè)文件，參考如圖2.8所示的子目錄效果。

此時(shí)，這個(gè)test文件夾被稱為站點(diǎn)，可以理解為一個(gè)名叫test網(wǎng)站相關(guān)資源的存放地。

站點(diǎn)建立完畢，就可以通過(guò)瀏覽器進(jìn)行測(cè)試自己的首頁(yè)。記住，一定要先開啟Apache服務(wù)器，然后在瀏覽器地址欄中輸入http://127.0.0.1/test/index.html（或者h(yuǎn)ttp://localhost/test/index.html）就可以看到自己網(wǎng)站的首頁(yè)index.html。

端口號(hào)沖突怎么辦？

有時(shí)會(huì)遇到Xampp與你已安裝的某款軟件沖突，導(dǎo)致無(wú)法正常開啟Apache，這時(shí)，控制臺(tái)窗口庫(kù)的下方還會(huì)給出紅色的錯(cuò)誤提示，端口（port）被占用。請(qǐng)不要慌張，我們可以手動(dòng)做一些配置來(lái)解決這個(gè)問(wèn)題。

你可以通過(guò)Apache同一行的Config按鈕，找到hpptd.conf文件，然后【Ctrl+F】搜索Listen，找到Listen 8080，有兩個(gè)，以#開頭的那一行是注釋，沒(méi)有#開頭的才是真正的配置信息。這里你只需要把默認(rèn)的80改為公認(rèn)端口范圍（0～1023）中除80之外的任意一個(gè)值即可。這里推薦改為80附近的端口，比如81或82。因?yàn)槠渌臒o(wú)法確定是否被另一個(gè)網(wǎng)絡(luò)程序占用。

如果你對(duì)端口號(hào)進(jìn)行了上述配置，今后一定要記得在瀏覽器地址欄中輸入http://127.0.0.1：82/test/index.html。