網頁

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

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

Cordova - Bower components

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

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

失效現場

bower - ETIMEDOUT
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 還原作業,結果是:

Fiddler

噹噹,一片空白!!!

Proxy

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

Visual Studio 2015內建node、npm與bower

Visual Studio 2015 內建 node 相關工具

經過一陣明查暗訪,取得一個非常重要的訊息,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 search jquery

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 是最花時間思考與嘗試出來的答案。問題從自己的手中解決的感覺真好。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。