使用 whistle 替代本地 nginx/webpack 服務

加入鵝廠以後，我發現團隊都在用一款叫作 Whistle 的工具，起初我覺得這只是一款相似 Fiddler/Charles 的普通貨色。然鵝，發現下面這兩種用法以後，我把本身的膝蓋摘下來獻給了製做這款工具的大佬。

若是你還沒用過 whistle，不要緊。只需兩步：

1. 第一步，Node.js 環境下全局安裝 npm i -g whistle 並啓動 whistle w2 start

2. 第二步，給 Chrome 瀏覽器裝個 SwitchyOmega 的插件，添加一個將全部請求轉發到 127.0.0.1:8899 的代理配置。以下圖所示（Bypass List 部分也記得清掉）

環境準備好以後，咱們開始進入今天的姿式，看 whistle 是如何取代本地 hosts 和 web server 的。

一、搭建靜態資源 server

打開 whistle 管理後臺 http://127.0.0.1:8899 ，在左側導航的 Rules 面板寫入一條規則：

# 規則：自定義域名或URL<空格>本地目錄路徑 （如下示例請替換爲本身本地的寫法）
my.demo/bw/ file:///Users/kaiye/Projects/Demo/002-black-white/

 

再用瀏覽器打開 http://my.demo/bw/ 的網址。Bingo！一個自定義域名的靜態資源服務器搭建成功！

是否是比 nginx 配置簡單一丟丟？若是安裝了 whistle 的證書，還能直接支持 HTTPS！

 

二、動態 server 轉發

若是咱們把上例中的本地路徑替換成一個本地服務端口，例如 webpack devServer 的端口。那麼就能夠實現本地帶端口號的 host 配置功能，同時還能告別複雜的 devServer/nginx rewrite 配置：

// webpack.config.js 配置傳統手藝
module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: ''https://other-server.example.com'',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

 

假設本地 webpack 服務端口號爲 8080，whistle 的配置規則示例以下：

# 任意域名綁定到本地任意服務
https://my.demo/ 127.0.0.1:8080
​
# 重寫該域名的後端接口路徑到線上服務地址
https://my.demo/api/ https://backend.example.com/api/
# 或直接轉發到局域網某臺機器的具體端口
https://my.demo/api2/ http://127.0.0.1:3000

 

接下來就能夠打開 https://my.demo/ 像調試線上環境同樣開發本地環境了。你還能夠將 whistle 部署到局域網服務器，用來搭建一個多人協做的測試環境（也就是 nohost 解決方案）。

whistle 是一款免費且強大的抓包工具，除了本文提到的靜態 server 和服務轉發功能之外，還提供了大量內置協議用於支持 request/respond 動態修改與注入、websocket 調試、API mock 等功能，藉助 whistle plugin 插件生態，不只能得到極佳的移動端調試體驗，還能知足各式各樣的調試需求。更多 whistle 介紹，請訪問 whistle 官網。

若是你有關於環境搭建的問題和建議，歡迎留言交流，也能夠關注公衆號「貓哥學前班」的「網絡編程連載系列」。