誰說前端需要懂 Nginx 了？

vellengs發表於2018-06-22
前端Nginx

--讀《誰說前端不需要懂-Nginx反向代理與負載均衡》有感

讀了上文發現內容雖然還是挺好的，但看完，為啥要懂nginx呀，負載均衡和前端哪裡有什麼半毛錢關係了，沒說清楚呀。

當然這個面向前端做個科普文讓大家多知道一項只是還是不錯的，文章拉到最後面看了下作者的使用場景舉例說起個 host 給讓產品走查。 這不就是起個webserver 容器麼，和反向代理麼？

這篇內容很熱，結合最近聊天群裡總是有人問起，我想前端還有很多人想知道這方面知識的，所以在這裡也科普下，常用的代理方式有哪些。

本文廣受朋友喜愛，說明對很多朋友還是有幫助的，另外不少網友對本文的標題意見很大，本文的標題針對引文標題來說，主旨為的是強調有更合適的方法做更正確的事情，並不阻止大家學習更多知識

招式一、 使用 http-server 模組進行代理

熟悉 nodejs 的朋友應該知道有個非常好和強大的工具模組 http-server 這是一枚小火箭能幫助你直衝雲霄，使用方式如下：

首先需要安裝 nodejs （對於nodejs 合格的前端應該都安裝上了吧？這裡就不復述了）。

安裝全域性模組

 npm install http-server -g
複製程式碼

然後到你需要執行展示的 html 資源目錄執行

http-server -P http://www.your-backend.com/api
複製程式碼

http://www.your-backend.com/api 是你後端反向代理的介面地址，你需要修改成你自己的。

然後你就可以使用 http://localhost:8080 進行訪問了（如果 8080 埠不被佔用掉的話，若佔用了你可以 -p 指定其他埠 ），是不是超級 easy? 更多引數可以查詢官方文件 http-server。

此工具的亮點在於零配置，隨時隨地啟動 給小夥伴走查、移動端除錯不是三秒搞定麼，難道一定需要那麼麻煩去寫個nginx 配置？

招式二、使用 webpack 配置代理

webpack 對於前端來說是個強大的工具, 除了能夠幫助你打包和啟動除錯伺服器外, 代理的功能也值得你瞭解下。 慣例上官網資料文件地址

最簡方式:

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};
複製程式碼

上述配置將自動把 /api 這一地址的訪問轉請求到 http://localhost:3000 從而起到了代理的作用。

如果你的規則需要去掉 api 字首，你可以使用重寫地址的方式。

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};
複製程式碼

你可能還遇到 https 的安全問題觸發未驗證的證書錯誤, 則你可以簡單的加上 secure: false 來處理

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};
複製程式碼

有時你不想代理所有的請求。可以基於一個函式的返回值繞過代理。 在函式中你可以訪問請求體、響應體和代理選項。必須返回 false 或路徑，來跳過代理請求。 例如：對於瀏覽器請求，你想要提供一個 HTML 頁面，但是對於 API 請求則保持代理。你可以這樣做：

proxy: {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  }
}
複製程式碼

多個路徑的代理

proxy: [{
  context: ["/auth", "/api"],
  target: "http://localhost:3000",
}]
複製程式碼

總之 webpack 提供了多種靈活的方式, 相信大多時候都能滿足到你到要求。

此方式最合適專案已經使 webpack 工程專案，隨專案啟動自動開啟

招式三、使用 nodejs 的 node-http-proxy 模組來處理

node-http-proxy 提供了一個可以程式設計模式的代理環境，如果你有很特殊的需求如session、cookie 已繫結的域處理成其他的域什麼，或是內容還要轉換處理等，你可以用這個方式來處理複雜的 hacker.

如增加特殊請求頭；

var http = require('http'),
    httpProxy = require('http-proxy');
 
var proxy = httpProxy.createProxyServer({});

 
proxy.on('proxyReq', function(proxyReq, req, res, options) {
  proxyReq.setHeader('X-Special-Proxy-Header', 'foobar');
});

var server = http.createServer(function(req, res) {
  // You can define here your custom logic to handle the request
  // and then proxy the request.
  proxy.web(req, res, {
    target: 'http://127.0.0.1:5060'
  });
});

console.log("listening on port 5050")
server.listen(5050);
複製程式碼

更多介紹看官網文件

招式四、使用框架自帶代理方式如 angular 的 proxy.

angular 的 proxy 寫法形式和 webpack 基本一樣, 你需要一份如下的配置檔案 proxy.conf.json 我的開源專案 typerx採用的就是這種方式

{
    "/api": {
        "target": "http://localhost:5400/",
        "secure": false
    },
    "/user": {
        "target": "http://localhost:5400/",
        "secure": false
    },
    "/uploads": {
        "target": "http://localhost:5400/",
        "secure": false
    }
}
複製程式碼

配置完成之後使用 proxy-config 引數指定 proxy.conf.json 即可呼叫代理配置

 ng serve --proxy-config proxy.conf.json
複製程式碼

其他更多方式 , 如果你看完更多方式是不是覺得和 webpack 是一樣的呢，實際上他就是 webpack 哈？

此方式是工程化後的正確使用姿勢

招式五、實際上這個不是代理，但是也能解決你的跨域問題。

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/your/path/
複製程式碼

還有個方式當然就是 nginx 啦

你可以繼續瞭解他 誰說前端不需要懂-Nginx反向代理與負載均衡

相關文章