React Native 项目整合 CodePush 全然指南

作者 | 钱凯

https://mmbiz.qpic.cn/mmbiz_jpg/ibm2sb53lRhyW3xoCtaqg02KEXCAMdfQBBVbQAkcc8U0KLCcAr998hrwbulN8ic7TzwrV2PpL31Dib8LySMe6hh1Q/640?wx_fmt=jpeg" alt="640?wx_fmt=jpeg" />

杏仁移动开发project师，前嵌入式project师。关注大前端技术新潮流。

本文使用的环境：

React@16.3.1
React Native@0.55.4
react-native-code-push@5.3.4
Android SDK@23
Android Build Tool@23.0.3
Gradle@2.14.1
Android Gradle Plugin@2.2.3

Why CodePush？

CodePush 是微软提供的一个热更新前后台方案。它对 React Native 项目有非常好的支持。

眼下针对 React Native 的 hot update 方案有很多。可是 CodePush 是最成熟稳定的方案，它最大的特点是提供了完整的后台工具。它基本的长处是：

微软出品，大厂保证
良好的多环境支持（Testing。Staging, Production）
灰度公布、自己主动回滚等等特性
良好的数据统计支持：下载、安装、出错一目了然
强大的 CLI 工具，一个终端搞定所有流程

因为 React Native 运行的是脚本 js 文件，对热更新有天然的亲和，有余力的团队能够尝试实现自己的框架，一个简单的实现思路是：

改动载入 jsBundle 的代码，转而从指定的本地存储位置去载入。假设没有。下载 bundle, 而且本次打开使用 app 包中的 bundle。
假设找到 jsBundle 文件。调用 api 比較版本号号，假设不一致，则从指定server下载最新的 bundle 进行替换。
通过反射调用私有方法。在下载完毕的回调中更新运行时资源。从而能马上看到更新的效果。
使用相似 google-diff-match-patch 的 diff 工具。生成差异化补丁。不必下载完整 bundle，从而大大减小补丁包体积。

网上有非常多资料和源代码。这里就不细述了。

后台配置

为了使用 Code Push 公布热更新，我们须要向微软服务注冊我们的应用。

这部分工作微软提供了强大的命令行工具：CodePush CLI。

wx_fmt=png" alt="640?

wx_fmt=png" />

安装 cli 工具

npm 全局安装：

npm install -g code-push-cli

关联账号

使用命令

code-push register

注冊一个账号，能够直接使用 GitHub 账号授权。完毕后将 token 复制回命令行中。

wx_fmt=png" />

使用 whoami 查看登录状态:

code-push whoami

注冊应用

登录成功后，我们注冊一个app：

code-push app add 你的App名称 android react-native

注意一定要为 Android 和 iOS 分别注冊，两者的更新包内容会有差异。

https://mmbiz.qpic.cn/mmbiz_png/ibm2sb53lRhzxaMSGDemUgg3KCXWR3Epv5YYLU1402029M3sz8rMcZZ0qj2tKGlsa5ia3g4Tcyqe5Eu96pS9LJLQ/640?wx_fmt=png" alt="640?

wx_fmt=png" />

查询状态

每一个 App 有不同的运行时环境。比方 Production,Staging等，我们也能够配置自己的环境。查看 App 的不同环境和部署状况：

code-push deployment ls 注冊的app名称

wx_fmt=png" alt="640?wx_fmt=png" />

眼下我们还没有公布不论什么更新。所以表中的状态是空的。

到这里就完毕了后端的基本配置。

App端配置

版本号兼容

安装 Code Push 环境前首先要 check 版本号的兼容性问题，不同的RN版本号须要使用不同的 Code Push。原则上我们建议将 RN 和 CodePush 都升级到最新版本号。

下表是官方文档中的兼容性说明：

