React Native應用部署/熱更新-CodePush最新整合總結(新)

React Native的出現為移動開發領域帶來了兩大革命性的創新： 整合了移動端APP的開發，不僅縮短了APP的開發時間，也提高了APP的開發效率。 為移動APP動態更新提供了基礎。

本文將向大家分享React Natvie應用部署/動態更新方面的內容。

React Native支援大家用React Native技術開發APP，並打包產生一個APP。在動態更新方面React Native只是提供了動態更新的基礎，對將應用部署到哪裡，如何進行動態更新並沒有支援的那麼完善。好在微軟開發了CodePush，填補React Native 應用在動態更新方面的空白。CodePush 是微軟提供的一套用於熱更新 React Native 和 Cordova 應用的服務。下面將向大家分享如何使用CodePush即時更新你的應用，後期會分享不採用CodePush，如何自己去實現React Native應用熱更新。 CodePush簡介

CodePush 是微軟提供的一套用於熱更新 React Native 和 Cordova 應用的服務。
CodePush 是提供給 React Native 和 Cordova 開發人員直接部署行動裝置 App更新給使用者裝置的雲端服務。CodePush 作為一個中央倉庫，開發人員可以推送更新 (JS, HTML, CSS and images)，應用可以從用戶端 SDK 裡面查詢更新。CodePush 可以讓應用有更多的可確定性，也可以讓你直接接觸使用者群。在修複一些小問題和添加新特性的時候，不需要經過二進位打包，可以直接推送代碼進行即時更新。

CodePush 可以進行即時的推送代碼更新： 直接對使用者部署代碼更新 管理 Alpha，Beta 和生產環境應用 支援 React Native 和 Cordova 支援JavaScript 檔案與圖片資源的更新

CodePush開源了react-native版本，react-native-code-push託管在GitHub上。 安裝與註冊CodePush

使用CodePush之前首先要安裝CodePush用戶端。本文以OSX 10.11.5作為平台進行示範。 安裝 CodePush CLI

管理 CodePush 帳號需要通過 NodeJS-based CLI。
只需要在終端輸入 npm install -g code-push-cli，就可以安裝了。
安裝完畢後，輸入 code-push -v查看版本，如看到版本代表成功。
目前我的版本是 1.12.1-beta

PS.
npm為NodeJS的包管理器，如果你沒安裝NodeJS請先安裝。 建立一個CodePush 帳號

在終端輸入code-push register，會開啟如下註冊頁面讓你選擇授權帳號。

授權通過之後，CodePush會告訴你“access key”，複製此key到終端即可完成註冊。
然後終端輸入code-push login進行登陸，登陸成功後，你的session檔案將會寫在 /Users/你的使用者名稱/.code-push.config。

PS.相關命令 code-push login 登陸 code-push loout 登出 code-push access-key ls 列出登陸的token code-push access-key rm <accessKye> 刪除某個 access-key 在CodePush伺服器註冊app

為了讓CodePush伺服器知道你的app，我們需要向它註冊app： 在終端輸入code-push app add <appName>即可完成註冊。

註冊完成之後會返回一套deployment key，該key在後面步驟中會用到。

心得：如果你的應用分為Android和iOS版，那麼在向CodePush註冊應用的時候需要註冊兩個App擷取兩套deployment key，如：

code-push app add MyApp-Androidcode-push app add MyApp-iOS

PS.相關命令 code-push app add 在帳號裡面添加一個新的app code-push app remove 或者 rm 在帳號裡移除一個app code-push app rename 重新命名一個存在app code-push app list 或則 ls 列出帳號下面的所有app code-push app transfer 把app的所有權轉移到另外一個帳號 整合CodePush SDK Android

下面我們通過如下步驟在Android項目中整合CodePush。
第一步：在項目中安裝 react-native-code-push外掛程式，終端進入你的項目根目錄然後運行
npm install --save react-native-code-push

第二步：在Android project中安裝外掛程式。
CodePush提供了兩種方式：RNPM 和 Manual，本次示範所使用的是RNPM。
運行npm i -g rnpm，來安裝RNPM。

在React Native v0.27及以後版本RNPM已經被整合到了 React Native CL中，就不需要再進行安裝了。

第三步： 運行 rnpm link react-native-code-push。這條命令將會自動幫我們在anroid檔案中添加好設定。

