iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 7
0
Modern Web

前端工程師一起來種一棵後端技能樹吧!系列 第 7

[Day 07] Web Server & Nginx — (1)

接下來想透過兩篇文章聊聊在 web 開發領域中非常重要的 web server,並一併介紹鼎鼎有名的 Nginx Web Server。第一篇會著重在介紹 web server 的基礎概念,第二篇則會介紹當今最流行的 Nginx 開源 web server。

什麼是 web server ?

簡單一句話來說就是

提供 web 相關服務的伺服器。

較有名的 web server 包含下篇要介紹的 Nginx 與 Apache。

舉個例子來說,在電腦主機上執行 web server,它可以幫主機開一個 80 port,此時別人就能透過該電腦主機的 IP 與它建立連線。

而講到 web server,好像就不能不講與它對應的 web client,例如我們每天使用的瀏覽器(Chrome, Firefox)。若我們今天想要造訪一個網站,client 會發起一些請求(request)至 server,告訴 server 我們想要造訪這個網頁,希望它可以傳送對應的資源給我們,而 server 接到請求後,則會將帶有該網站資源的回應(response)回傳給 client。

這也就是我們再熟悉不過的 client-server 架構。

問:程式語言不是也可以起一個 web server 嗎?

像我熟悉的 Node.js、Golang、Python,都可以透過程式直接跑一個 web server 起來

// ExpressJS 範例
const app = express();

app.listen(3000, () => console.log('Server is listening on 3000...') });

其實透過 Node.js Golang 這類程式語言起的 Web Server 通常會被稱為 Application Server,而 Nginx、Apache 一般來說才會被稱為 Web Server。

那 Application Server 跟 Web Server 的差異又為何呢?

  • Web Server:如 Nginx、Apache,只能拿來處理靜態資源,負載平衡、代理,所謂動態的資源,是指會把需求轉發到程式語言起的 Application Server,由Application Server 處理完後,再丟 response 回去,由 Web Server 進行回應,最後才回到 Client 端。
  • Application Server:就是可以用程式語言建立出的 Server,且可以靜態跟動態解析。

聽起來 Application Server 可以動態與靜態解析,而一般 Web Server 只能靜態解析,那我們還需要 Web Server 幹嘛?

那假設我們要在主機開啟不止一個網站服務呢?你可以開啟很多 port 沒錯,但是除了 localhost 以外,你有看過哪個網站有在網址帶上阜號的嗎?除了難記以外,資安風險也是一大問題!這時你會需要 web server 的反向代理功能,根據不同域名轉發到 Application Server 的不同 port 上去處理。

除了反向代理,Web Server 提供的另外一個主要功能則是負載平衡(簡單來說就是在高流量的狀況下,只靠一個 Application Server 是肯定會炸掉的,所以需要開起多個 Application Server 來分擔流量,負載平衡就是負責 request 的分發,決定 request 要被分到哪一個 Application Server 處理)。

另外 Nginx 與 Apache 等 Web Server 處理靜態資源的能力是遠遠高於 Application Server 的,在現今 web 前後端分離架構下,要處理的靜態資源變的非常多,這就適合 Nginx 與 Apache 發揮啦。

正向代理與反向代理

講解這兩個概念之前,我們得先在心中描繪出一個圖:

一個 Client ,一個 Server,中間夾著一個 proxy。

其實 proxy 的定義很廣,能做的事非常多,像是前陣子的 side-project 為了處理 API CORS 的問題,也自己寫了一個 proxy server,之後也會再將 proxy 的概念抽出來介紹。

github repo

在上個段落有提到反向代理,同樣也是 web server 重要的觀念,當然得好好介紹一番,有反向代理理所當然也會有正向代理啦,那它們分別是代表什麼意思呢?

正向代理:

生活舉例(真實發生QQ):老爸(client)因為之前欠銀行錢沒有還,所以沒辦法再跟銀行(server)貸款,但是急需用錢呀,於是跟我老姐(proxy)借了身份來貸款,因此銀行只知道它把錢借給了信用紀錄良好的我老姐,而不知道拿到錢的事實上是之前沒還錢的老爸 QQ

技術術語:Client 端發送一個 request 先連到proxy server,proxy server 幫我轉發到我想要連到的網站,這時那個網站收到的request,他只知道請求過來的身分是 proxy server,而不知道真實的 client 的身分。

反向代理:

既然是反向那概念就是正向代理的相反了。

生活舉例:Dcard 的網站或 App 每天都會有使用者回報服務的異常與問題,而使用者只知道他跟 Dcard 內部反映問題了,卻不知道是 Dcard 的哪位員工看到了他的回應並去做處理,而使用者實際上也不在乎是誰看到他的訊息的,只要問題有順利解決就好。

技術術語:Client 端發送一個 request 到我想要連的網站,這個網站背後可能就會有好幾台的 Server 來為我們服務(ex: 負載平衡),為了應付高流量的狀況,會將請求分配到不同的 Server,而 Client 根本不會知道具體到底是哪一台 Server,而 Client 也不需要知道,Client 只需要知道反向代理 Server是誰就好。

一句話總結兩種 Proxy:

正向代理隐藏真實 Client,反向代理隱藏真實 Server

小結

這篇文章介紹了 Web Server 基本的概念,也介紹了 Web Server 與Application Server 的不同與各自的應用場景,也用生活例子解釋正反向代理的概念,下一篇文章則會介紹有名的 Nginx 與使用範例。

medium 版本

https://medium.com/@oldmo860617/web-server-nginx-1-cf5188459108

團隊成員系列文

想盡辦法當好一個Junior Backend Developer
用舒服的姿勢開發 Python Project


上一篇
[Day 06] Message Queue - (3) 程式範例
下一篇
[Day 08] Web Server & Nginx — (2)
系列文
前端工程師一起來種一棵後端技能樹吧!30

尚未有邦友留言

立即登入留言