React Native version(s)	Supporting CodePush version(s)
<0.14	Unsupported
v0.14	v1.3 (introduced Android support)
v0.15-v0.18	v1.4-v1.6 (introduced iOS asset support)
v0.19-v0.28	v1.7-v1.17 (introduced Android asset support)
v0.29-v0.30	v1.13-v1.17 (RN refactored native hosting code)
v0.31-v0.33	v1.14.6-v1.17 (RN refactored native hosting code)
v0.34-v0.35	v1.15-v1.17 (RN refactored native hosting code)
v0.36-v0.39	v1.16-v1.17 (RN refactored resume handler)
v0.40-v0.42	v1.17 (RN refactored iOS header files)
v0.43-v0.44	v2.0+ (RN refactored uimanager dependencies)
v0.45	v3.0+ (RN refactored instance manager code)
v0.46	v4.0+ (RN refactored js bundle loader code)
v0.46-v0.53	v5.1+ (RN removed unused registration of JS modules)
v0.54-v0.55	v5.3+ (Android Gradle Plugin 3.x integration)

安装包

使用命令：

npm info react-native-code-push

来查看包相关信息。

我们建议始终将RN、React以及一些相关库升级到最新版本号。在根文件夹下使用命令:

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

来安装最新版本号的 CodePush。

也能够參照上面的兼容性表格。安装指定版本号：

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

project配置（Android）

假设project创建的时候比較早。可能是使用命令create-react-native-app来创建的，则须要在根文件夹运行：

npm run eject

来改变project结构。防止后面的兼容性问题。

配置安卓project，官方提供了两种途径：

使用命令行工具rnpm（如今已经被整合到React Native CLI工具中了）。

运行

react-native link react-native-code-push

手动配置

假设你是新手，或者对 gradle、安卓project结构不了解，我们强烈建议运行一次手动配置，帮助理解究竟发生了什么。

手动配置

step 1

在android/settings.gradle文件里加入：

include ':app', ':react-native-code-push'

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

这个文件定义了哪些 module 应该被加入到编译过程。对于单个 module 的项目能够不用须要这个文件，可是对于 multiModule 的项目我们就须要这个文件。否则 gradle 不知道要载入哪些项目。

这个文件的代码在初始化阶段就会被运行。

我们加入的内容告诉 gradle：去 node_modules 文件夹下的 react-native-code-push 载入 CodePush 子项目。

step 2

在 android/app/build.gradle 中的 dependencies 方法中加入依赖：

...

dependencies {

    ...

    compile project(':react-native-code-push')

}

这样就能在主project中引用到 CodePush 模块了。

step 3

继续在 android/app/build.gradle 中，加入在编译打包阶段 CodePush 须要运行的 task 引用：

...

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

...

这段代码事实上就是调用了 project 对象的 apply 方法，传入了一个以 from 为 key 的 map。完整写出来就是这种:

project.apply([from: '../../node_modules/react-native-code-push/android/codepush.gradle'])

apply from 和 apply plugin的差别在于，前者是从指定 url 去载入脚本文件。后者则用是从仓库拉取 plugin id 相应的二进制运行包。

step 4

CodePush 公布有各种环境（deployment）。默认有 Staging 和 Production，我们须要在 buildType 中配置相应的环境。而且设置 PushKey，从而让 App 端的 CodePush RunTime 依据不同的健值来下载正确的更新包。

查询各个环境 Key 的方法是使用上文安装的 CLI 工具：

code-push deployment ls App名称 -k

https://mmbiz.qpic.cn/mmbiz_png/ibm2sb53lRhzxaMSGDemUgg3KCXWR3EpvibUAL8Y0nYl91dqVSa2qibicTXy736HJH0I5XeOoicZyksrJWXlQOa1w2g/640?wx_fmt=png" alt="640?wx_fmt=png" />

上表中的 Deployment Key 就是相应环境的 Key 值了。

在 android/app/build.gradle 中。配置 buildTypes：

buildTypes {

    // 相应Production环境

    release {

        ...

        buildConfigField "String", "CODEPUSH_KEY", '"从上述结果中复制的production值"'

        ...

    }

    // 相应Staging环境

    releaseStaging {

        // 从 release 拷贝配置，仅仅改动了 pushKey

        initWith release

        buildConfigField "String", "CODEPUSH_KEY", '"从上述结果中复制的stagingkey值"'

    }

    debug {

        buildConfigField "String", "CODEPUSH_KEY", '""'

    }

}

