最近在 React Native 項(xiàng)目部署了 CodePush 來(lái)做熱更新，查了網(wǎng)上很多資料發(fā)現(xiàn)大多中文資料都比較陳舊了，打算更新一篇2017年末的CodePush 該如何使用。
CodePush的英文文檔非常詳細(xì)，英文不錯(cuò)的同學(xué)和詳細(xì)信息可以直接去Github查看。
這篇簡(jiǎn)述使用 CodePush 的流程，翻譯了 IOS、Android 原生代碼的配置文檔。

What is CodePush

React Native 應(yīng)用程序的主要組成是 JavaScript 文件和附屬的圖片資源。然后由 packager 將它們和特定平臺(tái)程序打包成二進(jìn)制文件（.ipa或.apk）。

CodePush 相當(dāng)于一個(gè)中心倉(cāng)庫(kù)，將 JavaScript 文件和圖像資源打包上傳到CodePush服務(wù)器。由App程序在設(shè)置的時(shí)間獲取服務(wù)器上更新的數(shù)據(jù)、執(zhí)行更新。

通過(guò)CodePush，在 JavaScript 層面上的改動(dòng)可以快速升級(jí)迭代，無(wú)需重新發(fā)布到App Store、Google Play 等應(yīng)用商店。

安裝 CodePush CLI

CodePush CLI 是用于上傳、發(fā)布包到CodePush服務(wù)器的終端工具，同時(shí)也提供方便的功能執(zhí)行打包命令。

關(guān)于CodePush CLI 官方有完善的中文文檔，這里列出注冊(cè)流程和一些常用的命令。

注冊(cè)流程：

// 安裝
npm install -g code-push-cli
// 驗(yàn)證安裝成功
code-push -v 
// 注冊(cè)CodePush賬號(hào)
code-push register
// 登錄
code-push login
// 在CodePush服務(wù)器注冊(cè) App,這里建議注冊(cè) appname-ios、appName-android 兩個(gè)app
code-push app add <appName>

相關(guān)命令：

code-push login 登陸
code-push loout 注銷(xiāo)
code-push access-key ls 列出登陸的token
code-push access-key rm <accessKye> 刪除某個(gè) access-key

code-push add 在賬號(hào)里面添加一個(gè)新的app
code-push remove 或者 rm 在賬號(hào)里移除一個(gè)app
code-push rename 重命名一個(gè)存在app
code-push list 或則 ls 列出賬號(hào)下面的所有app
code-push transfer 把a(bǔ)pp的所有權(quán)轉(zhuǎn)移到另外一個(gè)賬號(hào)

查看應(yīng)用deployment key

code-push deployment ls <appName> -k

deployment key

CodePush中，每個(gè)app 默認(rèn)有兩個(gè) deployment key，App使用不同的Key，可以取到不同key上的包。一般使用 Staging 作為測(cè)試使用，Production 用來(lái)發(fā)布生產(chǎn)。

deployment key 寫(xiě)在原生代碼中，用來(lái)作為服務(wù)器獲取更新的標(biāo)志。可以通過(guò)配置打不同的包使用不同的key（后面會(huì)說(shuō)到）。

在項(xiàng)目中安裝 CodePush

安裝 react-native-code-push

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

link react-native-code-push

// React Native 版本 >= v0.27
react-native link react-native-code-push

同時(shí)配置了 IOS、Android

IOS 配置 deployment key

deployment key 可以在Info.plist中直接設(shè)置，但是為了方便測(cè)試，添加一個(gè)打包配置用于區(qū)分Staging和Production是非常有用的。

1. 打開(kāi)你的 Xcode 項(xiàng)目，并在Project Navigator 窗口中選擇你的項(xiàng)目

2. 確保選擇了PROJECT節(jié)點(diǎn)，而不是其中一個(gè)TARGETS

3. 選擇 Info 標(biāo)簽

4. 單擊Configurations部分中的+按鈕，然后選擇復(fù)制Release配置
   [圖片上傳失敗...(image-342ce-1513212533873)]

5. 重命名這個(gè)配置為Staging(或者任何你喜歡的)

6. 選擇Build Settings標(biāo)簽

