一、建立你的第一個(gè)網(wǎng)站（目標(biāo)）

前端開發(fā) 最終還是屬于 Web 開發(fā) 中的一個(gè)分支，想要成為一名合格的前端開發(fā)人員，就必須要 充分理解Web 的概念。

構(gòu)建一個(gè)專業(yè)的網(wǎng)站是一項(xiàng)巨大的工作！對(duì)于新手我們應(yīng)該從小事做起，也就是說咱們不可能立馬就要求自己能夠開發(fā)出跟淘寶一樣的電商平臺(tái)，但是對(duì)咱們來說建立一個(gè)屬于自己的 Blog 網(wǎng)站并不難（其實(shí)再大的系統(tǒng)也是由一些基礎(chǔ)功能疊加出來的），所以咱們就從這個(gè)話題開始聊。

二、 如何建立一個(gè) Blog 網(wǎng)站

• 提問：到底什么是網(wǎng)站？
• 可以在瀏覽器上通過一個(gè)地址直接訪問使用
• 用于提供一種（或多種）特定服務(wù)的一系列具備相關(guān)性的網(wǎng)頁組合的整體例如：
• 博客、門戶、電商、在線教育等

有了明確的目標(biāo)過后，我們需要規(guī)劃具體的業(yè)務(wù)方案，學(xué)習(xí)特定的技能，完成各項(xiàng)功能，解決各種過程中出現(xiàn)的問題。

2.1. 之前學(xué)習(xí)了什么？

在之前的學(xué)習(xí)過程中，我們很專注，沒有關(guān)心這些東西在整體中是什么角色，起到什么作用。這里我們是時(shí)候總結(jié)一下我們之前學(xué)過了的內(nèi)容：

• 網(wǎng)頁開發(fā)技術(shù)（硬性）
  o HTML——網(wǎng)頁內(nèi)容結(jié)構(gòu)（GUl）
  o CSS——網(wǎng)頁外觀樣式（GUl）
  o JavaScript——編程語言（可以用于調(diào)用瀏覽器提供的APl）
  o Web APIs——網(wǎng)頁交互（界面功能）
  o jQuery——便捷手段（糖果而已，不是必要的）
• 編程能力/編程思想/解決問題的思路（軟性）
  o 我要做什么（我要得到什么），我目前有什么（我能拿到什么）

至此，我們已經(jīng)可以獨(dú)立完成網(wǎng)頁開發(fā)了，具體能完成的東西就是一個(gè)一個(gè)的網(wǎng)頁，而且還能給這個(gè)頁面加上一些動(dòng)態(tài)的交互。但是這距離成為一個(gè)網(wǎng)站還有一些路要走。

2.2.還需要學(xué)習(xí)什么？

想要完成完整的Web網(wǎng)站，還需要學(xué)習(xí)什么？

• 搭建WEB 服務(wù)器（提供網(wǎng)站服務(wù)的機(jī)器）
• HTTP（瀏覽器與服務(wù)端的通訊協(xié)議）
• 服務(wù)端開發(fā)（動(dòng)態(tài)網(wǎng)頁技術(shù)）
• 數(shù)據(jù)庫操作（服務(wù)端存儲(chǔ)數(shù)據(jù)方式）
• AJAX（瀏覽器與服務(wù)端的數(shù)據(jù)交互方式）

三、搭建Web服務(wù)器

• 服務(wù)器（提供服務(wù)）指的就是一臺(tái)安裝特定的軟件的公共計(jì)算機(jī)，用于專門用于提供特定的服務(wù)。
  o 按照服務(wù)類型的不同，又劃分為：Web服務(wù)器、數(shù)據(jù)庫服務(wù)器、文件服務(wù)器等等。

• 客戶端（使用服務(wù)）指的是在一次服務(wù)過程中使用這個(gè)服務(wù)的設(shè)備（網(wǎng)絡(luò)端點(diǎn)）。
  o 目前咱們最常見的客戶端就是瀏覽器

我們手頭上的這些網(wǎng)頁，如果想要成為一個(gè)網(wǎng)站，首先要完成的第一件事就是有一臺(tái)公共的Web服務(wù)器，把這一系列的頁面放到這臺(tái)Web服務(wù)器上，讓用戶可以通過服務(wù)器的地址訪問到這些網(wǎng)頁。

思考：為什么不把這些網(wǎng)頁放在我們自己電腦上呢？

那么，哪里有這樣的服務(wù)器呢？

