Cordova專案:內網Bower自動還原失效記

我們的一個 Cordova 專案，內容有使用到 Bower 來進行套件管理，設計者提醒我們，簽出之後需要申請對外網路，透過外網才能正常還原下載所有 Bower 管理的套件。原先一直以為是資安方面的考量，而且也能透過外網去進行還原，再回到內網繼續工作，就沒多想兩分鐘。但老天爺不放你走，怎麼可能走得了。

近日，在公司 VM 內幫同事設定開發環境，就碰到此一難題，Bower自動還原失效，專案根本無法建置與執行，VM 又不是筆電，沒法子換上臨時外網去進行 Bower 還原，怎麼辦呢？

失效現場

PATH=.\node_modules\.bin;C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External;%PATH%;C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\git
"C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\Bower.cmd" install --force-latest
bower                            retry Request to https://bower.herokuapp.com/packages/jQuery failed with ETIMEDOUT, retrying in 1.8s
bower                            retry Request to https://bower.herokuapp.com/packages/angular failed with ETIMEDOUT, retrying in 1.1s
bower                            retry Request to https://bower.herokuapp.com/packages/ionic failed with ETIMEDOUT, retrying in 1.2s
bower                            retry Request to https://bower.herokuapp.com/packages/angular failed with ETIMEDOUT, retrying in 2.9s
bower                            retry Request to https://bower.herokuapp.com/packages/ionic failed with ETIMEDOUT, retrying in 2.1s
bower                            retry Request to https://bower.herokuapp.com/packages/jQuery failed with ETIMEDOUT, retrying in 3.9s

從提示訊息得到，目前連線至https://bower.herokuapp.com/失敗，Bower 本身還有重試(retry)機制，相當不錯。但怎麼重試就是連不上。

試了一段時間，實在沒辦法，試著將問題網址反應給網管人員，但網管人員迅速查詢並說明，此網址未被封鎖的。

Fiddler

網管人員提供一個方案是，我在 VM 進行 Bower 還原工作，他直接幫我做監控，看是不是https://bower.herokuapp.com/背後還有用什麼服務是誤封鎖的。這給了我一個 Idea，在開發 WebAPI 常用的測試工具 Fiddler，其實本身也是一套優秀的 HTTP 封包監控工具。當下決定試著自己解決問題。

打開 Fiddler，重啟 Bower 還原作業，結果是：

噹噹，一片空白！！！

Proxy

在公司內網所有對外網路都必須經過 Proxy Server，也就是說 Bower 的請求沒往 Proxy Server 送，以致於 Bower 還原失敗。想想也對，IE 的 Proxy 設定也我手動設上去的，Bower 並不會知道 IE 的 Proxy 設定，這樣造成 Fiddler 空白與無法還原是正常的結果。

Visual Studio 2015內建node、npm與bower

經過一陣明查暗訪，取得一個非常重要的訊息，Visual Studio 2015 在呼叫 Bower 還原，呼叫是的C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\ (Windows 10) 或 C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External (VM, 2008 R2 SP1)(其實上面的Log一開始有說明了，但我到很後面才看到 @_@)下的 Bower.cmd 內建版本。會查訪的原因很簡單，我自行下載的 node 從沒去下載過 Bower 套件(這是一台新VM)，VS2015 內的 npm 運作機制引起我好奇。

VM 直接安裝 Visual Studio 2015 Update 2，Windows 10 是經過升級的，不知道是平台差異，還是 Update 2 換路徑了。

也就是說，我們必須指定 npm 的 proxy 相關參數，那麼當 node 執行 Bower 作業時，才會知道要從 Proxy Server 出去。首先要建立(或修改).bowerrc檔案，除了指定相關參數，還要下一些指令的方式解決。

.bowerrc

.bowerrc 檔案的內容：

{
    "proxy":"http://proxy.mycompany.com:80/",
    "https-proxy":"http://proxy.mycompany.com:80/"
}

要注意的是存放路徑，可以是 C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\ (Windows 10) 或 C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External 下面，也可以放在 C:\Users\{UserName} 之下。之後你可以試著下 bower search jquery，應該會看到不一樣的錯誤訊息。

進行以下指令前，還是建議安裝上最新版的 nodejs 與 git。

npm config - proxy

請先關閉 Visual Studio，並開啟 cmd.exe 並切換至 C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\ 目鍵下，輸入下列指令：

npm config set proxy http://proxy.mycompany.com:80/
npm config set https-proxy http://proxy.mycompany.com:80/

npm config 會在 C:\Users\{UserName} 目錄下新增 .npmrc 檔案，內容一行一行的設定：

proxy=http://proxy.mycompany.com:80
https-proxy=http://proxy.mycompany.com:80

這會讓 npm 相關套件就會知道要透過 Proxy Server 上網。Bower 還原的工作，也能使用指令來進行，切換至 Cordova 專案目錄後，到上面的 Log 複製 "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\Bower.cmd" install --force-latest 指令貼上執行即可。這樣的好處是，Visual Studio 裡的還原是無法中斷，直接 Bower 重試多次之後確認失敗為止。使用指令，一看苗頭不對，可以立即按下 Ctrl+C 來中斷。

git - proxy

Bower 找到套件後，會去 GitHub 進行下載安裝的動作，而 git 指令一樣會碰到 Proxy Server 的問題，我們也要為 git 設定好 Proxy 設置。

git config --global http.proxy http://proxy.mycompany.com:80/
git config --global https.proxy http://proxy.mycompany.com:80/

指定會在會在 C:\Users\{UserName} 目錄下新增 .gitconfig 檔案，內容：

[http]
 proxy = http://proxy.mycompany.com:80/
[https]
 proxy = http://proxy.mycompany.com:80/

小結

還好沒有依賴網管人員的幫忙，不然人家好心幫忙，但你卻送一片空白的鬼打牆，不知道的人還以為你是搗蛋鬼。而.bowerrc、npm config 與 git --config 是最花時間思考與嘗試出來的答案。問題從自己的手中解決的感覺真好。

KingKong Bruce記事

網頁