一、服務端開發基礎(搭建Web服務器、網絡基礎概念、請求響應流程、配置Apache、靜態網站與動態網站)

一、建立你的第一個網站(目標)

前端開發 最終還是屬於 Web 開發 中的一個分支,想要成爲一名合格的前端開發人員,就必須要 充分理解Web 的概念。

構建一個專業的網站是一項巨大的工作!對於新手我們應該從小事做起,也就是說咱們不可能立馬就要求自己能夠開發出跟淘寶一樣的電商平臺,但是對咱們來說建立一個屬於自己的 Blog 網站並不難(其實再大的系統也是由一些基礎功能疊加出來的),所以咱們就從這個話題開始聊。

二、 如何建立一個 Blog 網站

  • 提問:到底什麼是網站?
  • 可以在瀏覽器上通過一個地址直接訪問使用
  • 用於提供一種(或多種)特定服務的一系列具備相關性的網頁組合的整體例如:
  • 博客、門戶、電商、在線教育等

有了明確的目標過後,我們需要規劃具體的業務方案,學習特定的技能,完成各項功能,解決各種過程中出現的問題。
在這裏插入圖片描述
2.1. 之前學習了什麼?

在之前的學習過程中,我們很專注,沒有關心這些東西在整體中是什麼角色,起到什麼作用。這裏我們是時候總結一下我們之前學過了的內容:

  • 網頁開發技術(硬性)
    o HTML——網頁內容結構(GUl)
    o CSS——網頁外觀樣式(GUl)
    o JavaScript——編程語言(可以用於調用瀏覽器提供的APl)
    o Web APIs——網頁交互(界面功能)
    o jQuery——便捷手段(糖果而已,不是必要的)
  • 編程能力/編程思想/解決問題的思路(軟性)
    o 我要做什麼(我要得到什麼),我目前有什麼(我能拿到什麼)

至此,我們已經可以獨立完成網頁開發了,具體能完成的東西就是一個一個的網頁,而且還能給這個頁面加上一些動態的交互。但是這距離成爲一個網站還有一些路要走。
在這裏插入圖片描述

2.2.還需要學習什麼?

想要完成完整的Web網站,還需要學習什麼?

  • 搭建WEB 服務器(提供網站服務的機器)
  • HTTP(瀏覽器與服務端的通訊協議)
  • 服務端開發(動態網頁技術)
  • 數據庫操作(服務端存儲數據方式)
  • AJAX(瀏覽器與服務端的數據交互方式)

三、搭建Web服務器

  • 服務器(提供服務)指的就是一臺安裝特定的軟件的公共計算機,用於專門用於提供特定的服務。
    o 按照服務類型的不同,又劃分爲:Web服務器、數據庫服務器、文件服務器等等。

  • 客戶端(使用服務)指的是在一次服務過程中使用這個服務的設備(網絡端點)。
    o 目前咱們最常見的客戶端就是瀏覽器

我們手頭上的這些網頁,如果想要成爲一個網站,首先要完成的第一件事就是有一臺公共的Web服務器,把這一系列的頁面放到這臺Web服務器上,讓用戶可以通過服務器的地址訪問到這些網頁。
在這裏插入圖片描述

思考:爲什麼不把這些網頁放在我們自己電腦上呢?

那麼,哪裏有這樣的服務器呢?

我們手頭上的電腦都可以是一臺服務器,因爲服務器是一個相對的概念,只要能提供服務就可以是一個服務器(提供服務的時候就是服務端,使用服務的時候就是客戶端)。
既然服務器就是安裝特定的軟件的計算機,那麼要讓自己的成爲Web服務器就是要安裝一個Web服務器軟件。

3.1.Web服務器軟件
在這裏插入圖片描述
3.2.安裝Web服務器軟件

這裏我們選擇一個比較常用的Web 服務器軟件:Apache HTTP Server。

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

由於最新的Apache 已經不提供Windows的安裝版本了,所以我們這裏使用的是解壓版。

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

安裝方式如下,先解壓到純英文路徑的文件夾,然後執行以下命令:

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

執行安裝命令過後會報一個錯,原因是默認的配置文件有問題,需要先調整一下配置文件conf/httpd.conf,才能正常啓動服務。
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
找到Apache解壓目錄中的conf目錄下的httpd.conf文件,定位到37行,將c:/Apache24改爲解壓目錄,我這裏解壓到路徑是c:/Develop/apache,所以我這裏修改
在這裏插入圖片描述
修改完以後,執行以下命令重新測試配置文件是否通過。

$httpd.exe-t

這裏任然報錯:
在這裏插入圖片描述
通過錯誤信息得知,這裏是因爲另外一個地方配置的目錄不存在導致的,所以接着調整246行的DocumentRoot選項:
在這裏插入圖片描述
隨即,我們發現這個配置文件中有很多默認配置選項中的路徑都c:/Apache24,所以我們批量都修改爲我們解壓的目錄路徑。
然後重新執行httpd.exe -t測試配置文件,這時候應該提示syntax ok