我們手頭上的電腦都可以是一臺(tái)服務(wù)器，因?yàn)榉?wù)器是一個(gè)相對(duì)的概念，只要能提供服務(wù)就可以是一個(gè)服務(wù)器（提供服務(wù)的時(shí)候就是服務(wù)端，使用服務(wù)的時(shí)候就是客戶端）。
既然服務(wù)器就是安裝特定的軟件的計(jì)算機(jī)，那么要讓自己的成為Web服務(wù)器就是要安裝一個(gè)Web服務(wù)器軟件。

3.1.Web服務(wù)器軟件

3.2.安裝Web服務(wù)器軟件

這里我們選擇一個(gè)比較常用的Web 服務(wù)器軟件：Apache HTTP Server。

如果使用的是安裝版，與其他軟件相同，安裝無外乎就是一路點(diǎn)下一步，只是需要注意安裝目錄路徑中不要有中文。

由于最新的Apache 已經(jīng)不提供Windows的安裝版本了，所以我們這里使用的是解壓版。

下載地址：https://www.apachelounge.com/download/
使用說明：https://httpd.apache.org/docs/current/platform/windows.html

安裝方式如下，先解壓到純英文路徑的文件夾，然后執(zhí)行以下命令：

#注意：需要使用管理員身份運(yùn)行命令行！！！ #切換到Apache解壓路徑中的bin目錄 $cd<解壓目錄>/bin #安裝Apache服務(wù)，-n參數(shù)是指定服務(wù)名稱 $httpd.exe-k install-n"Apache" #如果需要卸載Apache，可以執(zhí)行以下命令 $httpd.exe-k uninstall-n"Apache"

執(zhí)行安裝命令過后會(huì)報(bào)一個(gè)錯(cuò)，原因是默認(rèn)的配置文件有問題，需要先調(diào)整一下配置文件conf/httpd.conf，才能正常啟動(dòng)服務(wù)。




找到Apache解壓目錄中的conf目錄下的httpd.conf文件，定位到37行，將c:/Apache24改為解壓目錄，我這里解壓到路徑是c:/Develop/apache，所以我這里修改

修改完以后，執(zhí)行以下命令重新測(cè)試配置文件是否通過。

$httpd.exe-t

這里任然報(bào)錯(cuò)：

通過錯(cuò)誤信息得知，這里是因?yàn)榱硗庖粋€(gè)地方配置的目錄不存在導(dǎo)致的，所以接著調(diào)整246行的DocumentRoot選項(xiàng)：

隨即，我們發(fā)現(xiàn)這個(gè)配置文件中有很多默認(rèn)配置選項(xiàng)中的路徑都c:/Apache24，所以我們批量都修改為我們解壓的目錄路徑。
然后重新執(zhí)行httpd.exe -t測(cè)試配置文件，這時(shí)候應(yīng)該提示syntax ok。

如果有關(guān)于ServerName的警告提示，不用管它，暫時(shí)還不會(huì)影響我們接下來的使用和操作。

接著運(yùn)行以下命令重新啟動(dòng)Apache服務(wù)：

#注意：需要使用管理員身份運(yùn)行命令行！！！ $httpd.exe-k start-n"Apache" #重新啟動(dòng)Apache 服務(wù) $httpd.exe-k restart-n"Apache" #停止Apache服務(wù) $httpd.exe-k stop-n"Apache"

回到瀏覽器中，地址欄輸入：http://localhost/，回車訪問，這時(shí)正常應(yīng)該看到It works！

3.3.提供Web 服務(wù)

啟動(dòng) Apache，讓別人可以使用你機(jī)器上安裝的Apache提供的Web服務(wù)，訪問你機(jī)器上的網(wǎng)站。這種情況下你的機(jī)器就是服務(wù)器，別人的機(jī)器就是客戶端。
注意：

• 確保配置文件語法檢查通過
• 確保80端口沒有被其他程序占用
• 確保防火墻允許80端口的請(qǐng)求，或者干脆關(guān)掉防火墻
• 如果出現(xiàn)Forbidden情況，確保配置文件httpd.conf中247行（DocumentRoot之后）的Directory配置的與DocumentRoot路徑相同
• 我們?cè)陂_發(fā)階段大多數(shù)都是自己訪問自己機(jī)器上的網(wǎng)站，那這種情況下，我們既是服務(wù)端又是客戶端。對(duì)于新手來說，最常見的問題就是分不清楚哪是客戶端應(yīng)該有的，哪是服務(wù)端應(yīng)該有的。這種時(shí)候一定要保持清醒，客戶端局限在瀏覽器窗口，代碼以及Apache相關(guān)的文件和配置都是放在服務(wù)端的。

