React Native热更新（CodePush使用）

在移动应用开发过程中，应用的发布上线一直是个耗时且长时间没有很好解决的问题。特别是对于苹果开发者，受苹果的生态环境影响每次审核时间一到7天不等。笔者记得15年曾有新应用上线多次被拒，从提交审核到正式上线前前后后磨蹭了半个多月才真正发布成功。安卓的相对就不会产生那么多不愉快，审核时间半天左右。今天笔者想向大家分享的是跨平台开发中的CodePush使用，CodePush的出现有效的解决了React Native 应用在动态更新方面耗时过长问题。

由于js本身具备动态加载特性，RN的热更新并不像原生那么复杂，RN的热更新更像是原生版本的热更新，流程大致如下：

0

RN在启动过程中将一系列的资源包打包成jsbundle文件，系统加载jsbundle文件来解析渲染界面。

    1.CodePush简介

CodePush是微软开发的云服务器。通过它开发者可以直接在用户的设备上部署手机应用更新。CodePush 作为一个中央仓库，开发者可以推送更新 (JS, HTML, CSS and images)，应用可以从客户端 SDK 里面查询更新。CodePush 可以让应用有更多的可确定性，也可以让你直接接触用户群。在修复一些小问题和添加新特性的时候，不需要经过二进制打包，可以直接推送代码进行实时更新。

    2.CodePush优势

CodePush可以实时推送代码的更新、直接对用户部署代码更新、支持React Native和Cordova、支持JavaScript文件与图片资源的更新、管理Alpha，Beta和生产环境应用。

    3.CodePush安装

        a.安装CodePush CLI，通过NodeJS-based CLI管理CodePush账号。

            1.打开苹果电脑终端，输入sudonpm install -g code-push-cli；

            2.验证是否安装成功，输入code-push -v查看版本。

1

         b.创建codePush账号

            1.在终端输入code-push register，进入网页注册页面，注册成功后得到.

2

得到的这个值就是你终端里需要输入的token;

             2.在终端输入得到的token，成功后得到如下反馈；

3

             3.在终端输入code-push app add （应用名称）；

             code-push相关命令:

4

              code-push app下相关命令

5

完成上述操作后，你的应用已经注册到codepush服务端。

            4.终端中输入code-push deployment ls （应用名称）-k，查看对应的Deployment Key；

