前端必備技能——本地服務(wù)器的搭建&配置

時(shí)間：2023-07-16 03:03:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-16 03:03:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

前端必備技能——本地服務(wù)器的搭建&配置：雖說(shuō)各種前端 Build system 均有各自的靜態(tài)服務(wù)器插件提供使用，但是每次使用均需要反復(fù)啟動(dòng)并長(zhǎng)時(shí)間占用一個(gè) Terminal 窗口，并不是很方便。

對(duì)于需要長(zhǎng)期開(kāi)發(fā)和維護(hù)的項(xiàng)目，搭建一個(gè)持續(xù)穩(wěn)定的本地服務(wù)是很有必要的。

本篇文章就簡(jiǎn)單介紹一下本地服務(wù)器的搭建與配置，這里推薦使用集成環(huán)境 XAMPP ，選擇它的主要原因是因?yàn)橛斜容^友好的控制面板哈，此外后端開(kāi)發(fā)我目前一直在使用 PHP 。

該集成環(huán)境 Windows、OS X、Linux 多平臺(tái)持續(xù)更新哈~

下載完對(duì)應(yīng)平臺(tái)的安裝包我們就開(kāi)始吧！


一、XAMPP 安裝組件的選擇

　　這里要簡(jiǎn)單講一下 Windows 平臺(tái)安裝時(shí)的組件選擇，Linux 用戶可以跳過(guò)~，OS X 不太清楚哈

1. Apache 服務(wù)器組件是必選的哈，不介紹了。由于偶爾會(huì)寫一點(diǎn)后端代碼，所以我這里把 MySQL 數(shù)據(jù)庫(kù)也裝上了，下邊的 PHPMyAdmin 是用來(lái)管理數(shù)據(jù)庫(kù)的，這個(gè)集成環(huán)境的 PHP 也是必選的哈，目前已經(jīng)更新到7.0.9了，據(jù)說(shuō)比5快一倍2333~
2. FileZilla 是個(gè) FTP 服務(wù)器、Mercury 是郵件服務(wù)器，含義簡(jiǎn)單明了，不過(guò)對(duì)于用來(lái)測(cè)試的本地服務(wù)器來(lái)說(shuō)用處都不大。
3. Tomcat 如果有喜歡使用 JSP 的后端同學(xué)可以把 Tomcat 也勾選上~
4. Perl 通用腳本語(yǔ)言，這么火沒(méi)用過(guò)肯定也聽(tīng)說(shuō)過(guò)哈
5. Webbalizer 日志分析系統(tǒng)
6. Fake Sendmail 支持 PHP 發(fā)郵件的組件

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

二、修改服務(wù)器根目錄指向

　　依次點(diǎn)擊 XAMPP 控制面板上 Apache 所在行后面的 Config → Apache (httpd.conf)，打開(kāi) Apache 主配置文件 httpd.conf。

　　這里主要講一下本地服務(wù)器根目錄的設(shè)置，將 DocumentRoot 與 Directory 的路徑改為你常使用的工作目錄，如這里改成‘D:/DinoWeb’。

該目錄將作為服務(wù)器的根目錄使用。默認(rèn)情況下，在瀏覽器中輸入http://localhost 或 http://127.0.0.1 將直接訪問(wèn)到這個(gè)目錄

Directory 中還有一些可選參數(shù)，簡(jiǎn)單介紹一下：


1. Options：可選指令集，多個(gè)值以空格分隔，值前可用 ‘+’/'-' 表示從父目錄繼承指令后對(duì)所繼承指令的增刪，可選值‘None’、‘All’或以下組合：

　?、?Indexes - 無(wú) index.html/index.htm/index.php 等文件時(shí)是否列出文件目錄

　　② FollowSymLinks - 在該目錄中，服務(wù)器將跟蹤符號(hào)鏈接

符號(hào)鏈接：Linux 系統(tǒng)中文件的快捷方式，在該目錄中可以建立符號(hào)鏈接，以訪問(wèn)其他目錄中的文件，配置此項(xiàng)以減少 Apache 調(diào)用其他系統(tǒng)函數(shù)檢測(cè)符號(hào)鏈接。