四、網(wǎng)絡(luò)基礎(chǔ)概念（必要）

在單個(gè)局域網(wǎng)下，結(jié)構(gòu)非常簡(jiǎn)單，就是我們所連接的網(wǎng)絡(luò)設(shè)備（網(wǎng)關(guān)）給我們分配了一個(gè)地址，在這個(gè)范圍之內(nèi)我們都可以通過這個(gè)地址找到我們的這個(gè)設(shè)備。

如果設(shè)備沒有連接任何網(wǎng)絡(luò)情況下，我們會(huì)有一個(gè)本地回環(huán)地址127.0.0.1

4.1.1 單個(gè)網(wǎng)絡(luò)情況

4.1.2 多個(gè)網(wǎng)絡(luò)情況

但是當(dāng)一個(gè)設(shè)備同時(shí)處于多個(gè)網(wǎng)絡(luò)下（比如同時(shí)連接了有線網(wǎng)卡和無線網(wǎng)卡），就會(huì)變得稍微復(fù)雜一點(diǎn)：

例如：
小明這個(gè)同學(xué)同時(shí)報(bào)名了兩個(gè)課程，在A班級(jí)小明是班長(zhǎng)，所有A班級(jí)的同學(xué)都管他叫班長(zhǎng)（叫班長(zhǎng)就能找到他）。而在B班級(jí)小明是課代表，所有B班的同學(xué)都管他叫課代表（叫課代表就能找到他）。
同樣的一個(gè)人在不同的環(huán)境有不同的身份，這些身份只有特定的環(huán)境才生效。

紙上得來終覺淺，絕知此事要躬行！多嘗試，多思考才能更好的理解這個(gè)問題。

4.2.域名

由于IP地址都是沒有規(guī)律的一些數(shù)字組成的，很難被人記住，不利于廣泛傳播，所以就有人想出來要給IP起名字（別名）。

域名是需要花錢注冊(cè)的

4.3. DNS

通過寬帶運(yùn)營(yíng)商提供的服務(wù)器解析一個(gè)域名背后對(duì)應(yīng)的IP，這個(gè)過程叫做DNS尋址，幫你完成DNS尋址過程的服務(wù)器叫做DNS服務(wù)器。

4.3.1.hosts文件

操作系統(tǒng)在發(fā)起對(duì)DNS服務(wù)器的查詢請(qǐng)求之前，會(huì)優(yōu)先檢查本機(jī)的hosts文件。如果這個(gè)文件中包含了對(duì)當(dāng)前需要解析的域名的配置，則不再發(fā)起對(duì)DNS 服務(wù)器的請(qǐng)求，直接使用hosts文件中的配置。
文件所在路徑：

• Windows: C:\Windows\System32\drivers\etc\hosts
• macOS: /etc/hosts

注意：

本機(jī)的hosts文件配置只能到影響本機(jī)的DNS尋址

只有以管理員權(quán)限運(yùn)行的編輯器才有權(quán)利修改hosts文件

4.4.端囗

計(jì)算機(jī)本身是一個(gè)封閉的環(huán)境，就像是一個(gè)大樓，如果需要有數(shù)據(jù)通信往來，必須有門，這個(gè)門在術(shù)語中就叫端口，每一個(gè)端口都有一個(gè)編號(hào)，每臺(tái)計(jì)算機(jī)只有65536個(gè)端口（0-65535）。

一般我們把“占門”的過程叫做監(jiān)聽

可以通過在命令行中運(yùn)行：netstat-an命令監(jiān)視本機(jī)端口使用情況：

參考鏈接：

• https://baike.baidu.com/item/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E5%8F%A3
• https://baike.baidu.com/item/%E7%AB%AF%E5%8F%A3

http默認(rèn)的端口80
https默認(rèn)的端口是443

4.5.URL

URL（Uniform Resource Locator），統(tǒng)一資源定位符，通俗點(diǎn)來說就是表示網(wǎng)絡(luò)當(dāng)中某一個(gè)網(wǎng)頁的完整訪問地址，它具有一定的格式：

例如：https://zce.me:80/schools/students？id=18&name=zce#photo

host 主機(jī) ：zce.me:80
域名（主機(jī)名）：zce.me
請(qǐng)求路徑：/schools/students
請(qǐng)求參數(shù)：id=18&name=zce
錨點(diǎn)值：#photo