6

             5.终端输入code-push access-key ls；(创建时间和名字）

7

    4.集成CodePush SDK

        1.iOS集成，CodePush官方提供RNPM、CocoaPods与手动三种在iOS项目中集成CodePush的方式。

            a.React Native项目中安装codePush依赖，终端输入：npm i react-native-code-push --save

            b.react-native和react-native-code-push的构建关联，终端输入：react-native link react-native-code-push，link的主要作用是进行库文件依赖关系关联。如果react-native link操作成功，在iOS和Android工程中均能看到相应的依赖（具体表现为打开Xcode，可以在【Build Phases】→【Link Binary With Libraries】依赖库看到对应.a文件；在Android项目app目录中build.gradle文件下的dependencies中看到依赖库）。可以选择输入对应的deployment key或者直接跳过，笔者选择输入对应发deployment key，RN项目中安卓跟iOS都需要。

            c.Xcode中的配置（手动连接）

            1.引入CodePush.xcodeproj，相同的方法只是你需要的CodePush.xcodeproj，三方项目的实现，工程依赖。

8

            2.引入CodePush SDK、libz.tbd，

9

            3.添加code-push头文件检索

10

        4.配置deployment key

        在react-native link react-native-code-push环节我们跳过了deployment key在Xcode端的配置，在这里我们需要手动配置。

            a.在Xcode的项目导航视图中的PROJECT下选择你的项目，选择Info页签，在Configurations节点下单击+按钮，选择Duplicate“Release Configaration，输入Staging。

11

            b.在build Settings页签中单击+按钮然后选择Add User-Defined Setting，然后输入CODEPUSH_KEY，然后填入deployment key。

12

新增的CODEPUSH_KEY节点下Debug不用填，Release填入的是CodePush上Production的key值，Staging填入的是CodePush上Staging的key值：

13

            c.打开Info.plist文件，在CodePushDeploymentKey中输入$(CODEPUSH_KEY)，并修改Bundle versions为三位，如图：

14

至此，ios原生层的CodePush集成已经完成，接下来在React-native使用接入CodePush。

         2.安卓集成

              a.在项目中安装react-native-code-push插件,终端输入：npm install --save react-native-code-push；（如果你在项目中iOS已经集成可以省略）

              b.在Android project中安装插件,CodePush提供了两种方式：RNPM和Manual。笔者使用RNPM，在终端输入sudo npm i -g rnpm；

15

              c.自动在android文件中配置codePush，终端输入：rnpm link react-native-code-push；

16

              d.查看安卓中配置；

                1.在android/app/build.gradle文件是否有apply from: "../../node_modules/react-native-code-push/android/codepush.gradle" 

                2.在/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')

              e.配置deployment key

                1.获取项目deployment key,终端输入：code-push deployment ls （应用名称）-k

17

                2.在MainApplication.java文件中修改deployment key

18

            f.修改versionName（codepush要三位数字的形式），在android/app/build.gradle中有个android.defaultConfig.versionName属性

19

至此，android原生层的CodePush集成已经完成，接下来在React-native使用接入CodePush。

      4.RN中添加对应codePush

RN层Libraries/BatchedBridge包下面有3个JS文件：BatchedBridge.js、MessageQueue.js、NativeModules.js，它们封装了通信桥在RN层的实现。在js中加载CodePush模块：import codePush from 'react-native-code-push’,在componentDidMount中调用sync方法，后台请求更新codePush.sync(). 

20

      5.使用CodePush进行热更新

CodePush支持两种发布更新的方式，一是code-push release-react简化方式，另一种是code-push release的复杂方式。

        a.通过code-push release-react发布更新,此方法将打包与发布合二为一，在终端输入：code-push release-react

eg.

21

22

        其他形式语句：code-push release-react hello-world ios  --t 1.0.0 --dev false --d Production --des“更新内容：…”--m true.(注：参数--t为二进制.ipa或者.apk安装包版本号；--dev为是否启用开发者模式(默认为false)；--d是要发布更新的环境分Production与Staging(默认为Staging)；--des为更新说明；--m是强制更新。)

 b.生成bundle,上传文件后的更新；

    1.在项目下创建bundles文件夹，在其下在分别创建iOS和android两个文件夹。生成文件夹命令：mkdir bundles（文件名称）

    2.生成对应的bundle，指令形式：react-native bundle --platform平台--entry-file启动文件--bundle-output打包js输出文件--assets-dest资源输出目录--dev是否调试。终端输入：react-native bundle --platform ios --entry-file index.js --bundle-output ./bundles/ios/index.jsbundle  --assets-dest ./bundles/ios --dev false

23

    3.将生成的iOS文件添加到项目

24

        将生成的android文件添加到项目，将index.jsbundle添加到android-->app-->src-->main-->assets下，其他资源文件放到android-->app-->src-->main-->res.  笔者很好奇为什么jsbundle里的是js代码，其他文件中的基本是图片资源，安卓同事跟我说是放到res能正常加载。

    4.上传bundle，将生成的bundle文件上传到CodePush。指令形式：code-push release-react --t <本更新包面向的旧版本号> --d <所处环境>  --des <本次更新说明>  --m<是否强制更新>。终端输入：code-push release-react hello-world ios --t 1.0.0 --dev false --d Staging --des "" --m false。上传成功后

25

注意：根据自己所在的环境对应不同的指令：Production（发布）Staging（灰度）

  6.CodePush更新中的一些语句

1.查询发布历史版本：code-push deployment history   <所处环境>

2.回滚到上一次：code-push rollback    <所处环境>

3.回滚到固定版本：code-push rollback   <项目名称> <所处环境> --targetRelease <Label>     。此处需要先查看历史版本，然后填入对应的Label号

26

4.修改发布信息（label代表发布的更新版本，Target binary version代表app的版本号）：code-push patch   <所处环境>  --l   --t <版本号>

修改前：

27

修改后：

28

5.将staging推倒production：code-push promote Staging Production

6.查看更新状态：code-push deployment h   <所处环境>

7.直接全量更新：code-push release-react

8.打包：react-native bundle --platform --entry-file <启动文件> --bundle-output <打包js输出文件>  --assets-dest <资源输出目录> --dev <是否调试>

9.上传bundle到codePush：code-push release-react --t <本更新包面向的旧版本号> --dev <是否调试> --d <所处环境>  --des <描述> —m <是否强制更新>

10.code-push deployment history he-merchant-app Production（查看历史发布版本）

注意： CodePush默认是更新Staging 环境的，如果发布生产环境的更新包，需要指定–d参数：–d Production，如果发布的是强制更新包，需要加上 –m true强制更新。

CodePush常用命令总结：

// 账户相关

code-push login 登陆

code-push loout 注销

code-push access-key ls 列出登陆的token

code-push access-key rm <accessKye> 删除某个 access-key

// app操作相关

code-push app add react-native在账号里面添加一个新的app

code-push app remove 或者 rm 在账号里移除一个 app

code-push app rename 重命名一个存在 app

code-push app list 或则 ls 列出账号下面的所有 app

code-push app transfer 把app的所有权转移到另外一个账号

// 应用信息相关

code-push deployment add <appName> 部署

code-push deployment rm <appName> 删除部署

code-push deployment rename <appName> 重命名

code-push deployment ls <appName> 列出应用的部署情况

code-push deployment ls <appName> -k 查看部署的key

code-push deployment history <appName> <deploymentName> 查看历史版本

// 发布

code-push release-react -t 版本  -d 环境  --des 描述 -mtrue（强制更新）

// 清除历史部署记录

code-push deployment clear <appName> <所处环境>

// 回滚

code-push rollback <所处环境> --<codepush服务部署的版本号>