如果有關於ServerName的警告提示,不用管它,暫時還不會影響我們接下來的使用和操作。

接着運行以下命令重新啓動Apache服務:

#注意:需要使用管理員身份運行命令行!!!
$httpd.exe-k start-n"Apache"
#重新啓動Apache 服務
$httpd.exe-k restart-n"Apache"
#停止Apache服務
$httpd.exe-k stop-n"Apache"

回到瀏覽器中,地址欄輸入:http://localhost/,回車訪問,這時正常應該看到It works!
在這裏插入圖片描述
3.3.提供Web 服務

啓動 Apache,讓別人可以使用你機器上安裝的Apache提供的Web服務,訪問你機器上的網站。這種情況下你的機器就是服務器,別人的機器就是客戶端。
注意:

  • 確保配置文件語法檢查通過
  • 確保80端口沒有被其他程序佔用
  • 確保防火牆允許80端口的請求,或者乾脆關掉防火牆
  • 如果出現Forbidden情況,確保配置文件httpd.conf中247行(DocumentRoot之後)的Directory配置的與DocumentRoot路徑相同
  • 我們在開發階段大多數都是自己訪問自己機器上的網站,那這種情況下,我們既是服務端又是客戶端。對於新手來說,最常見的問題就是分不清楚哪是客戶端應該有的,哪是服務端應該有的。這種時候一定要保持清醒,客戶端侷限在瀏覽器窗口,代碼以及Apache相關的文件和配置都是放在服務端的。

四、網絡基礎概念(必要)

在單個局域網下,結構非常簡單,就是我們所連接的網絡設備(網關)給我們分配了一個地址,在這個範圍之內我們都可以通過這個地址找到我們的這個設備。

如果設備沒有連接任何網絡情況下,我們會有一個本地迴環地址127.0.0.1

4.1.1 單個網絡情況
在這裏插入圖片描述

4.1.2 多個網絡情況

但是當一個設備同時處於多個網絡下(比如同時連接了有線網卡和無線網卡),就會變得稍微複雜一點:
在這裏插入圖片描述

例如:
小明這個同學同時報名了兩個課程,在A班級小明是班長,所有A班級的同學都管他叫班長(叫班長就能找到他)。而在B班級小明是課代表,所有B班的同學都管他叫課代表(叫課代表就能找到他)。
同樣的一個人在不同的環境有不同的身份,這些身份只有特定的環境才生效。

紙上得來終覺淺,絕知此事要躬行!多嘗試,多思考才能更好的理解這個問題。

4.2.域名

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

域名是需要花錢註冊的

4.3. DNS
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

通過寬帶運營商提供的服務器解析一個域名背後對應的IP,這個過程叫做DNS尋址,幫你完成DNS尋址過程的服務器叫做DNS服務器

4.3.1.hosts文件

操作系統在發起對DNS服務器的查詢請求之前,會優先檢查本機的hosts文件。如果這個文件中包含了對當前需要解析的域名的配置,則不再發起對DNS 服務器的請求,直接使用hosts文件中的配置。
文件所在路徑:

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

注意:

  1. 本機的hosts文件配置只能到影響本機的DNS尋址
  2. 只有以管理員權限運行的編輯器纔有權利修改hosts文件

4.4.端囗

計算機本身是一個封閉的環境,就像是一個大樓,如果需要有數據通信往來,必須有門,這個門在術語中就叫端口,每一個端口都有一個編號,每臺計算機只有65536個端口(0-65535)。

一般我們把“佔門”的過程叫做監聽

可以通過在命令行中運行:netstat-an命令監視本機端口使用情況:
在這裏插入圖片描述

參考鏈接:

http默認的端口80
https默認的端口是443

4.5.URL

URL(Uniform Resource Locator),統一資源定位符,通俗點來說就是表示網絡當中某一個網頁的完整訪問地址,它具有一定的格式:
在這裏插入圖片描述
例如:https://zce.me:80/schools/students?id=18&name=zce#photo

host 主機 :zce.me:80
域名(主機名):zce.me
請求路徑:/schools/students
請求參數:id=18&name=zce
錨點值:#photo

五、請求響應流程

在這裏插入圖片描述

  1. 用戶打開瀏覽器
  2. 地址欄輸入我們需要訪問的網站網址(URL)
  3. 瀏覽器通過DNS服務器獲取即將訪問的網站IP地址
  4. 瀏覽器發起一個對這個IP的請求
  5. 服務端接收到這個請求,進行相應的處理
  6. 服務端將處理完的結果返回給客戶端瀏覽器
  7. 瀏覽器將服務端返回的結果呈現到界面上

六、配置Apache

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

6.1.監聽端口

監聽端口可以隨意修改爲任意一個未被其他程序監聽的端口,可以通過設置配置文件httpd.conf中的Listen指令後面的數字修改。
在這裏插入圖片描述
6.2.網站根目錄
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

網站根目錄就是存放我們網站文件的最頂層目錄,通常URL中域名後面的第一個斜線對應(映射)的就是網站根目錄。
默認文檔指的是我們在訪問某一個目錄時(沒有指定具體的文件),默認訪問的文件叫做默認文檔
:動態網站情況會比較特殊,需要單獨考慮,不一定是這個規則。