五、請(qǐng)求響應(yīng)流程

用戶打開瀏覽器

地址欄輸入我們需要訪問的網(wǎng)站網(wǎng)址（URL）

瀏覽器通過DNS服務(wù)器獲取即將訪問的網(wǎng)站IP地址

瀏覽器發(fā)起一個(gè)對(duì)這個(gè)IP的請(qǐng)求

服務(wù)端接收到這個(gè)請(qǐng)求，進(jìn)行相應(yīng)的處理

服務(wù)端將處理完的結(jié)果返回給客戶端瀏覽器

瀏覽器將服務(wù)端返回的結(jié)果呈現(xiàn)到界面上

六、配置Apache

配置文檔：http://httpd.apache.org/docs/current/
配置文件中行首的#指的是注釋
注意：以下所記錄的行號(hào)僅供參考，不同版本的配置文件可能不盡相同。

6.1.監(jiān)聽端口

監(jiān)聽端口可以隨意修改為任意一個(gè)未被其他程序監(jiān)聽的端口，可以通過設(shè)置配置文件httpd.conf中的Listen指令后面的數(shù)字修改。

6.2.網(wǎng)站根目錄

網(wǎng)站根目錄就是存放我們網(wǎng)站文件的最頂層目錄，通常URL中域名后面的第一個(gè)斜線對(duì)應(yīng)（映射）的就是網(wǎng)站根目錄。
默認(rèn)文檔指的是我們?cè)谠L問某一個(gè)目錄時(shí)（沒有指定具體的文件），默認(rèn)訪問的文件叫做默認(rèn)文檔
注：動(dòng)態(tài)網(wǎng)站情況會(huì)比較特殊，需要單獨(dú)考慮，不一定是這個(gè)規(guī)則。

默認(rèn)Apache的網(wǎng)站根目錄是安裝目錄中的htdocs文件夾，為了方便對(duì)網(wǎng)站文件的管理，一般我們會(huì)將其設(shè)置在一個(gè)自定義目錄中（如果你不介意其實(shí)不修改也無所謂）。
如果需要設(shè)置網(wǎng)站根目錄，可以通過修改配置文件httpd.conf中的網(wǎng)站根目錄選項(xiàng)切換。

6.3.默認(rèn)文檔

當(dāng)客戶端訪問的是一個(gè)目錄而不是具體文件時(shí)，服務(wù)端默認(rèn)返回這個(gè)目錄下的某個(gè)文檔（文件），這個(gè)文檔就稱之為默認(rèn)文檔。

配置文件httpd.conf的280行的DirectoryIndex，默認(rèn)文檔可以配置多個(gè)（有前到后依次去找，找到為止，如果沒找到任何一個(gè)則啟用目錄瀏覽）：



6.4.虛擬主機(jī)

如果一臺(tái)機(jī)器上只有一個(gè)網(wǎng)站的話，沒有任何問題，但是如果想要在一臺(tái)機(jī)器上部署多個(gè)站點(diǎn)，就必須通過配置虛擬主機(jī)的方式解決。

由于后期對(duì)虛擬主機(jī)的配置操作非常常見，所以我們一般將虛擬主機(jī)的配置單獨(dú)放到一個(gè)配置文件中，然后在主配置文件中引入，避免破壞主配置文件中的其他配置。
Include conf/extra/httpd-vhosts.conf配置的作用就將另外一個(gè)配置文件引入（使其生效）

具體的操作方式就是在主配置文件httpd.conf的511行取消注釋：

然后找到Apache的虛擬主機(jī)配置文件，添加一個(gè)如下的虛擬主機(jī)配置節(jié)點(diǎn)，然后重新啟動(dòng)Apache。(注意：每次修改完配置文件后，都需要重啟Apache服務(wù)器才能生效)
這個(gè)文件中有兩個(gè)默認(rèn)的示例配置，可以注釋掉。

如果真的要使用site0.io、site1.io這2個(gè)域名的話，就只能通過修改hosts文件達(dá)到目的，原因很簡(jiǎn)單：這個(gè)域名不是我們自己的，我們沒有辦法修改這個(gè)域名在公網(wǎng)上的DNS。

注意：

如果使用了虛擬主機(jī)，則默認(rèn)必須全部使用虛擬主機(jī)，即之前的默認(rèn)網(wǎng)站也必須通過虛擬主機(jī)方式配置，否則訪問不到。參考：http://skypegnu1.blog.51cto.com/8991766/1532454