在終端運行此命令之後，終端會提示讓你輸入deployment key，這是你只需將你的deployment Staging key輸入進去即可，如果不輸入則直接單擊enter跳過即可。

第四步： 在 android/app/build.gradle檔案裡面添如下代碼：

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"  

然後在/android/settings.gradle中添加如下代碼:

include ':react-native-code-push'project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

第五步: 運行 code-push deployment -k ls <appName>擷取 部署秘鑰。預設的部署名是 staging，所以 部署秘鑰（deployment key ） 就是 staging。
第六步： 添加配置。當APP啟動時我們需要讓app向CodePush諮詢JS bundle的所在位置，這樣CodePush就可以控製版本。更新 MainApplication.java檔案：

public class MainApplication extends Application implements ReactApplication {  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {    @Override    protected boolean getUseDeveloperSupport() {      return BuildConfig.DEBUG;    }    @Override    protected String getJSBundleFile() {      return CodePush.getJSBundleFile();    }    @Override    protected List<ReactPackage> getPackages() {      // 3. Instantiate an instance of the CodePush runtime and add it to the list of      // existing packages, specifying the right deployment key. If you don't already      // have it, you can run "code-push deployment ls <appName> -k" to retrieve your key.      return Arrays.<ReactPackage>asList(        new MainReactPackage(),        new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)      );    }  };  @Override  public ReactNativeHost getReactNativeHost() {      return mReactNativeHost;  }}

關於deployment-key的設定

在上述代碼中我們在建立CodePush執行個體的時候需要設定一個deployment-key,因為deployment-key分生產環境與測試環境兩種,所以建議大家在build.gradle中進行設定。在build.gradle中的設定方法如下:

開啟android/app/build.gradle檔案,找到android { buildTypes {} }然後添加如下代碼即可:

android {    ...    buildTypes {        debug {            ...            // CodePush updates should not be tested in Debug mode            ...        }        releaseStaging {            ...            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_STAGING_KEY>"'            ...        }        release {            ...            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'            ...        }    }    ...}

心得:另外,我們也可以將deployment-key存放在local.properties中:

code_push_key_production=erASzHa1-wTdODdPJDh6DBF2Jwo94JFH08Kvbcode_push_key_staging=mQY75RkFbX6SiZU1kVT1II7OqWst4JFH08Kvb

如圖: 然後在就可以在android/app/build.gradle可以通過下面方式來引用它了:

Properties properties = new Properties()properties.load(project.rootProject.file('local.properties').newDataInputStream())android {    ...    buildTypes {        debug {            ...            // CodePush updates should not be tested in Debug mode            ...        }        releaseStaging {            ...            buildConfigField "String", "CODEPUSH_KEY", '"'+properties.getProperty("code_push_key_production")+'"'            ...        }        release {            ...            buildConfigField "String", "CODEPUSH_KEY", '"'+properties.getProperty("code_push_key_staging")+'"'            ...        }    }    ...}

在android/app/build.gradle設定好deployment-key之後呢,我們就可以這樣使用了:

@Overrideprotected List<ReactPackage> getPackages() {     return Arrays.<ReactPackage>asList(         ...         new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG), // Add/change this line.         ...     );}

第七步：修改versionName。
在 android/app/build.gradle中有個 android.defaultConfig.versionName屬性，我們需要把 應用版本改成 1.0.0（預設是1.0，但是codepush需要三位元）。

android{    defaultConfig{        versionName "1.0.0"    }}

至此Code Push for Android的SDK已經整合完成。 iOS

CodePush官方提供RNPM、CocoaPods與手動三種在iOS項目中整合CodePush的方式，接下來我就以RNPM的方式來講解一下如何在iOS項目中整合CodePush。

第一步：在項目中安裝react-native-code-push外掛程式，終端進入你的項目根目錄然後運行

npm install --save react-native-code-push

第二步： 運行 rnpm link react-native-code-push。這條命令將會自動幫我們在ios中添加好設定。

在終端運行此命令之後，終端會提示讓你輸入deployment key，這是你只需將你的deployment Staging key輸入進去即可，如果不輸入則直接單擊enter跳過即可。

關於deployment-key的設定

在我們想CodePush註冊App的時候，CodePush會給我們兩個deployment-key分別是在生產環境與測試環境時使用的，我們可以通過如下步驟來設定deployment-key。

1.用Xcode 開啟項目 ➜ Xcode的項目導航視圖中的PROJECT下選擇你的項目 ➜ 選擇I