最近在 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
deployment key
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是非常有用的。
-
打开你的 Xcode 项目，并在Project Navigator 窗口中选择你的项目
-
确保选择了PROJECT节点，而不是其中一个TARGETS
-
选择 Info 标签
-
单击
Configurations部分中的+按钮，然后选择复制Release配置
[图片上传失败...(image-342ce-1513212533873)] -
重命名这个配置为
Staging(或者任何你喜欢的) -
选择
Build Settings标签 -
找到
Build Location -> Per-configuration Build Products Path -> Staging把 Staging 的值修改为$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)(之前是$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME))
[图片上传失败...(image-a01dbf-1513212533873)]
-
点击工具栏上的
+按钮，然后选择Add User-Defined Setting
[图片上传失败...(image-66a0b5-1513212533874)] -
将这个新设置命名为
CODEPUSH_KEY，将其展开，并为发布配置指定Staging配置的Stagingdeployment key和Productiondeployment key。
[图片上传失败...(image-af21f3-1513212533874)]
deployment key可以通过code-push deployment ls <APP_NAME> -k获取 -
打开项目的Info.plist文件并将
CodePushDeploymentKey条目的值更改为$(CODEPUSH_KEY)
[图片上传失败...(image-66df04-1513212533874)]
现在，当运行或构建应用程序时，Staging 版本将自动配置为与 Staging 部署同步，并且发布版本将配置为与Production 部署同步。
Android 配置 deployment key
同样根据步骤：
- 打开app的build.gradle，(在React Native 项目目录下
android/app/build.gradle) - 找到
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>"'
...
}
}
...
}
- 将部署密钥通过您刚刚定义的构建配置传递给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>
版本号可以使用范围表达式。
这部分有详细的中文文档：参考链接
网友评论