Ionic APP 熱更新 之 產品發布狀態下的熱更新搭建，去local-dev-addon外掛程式

標籤：server   上傳   XML   net   json格式   注意   cordova   web項目   c項目   

上一篇，我們介紹了在本地開發環境下的ionic項目熱更新測試，

本文，我們將詳細說明如何在去掉cordova-hot-code-push-local-dev-addon外掛程式的情況下，實現熱更新。

 

使用步驟：

1.安裝CLI：npm install -g cordova-hot-code-push-cli

這裡，需要詳細描述一下CLI 提供的各種命令，後面我們將會用到。使用辦法：cordova-hcp <command>，<command>包括：

　　（1）init：為項目初始化參數，建立預設的cordova-hcp.json檔案。

　　（2）build：編譯項目代碼，在www檔案夾下產生chcp.json和chcp.manifest檔案，為部署做準備。

　　（3）server：在本地啟一個伺服器，用於本地的開發與測試，這在前一篇中有過描述。

　　（4）login：建立用於在遠程伺服器上部署專案檔的登入憑據。

　　（5）deploy：上傳專案檔到遠程伺服器。

注意：上述命令必須運行在ionic項目的根目錄。

 

2.安裝外掛程式：ionic cordova plugin add cordova-hot-code-push-plugin

 

3.cordova-hcp init，為項目組建組態模板，會在根目錄下建立cordova-hcp.json檔案

部分配置項可以直接斷行符號跳過，完成後，會在項目的根目錄下建立cordova-hcp.json檔案：

我們可以開啟檔案看一下，其格式如下：

說明：這一步如果大家不理解，也可以先跳過，後面手動建立cordova-hcp.json檔案也是可以的。

關於init命令，詳細可參考：https://github.com/nordnet/cordova-hot-code-push-cli#init-command

 

4.cordova-hcp build，編譯專案檔，並在www檔案夾下產生chcp.json和chcp.manifest檔案

chcp.json：包含應用發布的相關資訊，比如www內容的遠程伺服器位址content_url、www檔案的版本號碼release等等。

chcp.manifest：包含web專案檔的相關資訊，它們的相對路徑和hash值。

熱更新外掛程式通過比對本地該檔案下的對應hash值與伺服器上的檔案的hash值判斷哪些檔案需要更新、哪些檔案需要新增等。

 

 5.由於這幾個步驟中都涉及遠程伺服器的配置，這裡我就在自己的電腦上搭建了一個測試網站，類比遠程伺服器的作用。

我使用的是IIS，大家用其他的web server也可以。實體路徑大家自己選擇，這裡網站對應的目錄是空的，還沒有部署www的內容。

 

 在IIS管理器中是這個樣子的：

這樣我用於測試的遠程伺服器位址就是：http://10.200.223.160:8022

與此同時，在此網站的根目錄下我們建立一個空的www檔案夾，用於後面部署ionic www裡面的內容。這一步內容先不管。完成後啟動網站。

 

6.將上面步驟3和步驟4中涉及遠程伺服器位址的地方，替換為我們自己搭建的伺服器位址，比如：

將http://myserver.com/hotcodepush/www 替換為http://10.200.223.160:8022/www/

回到我們的ionic項目，在config.xml檔案中，我們需要添加以下內容：

代碼部分的修改完成以後，我們直接打包APP即可，用於後面的測試。

ionic cordova build android --prod 。產生安裝包並安裝到手機，不詳述。

 

 7.接下來就是涉及遠程伺服器部署的事情了。假定此時我們對代碼進行了更新，並將最新的編譯結果提交到遠程伺服器，以供用戶端下載。

注意我修改了一下home.html：

接下來的流程就是，不要走錯：

（1）執行ionic build --prod，以將我們修改的代碼，編譯產生最新的www。注意--prod參數，以減小www檔案內容的大小；

（2）執行cordova-hcp build，以產生最新的chcp.json和chcp.manifest檔案；

（3）完成後將www檔案夾裡面的內容，拷貝到我們遠程伺服器的www目錄下即可。GitHub上介紹的是通過cordova-hcp deploy來進行部署，

　　該命令暫時只支援亞馬遜的伺服器，所以我們可以無視此命令，手動部署即可。

 

8.遠程伺服器上的更新部署完畢之後，我們重啟我們的APP，會自動去伺服器上下載更新內容，並且可以看到修改的內容生效。

關於何時載入更新內容，就是前面update參數的設定，包括start、resume、now三種。

實現的效果就是：

      

這樣，關於產品發布狀態（非本地開發環境、不依賴於開發外掛程式）下的Ionic項目熱更新測試就完成了。

 

注意事項：

1.測試過程中，搭建的網站不識別.json格式，請為網站添加MIME類型；

 完成後最好用手機瀏覽器測試一下，以確保設定檔可正常訪問：

 2.代碼產生變動後，務必先用ionic build --prod編譯一下，再通過cordova-hcp build產生最新的設定檔，兩個步驟完成後才拷貝到遠程伺服器部署。

兩個步驟不能漏，也不能反。

3.當上述步驟都沒有問題，APP卻不能實現更新，或者更新出現異常，多半是遠程伺服器上的網站出現了問題，所以先用瀏覽器測試一下遠程伺服器，

是否可正常訪問。通常只要升級目錄沒問題，熱更新就可以正常使用。

 

Ionic APP 熱更新 之 產品發布狀態下的熱更新搭建，去local-dev-addon外掛程式