【前端詞典】和媳婦講代理後的意外收穫

小生方勤發表於2019-01-03

前言

這篇文章之前是寫完了,不過由於我妻子看過之後,對這篇文章的評價是:寫的不錯,語句是通順的,排版是可以的,但代理是什麼還是不清楚?所以我感覺之前寫的是失敗的,所以才有了現在這一篇。

接下來我會嘗試面向大眾,來解釋“代理”的概念。

概念例項化

在講代理的概念之前我先講個類比。也是我向大人解釋的過程。

【前端詞典】和媳婦講代理後的意外收穫
還好我反應機敏,要不然這個月的零花錢就要替我擋一刀了。可是我該怎麼解釋呢?還要讓沒有程式語言基礎的人也聽懂,傷腦筋啊!

在沒有思緒的時候,她突然問我晚上吃了沒有?這不就是很好的例子嗎?

【前端詞典】和媳婦講代理後的意外收穫
【前端詞典】和媳婦講代理後的意外收穫
【前端詞典】和媳婦講代理後的意外收穫
【前端詞典】和媳婦講代理後的意外收穫
【前端詞典】和媳婦講代理後的意外收穫
【前端詞典】和媳婦講代理後的意外收穫
【前端詞典】和媳婦講代理後的意外收穫
【前端詞典】和媳婦講代理後的意外收穫
解釋了這麼久,不知道是真的懂了,還是因為太困了。不過我有錢吃肉了。

接下來我們正經的說說“正向代理”和“反向代理”

概念

首先附上正兒八經的說明圖,先有一個整體的理解。

【前端詞典】和媳婦講代理後的意外收穫

然後很官方的解釋它們的概念:

正向代理( Forward Proxy ):是指是一個位於客戶端和原始伺服器之間的伺服器,為了從原始伺服器取得內容, 客戶端向代理髮送一個請求並指定目標(原始伺服器),然後代理向原始伺服器轉交請求並將獲得的內容返回給客戶端。客戶端才能使用正向代理。

反向代理( Reverse Proxy ):是指以代理伺服器來接受 Internet 上的連線請求,然後將請求轉發給內部網路上的伺服器,並將從伺服器上得到的結果返回給 Internet 上請求連線的客戶端,此時代理伺服器對外就表現為一個反向代理伺服器。

接下來我提煉一下各自的特點。

特點

正向代理

  1. 代理客戶;
  2. 隱藏真實的客戶,為客戶端收發請求,使真實客戶端對伺服器不可見;
  3. 一個區域網內的所有使用者可能被一臺伺服器做了正向代理,由該臺伺服器負責 HTTP 請求;
  4. 意味著同伺服器做通訊的是正向代理伺服器;

反向代理

  1. 代理伺服器;
  2. 隱藏了真實的伺服器,為伺服器收發請求,使真實伺服器對客戶端不可見;
  3. 負載均衡伺服器,將使用者的請求分發到空閒的伺服器上;
  4. 意味著使用者和負載均衡伺服器直接通訊,即使用者解析伺服器域名時得到的是負載均衡伺服器的 IP ;

共同點

  1. 都是做為伺服器和客戶端的中間層
  2. 都可以加強內網的安全性,阻止 web 攻擊
  3. 都可以做快取機制

說了這麼多,現在說說代理在工作中的時機應用場景吧。

實際應用

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 中就可以使用 proxyTable 這個屬性進行相關的配置來解決跨域問題帶來的煩惱。配置如下:

...
proxyTable: {
    '/weixin': {
        target: 'http://192.168.48.11:8100/', // 介面的域名 
        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 引數來控制。

以上。

前端詞典系列

《前端詞典》這個系列會持續更新,每一期我都會講一個出現頻率較高的知識點。希望大家在閱讀的過程當中可以斧正文中出現不嚴謹或是錯誤的地方,本人將不勝感激;若通過本系列而有所得,本人亦將不勝欣喜。

如果你覺得我的文章寫的還不錯,可以關注我的微信公眾號,公眾號裡會提前劇透呦。

【前端詞典】和媳婦講代理後的意外收穫

你也可以新增我的微信 wqhhsd, 歡迎交流。

傳送門

  1. 【前端詞典】滾動穿透問題的解決方案

相關文章