如果虛擬主機(jī)的端口使用的不是80，則需要在主配置文件中添加一個(gè)對(duì)這個(gè)端口的監(jiān)聽：

七、靜態(tài)網(wǎng)站與動(dòng)態(tài)網(wǎng)站

至此，我們已經(jīng)可以把這些靜態(tài)頁面放到服務(wù)器上了，客戶端也可以通過域名請(qǐng)求這個(gè)網(wǎng)站，但是對(duì)于我們來說，Apache 能夠完成的事情過于簡(jiǎn)單，無外乎就是找到你請(qǐng)求對(duì)應(yīng)的文件→讀取文件→將文件內(nèi)容響應(yīng)給客戶端瀏覽器（文件原封不動(dòng)的給你）。無法滿足讓網(wǎng)頁內(nèi)容動(dòng)起來（隨著數(shù)據(jù)動(dòng)態(tài)變化）的需求。
于是乎，就有人提出了服務(wù)端動(dòng)態(tài)網(wǎng)頁的概念，這種實(shí)現(xiàn)這種概念的技術(shù)有很多種：JSP、ASP.NET、PHP、Node等等。
這些技術(shù)的原理就是：不再將HTML固定寫死，每次用戶請(qǐng)求時(shí)，動(dòng)態(tài)執(zhí)行一段代碼，臨時(shí)生成一個(gè)用戶想要的HTML頁面。

動(dòng)態(tài)網(wǎng)站指的也就是每次請(qǐng)求時(shí)服務(wù)端動(dòng)態(tài)生成HTML返回給用戶的這種網(wǎng)站。
這里我們選擇PHP作為我們了解服務(wù)端動(dòng)態(tài)網(wǎng)頁開發(fā)的技術(shù)方案，注意：我們學(xué)習(xí)的重心不在PHP，而是了解服務(wù)端開發(fā)，以及某些其他對(duì)前端開發(fā)有幫助的東西。

7.1 配置PHP支持

PHP文件的擴(kuò)展名就是.php

我們可以嘗試在剛剛配置的網(wǎng)站中添加一個(gè)擴(kuò)展名為php的文件，然后到瀏覽器中訪問它。

<!--demo.php--> <?php echo'Hello PHP'; ?>

結(jié)果出乎意料，并沒有顯示我們想要的Hello PHP，而是將我們的代碼原封不動(dòng)的返回給瀏覽器了。

原因很簡(jiǎn)單：Apache只能處理靜態(tài)文件請(qǐng)求，對(duì)于后綴名為.php這種動(dòng)態(tài)文件，它無法執(zhí)行，所以就當(dāng)成是一個(gè)靜態(tài)文件直接返回了。
解決方法：

• 在服務(wù)器上安裝PHP
  o解壓php到純英文路徑目錄中

• 在Apache中添加支持PHP的配置
  o在Apache 添加PHP處理模塊

#php support LoadModule php7_module C:/Develop/php/php7apache2_4.dll

o在<IfModule mime_module>節(jié)點(diǎn)中添加.php擴(kuò)展名解析支持

#parse.php files AddType application/x-httpd-php.php

o默認(rèn)文檔配置節(jié)點(diǎn)<IfModule dir_module>中添加index.php

默認(rèn)文檔指的是在訪問一個(gè)目錄而不是具體文件名時(shí)，默認(rèn)執(zhí)行的文件名

<IfModule dir_module> DirectoryIndex index.html index.php </IfModule>

• 重啟Apache
  

7.2 Apache與PHP

對(duì)于很多初學(xué)者來說，很容易把Apache和PHP混在一起混為一談，其實(shí)他們兩者各自有各自負(fù)責(zé)的領(lǐng)域，各自的職責(zé)，但是我們?cè)谑褂肞HP做動(dòng)態(tài)網(wǎng)站開發(fā)時(shí)，兩者就會(huì)產(chǎn)生聯(lián)系，具體如下：

你可以理解為：Apache是一家沒有太多能力的公司，只能處理一些簡(jiǎn)單的業(yè)務(wù)（靜態(tài)網(wǎng)站），但是心很大想做更多的事（動(dòng)態(tài)網(wǎng)站），所以就想到了外包，所有額外的業(yè)務(wù)都需要外包給其他程序，而PHP就是理解為一個(gè)專門能夠處理php業(yè)務(wù)的外包公司

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的一、服务端开发基础（搭建Web服务器、网络基础概念、请求响应流程、配置Apache、静态网站与动态网站）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。