注意这里不同 buildType 的命名，Staging 环境相应的 buildType 就叫releaseStaging，要符合这种命名规范。

Debug 环境尽管用不到 CodePush，可是也要配置空的 Key 值，否则会报错。

step 5

处理完引用关系后，我们改动 MainApplication.java，在 App 运行时启动 CodePush 服务：

// 声明包

import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        ...

        // 重写 getJSBundleFile() 方法，让 CodePush 去获取正确的 jsBundle

        @Override

        protected String getJSBundleFile() {

            return CodePush.getJSBundleFile();

        }

        @Override

        protected List<ReactPackage> getPackages() {

            return Arrays.<ReactPackage>asList(

                new MainReactPackage(),

                // 创建一个CodePush运行时实例

                new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG)

                ...

            );

        }

    };

}

js端引入 Code Push

配置完项目project后，我们将 CodePush 引入到 js 端。

首先将 App 的根组件包裹在 CodePush 中：

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

AppRegistry.registerComponent('BDCRM', () => codePush(App));

CodePush 会在 App 启动后自己主动去 check 和更新最新的版本号。我们能够加入一些配置，让它在进入后台的时候也运行检查：

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

AppRegistry.registerComponent('BDCRM', () => codePush(codePushOptions)(App));

CodePush js端的 api 不多，我们能够用这些 api 控制更新的一系列流程，经常使用的有：

// 检測是否有更新包可用

codePush.checkForUpdate(deploymentKey: String = null, handleBinaryVersionMismatchCallback: (update: RemotePackage) => void): Promise<RemotePackage>;

// 获取本地最新更新包的属性

codePush.getCurrentPackage(): Promise<LocalPackage>;

// 重新启动app（即使不用在 Hot Updating。也挺实用的）

codePush.restartApp(onlyIfUpdateIsPending: Boolean = false): void;

// 手动进一次更新

codePush.sync(options: Object, syncStatusChangeCallback: function(syncStatus: Number), downloadProgressCallback: function(progress: DownloadProgress), handleBinaryVersionMismatchCallback: function(update: RemotePackage)): Promise<Number>;

很多其它具体信息见文档。

使用 CodePush CLI 公布更新

完毕前后端的配置，打包公布应用后，兴许的改动我们就能通过 CLI 工具来公布啦！

升级前首先要 check：

应用的版本号号要有更新（app/build.gradle: defaultConfig/versionName）
js bundle 要有改动，Code Push 会 diff 前后版本号。假设代码一致会觉得是无效的更新包

打开终端，进入到project文件夹，完整公布命令是：

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

[--bundleName <bundleName>]

[--deploymentName <deploymentName>]

[--description <description>]

[--development <development>]

[--disabled <disabled>]

[--entryFile <entryFile>]

[--gradleFile <gradleFile>]

[--mandatory]

[--noDuplicateReleaseError]

[--outputDir <outputDir>]

[--plistFile <plistFile>]

[--plistFilePrefix <plistFilePrefix>]

[--sourcemapOutput <sourcemapOutput>]

[--targetBinaryVersion <targetBinaryVersion>]

[--rollout <rolloutPercentage>]

[--privateKeyPath <pathToPrivateKey>]

[--config <config>]

命令參数非常多，但用途都一目了然。嫌每次打麻烦的话，做成脚本也能够。

一般来说，我们公布应用首先会在測试环境进行稳定性測试。通过后再公布到生产环境中：

打包公布 Staging 环境

code-push release-react 应用名 --platform android --deploymentName Staging --description "修复一些bug"

这样。我们 Staging 环境就能够收到更新推送啦。具体载入新 bundle 的实际。和我们在应用中配置的策略有关。上文已经介绍过了。

測试 ok 后，提升（Promoting）到 Production 环境，而且进行灰度20%公布

code-push promote 应用名 Staging Production --rollout 20%

在生产环境验证 ok，使用 patch 将灰度改动为100%，进行全网公布：

code-push patch 应用名 Production -rollout 100%

以上就是依照測试 - 灰度 - 所有公布步骤的一个典型 CodePush 公布工作流。

