使用 express 輕鬆實現反向代理伺服器

hiyangguo發表於2019-02-16
Express伺服器

遇到的問題

開發的時候遇到的一個問題，就是後臺API和前端頁面分開開發，但是開發的時候並不想在本地搭建後端環境，因為特別麻煩!特別麻煩!特別麻煩!比如說要配置執行環境、裝資料庫還有伺服器。亂七八糟，有時候光是弄環境就要弄一天。可是如果不配置又沒辦法開發。最主要的是請求後端API的時候會遇到跨域問題。最簡單的方法當然是後端幫忙配一個CORS。但是如果後端沒辦法配合的話，可能就比較麻煩了。這時候可以使用反向代理進行開發。

正向代理與反向代理

首先科普一下代理，代理分為正向代理和反向代理

  • 正向代理

正向代理，意思是一個位於客戶端和原始伺服器 (origin server) 之間的伺服器，為了從原始伺服器取得內容，客戶端向代理髮送一個請求並指定目標 (原始伺服器)，然後代理向原始伺服器轉交請求並將獲得的內容返回給客戶端。客戶端才能使用正向代理。
–摘自百度百科

  • 反向代理

反向代理（Reverse Proxy）方式是指以代理伺服器來接受 internet 上的連線請求，然後將請求轉發給內部網路上的伺服器，並將從伺服器上得到的結果返回給 internet 上請求連線的客戶端，此時代理伺服器對外就表現為一個反向代理伺服器。
–摘自百度百科

兩者的主要區別在於代理的物件不一樣： 正向代理代理的物件是客戶端，反向代理代理的物件是服務端。
而我們遇到的問題就是需要使用反向代理解決。

開始擼程式碼

說到反向代理第一反應肯定是Nginx。確實Nginx做反代確實很好，但是說實話，沒必要特意為了做個API的代理裝個Nginx。而且還要去學習Nginx的配置。
另外，可能會想到webpack，當然如果你使用了webpack，直接就可以使用webpack-dev-server了。
但如果你手頭上接手了一個老專案就比較尷尬了。下面進入正題使用express做開發代理伺服器。

首先安裝express、http-proxy-middleware和connect-timeout（此模組用於處理超時）:

npm install --save-dev express http-proxy-middleware connect-timeout
## 如有問題，則可以嘗試使用下面的程式碼進行安裝
npm install --save-dev express@4.16.2 http-proxy-middleware@0.17.4 connect-timeout@1.9.0

express是基於 Node.js 平臺，快速、開放、極簡的 web 開發框架。
http-proxy-middleware 是專門用於 http 代理的一個 node 中介軟體，適用於connect,express, browser-sync 等等，由熱門的http-proxy 驅動。

之後新建一個proxy-server.js檔案。

const express = require(`express`);
const timeout = require(`connect-timeout`);
const proxy = require(`http-proxy-middleware`);
const app = express();

// 這裡從環境變數讀取配置，方便命令列啟動
// HOST 指目標地址
// PORT 服務埠
const { HOST = `http://10.10.0.21:9080`, PORT = `3300` } = process.env;

// 超時時間
const TIME_OUT = 30 * 1e3;

// 設定埠
app.set(`port`, PORT);

// 設定超時 返回超時響應
app.use(timeout(TIME_OUT));
app.use((req, res, next) => {
  if (!req.timedout) next();
});

// 靜態頁面
// 這裡一般設定你的靜態資源路徑
app.use(`/`, express.static(`static`));

// 反向代理（這裡把需要進行反代的路徑配置到這裡即可）
// eg:將/api/test 代理到 ${HOST}/api/test
app.use(proxy(`/api/test`, { target: HOST }));

// 監聽埠
app.listen(app.get(`port`), () => {
  console.log(`server running @${app.get(`port`)}`);
});

啟動

node proxy-server.js

然後再瀏覽器中開啟http://localhost:3300即可

動態設定埠和反向代理地址

HOST=http://10.0.1.10:8081 PORT=3301 node proxy-server.js

此時則需要在http://localhost:3301進行訪問。
至此，一個簡單可用的開發環境就搞定了。

理論介紹參考:
反向代理為何叫反向代理？
正向代理與反向代理的淺解

相關文章