默認Apache的網站根目錄是安裝目錄中的htdocs文件夾,爲了方便對網站文件的管理,一般我們會將其設置在一個自定義目錄中(如果你不介意其實不修改也無所謂)。
如果需要設置網站根目錄,可以通過修改配置文件httpd.conf中的網站根目錄選項切換。
在這裏插入圖片描述
在這裏插入圖片描述

6.3.默認文檔

當客戶端訪問的是一個目錄而不是具體文件時,服務端默認返回這個目錄下的某個文檔(文件),這個文檔就稱之爲默認文檔

配置文件httpd.conf的280行的DirectoryIndex,默認文檔可以配置多個(有前到後依次去找,找到爲止,如果沒找到任何一個則啓用目錄瀏覽):
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
6.4.虛擬主機
在這裏插入圖片描述
如果一臺機器上只有一個網站的話,沒有任何問題,但是如果想要在一臺機器上部署多個站點,就必須通過配置虛擬主機的方式解決。

由於後期對虛擬主機的配置操作非常常見,所以我們一般將虛擬主機的配置單獨放到一個配置文件中,然後在主配置文件中引入,避免破壞主配置文件中的其他配置。
Include conf/extra/httpd-vhosts.conf配置的作用就將另外一個配置文件引入(使其生效)

具體的操作方式就是在主配置文件httpd.conf的511行取消註釋:
在這裏插入圖片描述
然後找到Apache的虛擬主機配置文件,添加一個如下的虛擬主機配置節點,然後重新啓動Apache。(注意:每次修改完配置文件後,都需要重啓Apache服務器才能生效)
這個文件中有兩個默認的示例配置,可以註釋掉。
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

如果真的要使用site0.iosite1.io這2個域名的話,就只能通過修改hosts文件達到目的,原因很簡單:這個域名不是我們自己的,我們沒有辦法修改這個域名在公網上的DNS。
在這裏插入圖片描述

注意:

  1. 如果使用了虛擬主機,則默認必須全部使用虛擬主機,即之前的默認網站也必須通過虛擬主機方式配置,否則訪問不到。參考:http://skypegnu1.blog.51cto.com/8991766/1532454

  2. 如果虛擬主機的端口使用的不是80,則需要在主配置文件中添加一個對這個端口的監聽:
    在這裏插入圖片描述

七、靜態網站與動態網站

至此,我們已經可以把這些靜態頁面放到服務器上了,客戶端也可以通過域名請求這個網站,但是對於我們來說,Apache 能夠完成的事情過於簡單,無外乎就是找到你請求對應的文件→讀取文件→將文件內容響應給客戶端瀏覽器(文件原封不動的給你)。無法滿足讓網頁內容動起來(隨着數據動態變化)的需求。
於是乎,就有人提出了服務端動態網頁的概念,這種實現這種概念的技術有很多種:JSP、ASP.NET、PHP、Node等等。
這些技術的原理就是:不再將HTML固定寫死,每次用戶請求時,動態執行一段代碼,臨時生成一個用戶想要的HTML頁面。
在這裏插入圖片描述
動態網站指的也就是每次請求時服務端動態生成HTML返回給用戶的這種網站。
這裏我們選擇PHP作爲我們瞭解服務端動態網頁開發的技術方案,注意:我們學習的重心不在PHP,而是瞭解服務端開發,以及某些其他對前端開發有幫助的東西。

7.1 配置PHP支持

PHP文件的擴展名就是.php

我們可以嘗試在剛剛配置的網站中添加一個擴展名爲php的文件,然後到瀏覽器中訪問它。

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

結果出乎意料,並沒有顯示我們想要的Hello PHP,而是將我們的代碼原封不動的返回給瀏覽器了。
在這裏插入圖片描述
原因很簡單:Apache只能處理靜態文件請求,對於後綴名爲.php這種動態文件,它無法執行,所以就當成是一個靜態文件直接返回了。
解決方法:

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

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

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

o在<IfModule mime_module>節點中添加.php擴展名解析支持

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

o默認文檔配置節點<IfModule dir_module>中添加index.php

默認文檔指的是在訪問一個目錄而不是具體文件名時,默認執行的文件名

<IfModule dir_module>
DirectoryIndex index.html index.php
</IfModule>
  • 重啓Apache
    在這裏插入圖片描述

7.2 Apache與PHP

對於很多初學者來說,很容易把Apache和PHP混在一起混爲一談,其實他們兩者各自有各自負責的領域,各自的職責,但是我們在使用PHP做動態網站開發時,兩者就會產生聯繫,具體如下:
在這裏插入圖片描述

你可以理解爲:Apache是一家沒有太多能力的公司,只能處理一些簡單的業務(靜態網站),但是心很大想做更多的事(動態網站),所以就想到了外包,所有額外的業務都需要外包給其他程序,而PHP就是理解爲一個專門能夠處理php業務的外包公司

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章