整体来说，CodePush 能满足我们灰度公布 React Native 应用的大部分需求了，由微软提供的server端支持能够节省非常多工作。是一个成熟可靠的方案。假设要说缺点，可能有几个须要考虑一下：

server速度。国内网络状况可能会影响下发的成功率和效率。
污染代码，在 js 端必须将根节点包裹到 CodePush 模块中去，污染了代码。
冗余，假设仅仅是想要简单的下发小体积的 js bundle。CodePush 显得太“重”，过于冗余了。这时候用轻量化的方案更好。

总之，我们依据自己项目的须要去进行选型就好了！

很多其它细节，能够參考文档

全文完

下面文章您可能也会感兴趣：

理清 Promise 的状态及使用
逻辑思维：理清思路，表达自己的技巧
__biz=MzUxOTE5MTY4MQ==&mid=2247483976&idx=1&sn=242d81539efa682ac334a839cfdb8dfe&chksm=f9fc2fa6ce8ba6b0c45287c3944a18d8eb80b552c5665a0b61fa18704dbff800c55e44d76025&scene=21#wechat_redirect" rel="nofollow">中文房间之争：浅论究竟什么是智能
__biz=MzUxOTE5MTY4MQ==&mid=2247483963&idx=1&sn=dd9b27023d44831805a3e8d6fe1809bf&chksm=f9fc2fd5ce8ba6c35cf61c521fbcddf687fb39fe16666a47495d8899ad296a9e64cea6e1be53&scene=21#wechat_redirect" rel="nofollow" style="text-decoration:underline;font-size:14px;">单元測试 -- project师 Style 的測试方法
__biz=MzUxOTE5MTY4MQ==&mid=2247483959&idx=1&sn=fea56c2d7b4c33c2f8e95fb56109d0e8&chksm=f9fc2fd9ce8ba6cfb2f35ecb602bd332c407b88ffee0cf29ebf4cc84a27062c0afa6711af1a7&scene=21#wechat_redirect" rel="nofollow" style="text-decoration:underline;font-size:14px;">理解 RabbitMQ Exchange
__biz=MzUxOTE5MTY4MQ==&mid=2247483955&idx=1&sn=35b1dc78940ab80bbc679d880cf1fba9&chksm=f9fc2fddce8ba6cbb2a490e0dc7c35f54a7a6b69cebe26b78f4bca5079240b72b0eca765625c&scene=21#wechat_redirect" rel="nofollow" style="text-decoration:underline;font-size:14px;">iOS 下的图片处理与性能优化
__biz=MzUxOTE5MTY4MQ==&mid=2247483952&idx=1&sn=26e1ec8d961c096352cde727e5f52baa&chksm=f9fc2fdece8ba6c89e7b6e0fc64f7f31e8cf2232c1d699ab3c614abafe82ac1c6eddd389672a&scene=21#wechat_redirect" rel="nofollow" style="text-decoration:underline;font-size:14px;">不懂产品的研发，不是好 CTO
__biz=MzUxOTE5MTY4MQ==&mid=2247483947&idx=1&sn=a69ccadea30d3d9d266b23e79b0af3b6&chksm=f9fc2fc5ce8ba6d30c386517d133e94ef0409f86a4b7ff757945a21996963536b67a95a79113&scene=21#wechat_redirect" rel="nofollow" style="text-decoration:underline;font-size:14px;">技术选型的艺术
Apache Common Pool2 对象池应用浅析
函数扩展
iOS 照片涂鸦功能的实现
__biz=MzUxOTE5MTY4MQ==&mid=2247483908&idx=1&sn=a2a1c00a0c599bb26eebbfd286431815&chksm=f9fc2feace8ba6fc5f191721158567d5f380b41d2b50591b633fcf42f307fb698968c662eb21&scene=21#wechat_redirect" rel="nofollow">捋一捋 App 性能測试中的几个重要概念

我们正在招聘 Java project师，欢迎有兴趣的同学投递简历到 rd-hr@xingren.com 。

杏仁技术站

长按左側二维码关注我们。这里有一群热血青年期待着与您相会。