　?、?Includes - 開(kāi)啟SSI（即讓 html 文件也支持相互 include）

　?、?ExecCGI - 準(zhǔn)許使用 CGI

　?、?更多... （偷個(gè)懶，其他就不寫了哈~）

2. AllowOverride：是否支持 url rewrite，值為 All 時(shí)則訪問(wèn)服務(wù)器時(shí)會(huì)讀取目錄下 .htaccess 文件以重寫 url；

粗暴點(diǎn)解釋就是：瀏覽器訪問(wèn) a.html 文件通過(guò) .htaccess 處理之后實(shí)際上給你的是 balabala.html 的內(nèi)容，但瀏覽器地址欄中顯示的還是 a.html，目錄重寫同理。

3. Require all granted/denied：是否允許訪問(wèn)。

三、虛擬主機(jī)的配置

　　為了更好地模擬真實(shí)的運(yùn)行環(huán)境，一般推薦為每個(gè)項(xiàng)目配置一個(gè)獨(dú)立的虛擬主機(jī)，而不是通過(guò)子目錄的形式進(jìn)行訪問(wèn)（例： http://localhost/myobject1），使用 http://myobject1.local 進(jìn)行訪問(wèn)更加優(yōu)雅自然~

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

Include conf/extra/httpd-vhosts.conf　　若該行使用‘#’號(hào)被注釋，記得去掉‘#’號(hào)以加載虛擬主機(jī)配置文件。

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

VirtualHost 指定了一個(gè)虛擬主機(jī)的 IP 地址與端口，端口默認(rèn)為 80，IP 只要是內(nèi)部回送地址就 OK，但不要用 127.0.0.1，這個(gè)是給根目錄預(yù)留的哈，簡(jiǎn)單將一下其中的參數(shù)：

　?、?Document 與 Directory 和根目錄配置一樣，指虛擬主機(jī)所指向的目錄。這里在 Directory 中重寫了可選命令‘-Indexes’，代表目錄中沒(méi)有索引文件的時(shí)候禁止顯示文件列表；

　?、?ServerName - 虛擬主機(jī)名稱，備注一樣的存在~

　?、?DirectoryIndex - 目錄索引文件，就是首頁(yè)入口 index.html、default.html 之類；

　?、?ErrorLog - 異常日志

　?、?CustomLog - 使用 httpd.conf 中默認(rèn)聲明的 common 日志格式來(lái)記錄訪問(wèn)日志（說(shuō)白了就是普通的訪問(wèn)日志不必記錄的那么詳細(xì)，簡(jiǎn)單點(diǎn)記就夠用了）

五、設(shè)置本地 Hosts

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


127.0.0.2 hello.local

127.0.0.2 - 上文配置虛擬主機(jī)時(shí) VirtualHost 的回送 IP
hello.local - 虛擬域名（類似于 localhost，名稱隨你喜歡想怎么起就怎么起~）

六、將 Apache&MySQL 安裝為系統(tǒng)服務(wù)并啟動(dòng)

　　所有的配置完成后就可以啟動(dòng)服務(wù)了，點(diǎn)擊每行 Action 中的 Start 即可啟動(dòng)！~/(≧▽≦)/~

推薦將 Apache 與 MySQL（如果你需要的話）安裝為系統(tǒng)服務(wù)，這樣每次系統(tǒng)啟動(dòng)的時(shí)候就會(huì)自動(dòng)加載主機(jī)服務(wù)，免去了手動(dòng)啟動(dòng)的麻煩，依次點(diǎn)擊每行最前面的大紅叉即可安裝為系統(tǒng)服務(wù)。

七、趕緊寫個(gè)栗子測(cè)試一下吧~

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

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

八、現(xiàn)在你已經(jīng)有了一個(gè)自己配置的本地服務(wù)器了！趕快試一下吧?。槟愕拿總€(gè)項(xiàng)目配置一個(gè)獨(dú)立的虛擬主機(jī)~



OVER.