前端必備技能——本地伺服器的搭建&配置

01-26

雖說各種前端 Build system 均有各自的靜態伺服器插件提供使用，但是每次使用均需要反覆啟動並長時間佔用一個 Terminal 窗口，並不是很方便。

對於需要長期開發和維護的項目，搭建一個持續穩定的本地服務是很有必要的。

本篇文章就簡單介紹一下本地伺服器的搭建與配置，這裡推薦使用集成環境 XAMPP ，選擇它的主要原因是因為有比較友好的控制面板哈，此外後端開發我目前一直在使用 PHP 。

該集成環境 Windows、OS X、Linux 多平台持續更新哈~

下載完對應平台的安裝包我們就開始吧！

一、XAMPP 安裝組件的選擇

　　這裡要簡單講一下 Windows 平台安裝時的組件選擇，Linux 用戶可以跳過~，OS X 不太清楚哈

Apache 伺服器組件是必選的哈，不介紹了。由於偶爾會寫一點後端代碼，所以我這裡把 MySQL 資料庫也裝上了，下邊的 PHPMyAdmin 是用來管理資料庫的，這個集成環境的 PHP 也是必選的哈，目前已經更新到7.0.9了，據說比5快一倍2333~
FileZilla 是個 FTP 伺服器、Mercury 是郵件伺服器，含義簡單明了，不過對於用來測試的本地伺服器來說用處都不大。
Tomcat 如果有喜歡使用 JSP 的後端同學可以把 Tomcat 也勾選上~
Perl 通用腳本語言，這麼火沒用過肯定也聽說過哈
Webbalizer 日誌分析系統
Fake Sendmail 支持 PHP 發郵件的組件

組件選擇完之後就可以一路 Next 下去嘞,直到安裝完成

二、修改伺服器根目錄指向

　　依次點擊 XAMPP 控制面板上 Apache 所在行後面的 Config → Apache (httpd.conf)，打開 Apache 主配置文件 httpd.conf。

　　這裡主要講一下本地伺服器根目錄的設置，將 DocumentRoot 與 Directory 的路徑改為你常使用的工作目錄，如這裡改成『D:/DinoWeb』。

該目錄將作為伺服器的根目錄使用。默認情況下，在瀏覽器中輸入http://localhost 或 http://127.0.0.1 將直接訪問到這個目錄

Directory 中還有一些可選參數，簡單介紹一下：

1. Options：可選指令集，多個值以空格分隔，值前可用『+』/"-" 表示從父目錄繼承指令後對所繼承指令的增刪，可選值『None』、『All』或以下組合：

　　① Indexes - 無 index.html/index.htm/index.php 等文件時是否列出文件目錄

　　② FollowSymLinks - 在該目錄中，伺服器將跟蹤符號鏈接

符號鏈接：Linux 系統中文件的快捷方式，在該目錄中可以建立符號鏈接，以訪問其他目錄中的文件，配置此項以減少 Apache 調用其他系統函數檢測符號鏈接。

　　③ Includes - 開啟SSI（即讓 html 文件也支持相互 include）

　　④ ExecCGI - 准許使用 CGI

　　⑤ 更多... （偷個懶，其他就不寫了哈~）

2. AllowOverride：是否支持 url rewrite，值為 All 時則訪問伺服器時會讀取目錄下 .htaccess 文件以重寫 url；

粗暴點解釋就是：瀏覽器訪問 a.html 文件通過 .htaccess 處理之後實際上給你的是 balabala.html 的內容，但瀏覽器地址欄中顯示的還是 a.html，目錄重寫同理。

3. Require all granted/denied：是否允許訪問。

三、虛擬主機的配置

　　為了更好地模擬真實的運行環境，一般推薦為每個項目配置一個獨立的虛擬主機，而不是通過子目錄的形式進行訪問（例： http://localhost/myobject1），使用 http://myobject1.local 進行訪問更加優雅自然~

　　1. 首先檢查 httpd.conf 主配置文件中是否載入了虛擬主機配置文件，找到如下配置

Include conf/extra/httpd-vhosts.conf

　　若該行使用『#』號被注釋，記得去掉『#』號以載入虛擬主機配置文件。

　　2. 然後，依次點擊 XAMPP 控制面板上 Apache 所在行後面的 Config → <Browse> [Apache]，打開 Apache 所在文件夾，打開 /conf/extra 目錄中的 httpd-vhosts.conf 虛擬主機配置文件。在文件末尾加上自己的虛擬主機配置：

VirtualHost 指定了一個虛擬主機的 IP 地址與埠，埠默認為 80，IP 只要是內部回送地址就 OK，但不要用 127.0.0.1，這個是給根目錄預留的哈，簡單將一下其中的參數：

　　① Document 與 Directory 和根目錄配置一樣，指虛擬主機所指向的目錄。這裡在 Directory 中重寫了可選命令『-Indexes』，代表目錄中沒有索引文件的時候禁止顯示文件列表；

　　② ServerName - 虛擬主機名稱，備註一樣的存在~

　　③ DirectoryIndex - 目錄索引文件，就是首頁入口 index.html、default.html 之類；

　　④ ErrorLog - 異常日誌

　　⑤ CustomLog - 使用 httpd.conf 中默認聲明的 common 日誌格式來記錄訪問日誌（說白了就是普通的訪問日誌不必記錄的那麼詳細，簡單點記就夠用了）

五、設置本地 Hosts

　　打開系統盤 /Windows/System32/drivers/etc 目錄中的 Hosts 文件，在文件最末加上如下回送 IP 指向（類似小的 DNS 系統~）：

127.0.0.2 hello.local

127.0.0.2 - 上文配置虛擬主機時 VirtualHost 的回送 IP

hello.local - 虛擬域名（類似於 localhost，名稱隨你喜歡想怎麼起就怎麼起~）

六、將 Apache&MySQL 安裝為系統服務並啟動

　　所有的配置完成後就可以啟動服務了，點擊每行 Action 中的 Start 即可啟動！~(≧▽≦)/~

推薦將 Apache 與 MySQL（如果你需要的話）安裝為系統服務，這樣每次系統啟動的時候就會自動載入主機服務，免去了手動啟動的麻煩，依次點擊每行最前面的大紅叉即可安裝為系統服務。

七、趕緊寫個栗子測試一下吧~

　　1. 寫個 index.html 放入虛擬主機所在目錄（即上文中的 D:/DinoWeb/HelloWorld）

　　2、直接在瀏覽器地址欄中輸入 Hosts 配置中所填的虛擬域名（即上文的 http://hello.local）即可直接訪問！

八、現在你已經有了一個自己配置的本地伺服器了！趕快試一下吧！！為你的每個項目配置一個獨立的虛擬主機~

OVER.