7. 找到 Build Location -> Per-configuration Build Products Path -> Staging 把 Staging 的值修改為$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)(之前是$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME))

[圖片上傳失敗...(image-a01dbf-1513212533873)]

8. 點(diǎn)擊工具欄上的+按鈕，然后選擇Add User-Defined Setting
   [圖片上傳失敗...(image-66a0b5-1513212533874)]

9. 將這個(gè)新設(shè)置命名為CODEPUSH_KEY，將其展開(kāi)，并為發(fā)布配置指定Staging配置的Stagingdeployment key和Productiondeployment key。
   [圖片上傳失敗...(image-af21f3-1513212533874)]
   deployment key可以通過(guò) code-push deployment ls <APP_NAME> -k獲取

10. 打開(kāi)項(xiàng)目的Info.plist文件并將CodePushDeploymentKey條目的值更改為$(CODEPUSH_KEY)
    [圖片上傳失敗...(image-66df04-1513212533874)]

現(xiàn)在，當(dāng)運(yùn)行或構(gòu)建應(yīng)用程序時(shí)，Staging 版本將自動(dòng)配置為與 Staging 部署同步，并且發(fā)布版本將配置為與Production 部署同步。

Android 配置 deployment key

同樣根據(jù)步驟：

1. 打開(kāi)app的build.gradle，(在React Native 項(xiàng)目目錄下 android/app/build.gradle)
2. 找到android { buildTypes {} }部分，并為調(diào)試版本和發(fā)布版本類(lèi)型定義buildConfigField條目，分別引用Staging和Production部署密鑰(deployment key)。

android {
  ...
  buildTypes {
      debug {
          ...
          // Note: CodePush updates should not be tested in Debug mode as they are overriden by the RN packager. However, because CodePush checks for updates in all modes, we must supply a key.
          buildConfigField "String", "CODEPUSH_KEY", '""'
          ...
      }

      releaseStaging {
          ...
          buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_STAGING_KEY>"'
          ...
      }

      release {
          ...
          buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
          ...
      }
  }
  ...
}

3. 將部署密鑰通過(guò)您剛剛定義的構(gòu)建配置傳遞給CodePush構(gòu)造函數(shù)，而不是字符串文字。
   打開(kāi) MainApplication.java，做如下修改

// React Native >= v0.29
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      ...
      new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG), // Add/change this line.
      ...
  );
}

現(xiàn)在，當(dāng)運(yùn)行或構(gòu)建應(yīng)用程序時(shí)，ReleaseStaging版本將自動(dòng)配置為與Staging部署同步，并且Release版本將配置為與Production部署同步。

App 查詢(xún)更新

在原生代碼部署完成后，唯一需要確定的是App需要在何時(shí)與CodePush通信，獲取更新。最簡(jiǎn)單的方法就是通過(guò)在包裹根組件的方式：

import codePush from "react-native-code-push"

class MyApp extends Component {
}

export default codePush(MyApp);

還可以根據(jù)需要配置查詢(xún)更新頻率：

let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };

class MyApp extends Component {
}

export default codePush(codePushOptions)(MyApp);

也可以手動(dòng)查詢(xún)，例如：

let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };

class MyApp extends Component {
    onButtonPress() {
        codePush.sync({
            updateDialog: true,
            installMode: codePush.InstallMode.IMMEDIATE
        });
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={this.onButtonPress}>
                    <Text>Check for updates</Text>
                </TouchableOpacity>
            </View> 
        )
    }
}

export default codePush(codePushOptions)(MyApp);

部署

上傳到 CodePush

在項(xiàng)目目錄執(zhí)行

code-push release-react <appName> <platform> 

默認(rèn)發(fā)布到Staging，使用-d 選擇deployment

code-push release-react <appName> <platform> -d Preduction

注意：這里版本號(hào)使用的是現(xiàn)在原生項(xiàng)目中的版本號(hào)，也可以指定版本號(hào)

code-push release-react <appName> <platform> <targetBinaryVersion>

版本號(hào)可以使用范圍表達(dá)式。

這部分有詳細(xì)的中文文檔：參考鏈接