前言
現在看到的這篇文章是修改後的第三個版本。
由於我家老闆看過之後,對這篇文章的評價是:寫的不錯,語句是通順的,排版是可以的,但反向代理是什麼還是不清楚?所以我就想嘗試著向非 IT 工作者解釋“正向代理”和“反向代理”。
接下來我會先嚐試面向大眾,來解釋“代理”的概念。在從專業的角度解釋“正向代理”和“反向代理”。
概念例項化
在講代理的概念之前我先講個類比。也是我向我家老闆解釋的過程。
還好我反應機敏,要不然這個月的零花錢就要替我擋一刀了。可是我該怎麼解釋呢?還要讓沒有程式語言基礎的人也聽懂,傷腦筋啊!在沒有思緒的時候,她突然問我晚上吃了沒有?這不就是很好的例子嗎?
解釋了這麼久,不知道是真的懂了,還是因為太困了。不過我有錢吃肉了。
接下來我們就認真的看看“正向代理”和“反向代理”
概念
首先看看說明圖,先有一個整體的理解。
正向代理( Forward Proxy ):
是指是一個位於客戶端和原始伺服器之間的伺服器,為了從原始伺服器取得內容, 客戶端向代理髮送一個請求並指定目標(原始伺服器),然後代理向原始伺服器轉交請求並將獲得的內容返回給客戶端。客戶端才能使用正向代理。
反向代理( Reverse Proxy ):
是指以代理伺服器來接受 Internet 上的連線請求,然後將請求轉發給內部網路上的伺服器,並將從伺服器上得到的結果返回給 Internet 上請求連線的客戶端,此時代理伺服器對外就表現為一個反向代理伺服器。
接下來我提煉一下各自的特點。
特點
正向代理
- 代理客戶;
- 隱藏真實的客戶,為客戶端收發請求,使真實客戶端對伺服器不可見;
- 一個區域網內的所有使用者可能被一臺伺服器做了正向代理,由該臺伺服器負責 HTTP 請求;
- 意味著同伺服器做通訊的是正向代理伺服器;
反向代理
- 代理伺服器;
- 隱藏了真實的伺服器,為伺服器收發請求,使真實伺服器對客戶端不可見;
- 負載均衡伺服器,將使用者的請求分發到空閒的伺服器上;
- 意味著使用者和負載均衡伺服器直接通訊,即使用者解析伺服器域名時得到的是負載均衡伺服器的 IP ;
共同點
- 都是做為伺服器和客戶端的中間層
- 都可以加強內網的安全性,阻止 web 攻擊
- 都可以做快取機制,提高訪問速度
區別
- 正向代理其實是客戶端的代理,反向代理則是伺服器的代理。
- 正向代理中,伺服器並不知道真正的客戶端到底是誰;而在反向代理中,客戶端也不知道真正的伺服器是誰。
- 作用不同。正向代理主要是用來解決訪問限制問題;而反向代理則是提供負載均衡、安全防護等作用。
說了這麼多,現在說說代理在工作中的時機應用場景吧。
實際應用
翻牆軟體 —— 正向代理
我們知道在國內用訪問 www.google.com
是無法訪問的,因為正常情況下是會被 GFW 限制訪問的。
可是你還是想使用 google 來科學上網的話,這個時候我們就需要一些代理(翻牆軟體)來幫我們去請求 www.google.com
,代理再把響應結果返回給你。
GFW 的作用主要是用於分析和過濾中國境內外網路間的互相訪問。也就是說,他不僅能限制國內網民訪問境外的某些站點,也能限制國外使用者訪問國內的站點。 我們通常說的“被牆”,就是指訪問被 GFW 所限制。而”翻牆“,顧名思義,則是突破 GFW 的限制。
Nginx 伺服器 —— 反向代理
Nginx 伺服器的功能有很多,諸如反向代理、負載均衡、靜態資源伺服器等。
客戶端本來可以直接通過 HTTP 協議訪問伺服器,不過我們可以在中間加上一個 Nginx 伺服器,客戶端請求 Nginx 伺服器,Nginx 伺服器請求應用伺服器,然後將結果返回給客戶端,此時 Nginx 伺服器就是反向代理伺服器。
在虛擬主機的配置中配置反向代理
# 虛擬主機的配置
server {
listen 8080; # 監聽的埠
server_name 192.168.1.1; # 配置訪問域名
root /data/toor; # 站點根目錄
error_page 502 404 /page/404.html; # 錯誤頁面
location ^~ /api/ { # 使用 /api/ 代理 proxy_pass 的值
proxy_pass http://192.168.20.1:8080; # 被代理的應用伺服器 HTTP 地址
}
}
複製程式碼
以上簡單的配置就可以實現反向代理的功能。
當然反向代理也可以處理跨域問題。
對於使用 vue-cli 搭建的工程而言,我們知道 vue-cli 採用 http-proxy-middleware 外掛來進行代理伺服器等各項配置。
所以我們可以利用 proxyTable,設定地址對映表。即使用 proxyTable
這個屬性進行相關的配置來解決跨域問題帶來的煩惱。配置如下:
...
proxyTable: {
'/weixin': {
target: 'http://192.168.20.1:8080/', // 介面的域名
secure: false, // 如果是 https 介面,需要配置這個引數
changeOrigin: true, // 如果介面跨域,需要進行這個引數配置
pathRewrite: {
'^/weixin': ''
}
},
},
...
複製程式碼
負載均衡的配置
# upstream 表示負載伺服器池,定義名字為 my
upstream my {
server 192.168.2.1:8080 weight=1 max_fails=2 fail_timeout=30s;
server 192.168.2.2:8080 weight=1 max_fails=2 fail_timeout=30s;
server 192.168.2.3:8080 weight=1 max_fails=2 fail_timeout=30s;
server 192.168.2.4:8080 weight=1 max_fails=2 fail_timeout=30s;
# 即在 30s 內嘗試 2 次失敗即認為主機不可用
}
複製程式碼
負載均衡即將 請求/資料 輪詢分攤到多個伺服器上執行,負載均衡的關鍵在於 均勻。
也可以通過 ip-hash
的方式,根據客戶端 ip 地址的 hash 值將請求分配給固定的某一個伺服器處理。
另外,伺服器的硬體配置可能不同,配置好的伺服器可以處理更多的請求,這時可以通過 weight
引數來控制。
Vue 相關文章輸出計劃
最近總有朋友問我 Vue 相關的問題,因此接下來我會輸出 9 篇 Vue 相關的文章,希望對大家有一定的幫助。我會保持在 7 到 10 天更新一篇。
- 【前端詞典】Vuex 注入 Vue 生命週期的過程
- 【前端詞典】淺析 Vue 響應式原理
- 【前端詞典】新老 VNode 進行 patch 的過程
- 【前端詞典】如何開發功能元件並上傳 npm
- 【前端詞典】從這幾個方面優化你的 Vue 專案
- 【前端詞典】從 Vue-Router 設計講前端路由發展
- 【前端詞典】在專案中如何正確的使用 Webpack
- 【前端詞典】Vue 服務端渲染
- 【前端詞典】Axios 與 Fetch 該如何選擇
建議你關注我的公眾號,第一時間就可以接收最新的文章。
如果你想加群交流,也可以新增有點智慧的機器人,自動拉你進群: