使用 CodePush 热更新 React Native 项目

[zhangyu921]

最近在 React Native 项目部署了 CodePush 来做热更新，查了网上很多资料发现大多中文资料都比较陈旧了，打算更新一篇2017年末的CodePush 该如何使用。
CodePush的英文文档非常详细，英文不错的同学和详细信息可以直接去Github查看。
这篇简述使用 CodePush 的流程，翻译了 IOS、Android 原生代码的配置文档。

What is CodePush

React Native 应用程序的主要组成是 JavaScript 文件和附属的图片资源。然后由 packager 将它们和特定平台程序打包成二进制文件（.ipa或.apk）。

CodePush 相当于一个中心仓库，将 JavaScript 文件和图像资源打包上传到CodePush服务器。由App程序在设置的时间获取服务器上更新的数据、执行更新。

通过CodePush，在 JavaScript 层面上的改动可以快速升级迭代，无需重新发布到App Store、Google Play 等应用商店。

安装 CodePush CLI

CodePush CLI 是用于上传、发布包到CodePush服务器的终端工具，同时也提供方便的功能执行打包命令。

关于CodePush CLI 官方有完善的**中文文档**，这里列出注册流程和一些常用的命令。

注册流程：

// 安装
npm install -g code-push-cli
// 验证安装成功
code-push -v 
// 注册CodePush账号
code-push register
// 登录
code-push login
// 在CodePush服务器注册 App,这里建议注册 appname-ios、appName-android 两个app
code-push app add <appName>

相关命令：

code-push login 登陆
code-push loout 注销
code-push access-key ls 列出登陆的token
code-push access-key rm <accessKye> 删除某个 access-key

code-push add 在账号里面添加一个新的app
code-push remove 或者 rm 在账号里移除一个app
code-push rename 重命名一个存在app
code-push list 或则 ls 列出账号下面的所有app
code-push transfer 把app的所有权转移到另外一个账号

查看应用deployment key

code-push deployment ls <appName> -k

CodePush中，每个app 默认有两个 deployment key，App使用不同的Key，可以取到不同key上的包。一般使用 Staging 作为测试使用，Production 用来发布生产。

deployment key 写在原生代码中，用来作为服务器获取更新的标志。可以通过配置打不同的包使用不同的key（后面会说到）。

在项目中安装 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

同时配置了 IOS、Android

IOS 配置 deployment key

deployment key 可以在Info.plist中直接设置，但是为了方便测试，添加一个打包配置用于区分Staging和Production是非常有用的。

1. 打开你的 Xcode 项目，并在Project Navigator 窗口中选择你的项目

2. 确保选择了PROJECT节点，而不是其中一个TARGETS

3. 选择 Info 标签

4. 单击Configurations部分中的+按钮，然后选择复制Release配置
   

5. 重命名这个配置为Staging(或者任何你喜欢的)

6. 选择Build Settings标签

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

8. 点击工具栏上的+按钮，然后选择Add User-Defined Setting
   

9. 将这个新设置命名为CODEPUSH_KEY，将其展开，并为发布配置指定Staging配置的Stagingdeployment key和Productiondeployment key。
   
   deployment key可以通过 code-push deployment ls <APP_NAME> -k获取

10. 打开项目的Info.plist文件并将CodePushDeploymentKey条目的值更改为$(CODEPUSH_KEY)
    

现在，当运行或构建应用程序时，Staging 版本将自动配置为与 Staging 部署同步，并且发布版本将配置为与Production 部署同步。

Android 配置 deployment key

同样根据步骤：

1. 打开app的build.gradle，(在React Native 项目目录下 android/app/build.gradle)
2. 找到android { buildTypes {} }部分，并为调试版本和发布版本类型定义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. 将部署密钥通过您刚刚定义的构建配置传递给CodePush构造函数，而不是字符串文字。
   打开 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.
      ...
  );
}

现在，当运行或构建应用程序时，ReleaseStaging版本将自动配置为与Staging部署同步，并且Release版本将配置为与Production部署同步。

App 查询更新

在原生代码部署完成后，唯一需要确定的是App需要在何时与CodePush通信，获取更新。最简单的方法就是通过在包裹根组件的方式：

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

class MyApp extends Component {
}

export default codePush(MyApp);

还可以根据需要配置查询更新频率：

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

class MyApp extends Component {
}

export default codePush(codePushOptions)(MyApp);

也可以手动查询，例如：

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

在项目目录执行

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

默认发布到Staging，使用-d 选择deployment

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

注意：这里版本号使用的是现在原生项目中的版本号，也可以指定版本号

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

版本号可以使用范围表达式。

这部分有详细的中文文档：参考链接

[zhilianghuang]

你好，想问下比如我的RN项目中添加了android中java原生代码，然后需要重新发布apk包，给到用户安装，这是如何操作？谢谢