react native codepush 热更新配置

搞了两天，查了很多资料，发现网上很多资料太老了，把我配置的方法分享给大家，同时也记录下

       codepush是微软的一套用于热更新的服务，微软的github地址：https://github.com/Microsoft/react-native-code-push，里面讲述了详细的使用方法。这里我就自己的操作做了一下调整。

一、全局配置

1.1 全局安装 code-push 环境 npm install -g code-push-cli ，安装成功则可以 code-push -v查看安装的版本号

1.2 code-push register 注册账号，会在google浏览器打开注册界面，然后注册成功会拿到一个key 如下图所示,如果已经注册过的话，code-push login 直接登录

1.png

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

1.3 注册应用

code-push app add appName-ios ios react-native
code-push app add appName-android android react-native

其他命令如下：

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

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

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

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

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

1.4 app里配置code-push SDK

1. 进入到你的项目目录下，在终端里运行
2. npm install --save react-native-code-push@latest 安装code-push组件
3. 与所有其他React Native第三方组件一样，iOS和Android的集成方式不同，因此根据您平台执行以下设置步骤。 请注意，如果您要同时配置这两个平台，建议为每个平台创建单独的CodePush应用程序

ios配置

一旦你获得了CodePush插件，你需要将它集成到React Native应用程序的Xcode项目并正确配置。 为此，请执行以下步骤：
为了迎合尽可能多的开发人员的偏好，CodePush支持三种安装方式：

1、 RNPM安装 - React Native包管理器 (RNPM)是一个非常棒的工具，它为React Native插件提供了最简单的安装体验。 我们推荐这种方法

（1）从React Native v0.27开始，rnpm链接已经合并到React Native CLI中。运行以下命令：

react-native link react-native-code-push  

如果您的应用程序使用的版本低于v0.27的React Native，请运行以下命令：

rnpm link react-native-code-push

注意：如果您尚未安装RNPM，可以通过简单地运行npm i -g rnpm安装rnpm然后再执行上述命令

（2） 系统将提示您输入要使用的部署密钥。 如果你还没有它，你可以通过运行code-push deployment ls <appName> -k来检索这个值，或者你可以选择忽略它（直接按<ENTER>），并在以后添加它。 开始吧，我们建议您先使用您的Staging部署密钥进行测试。

2、CocoaPods安装 如果你在iOS应用里嵌入使用React Native,或者就是任性，喜欢使用CocoaPods，那么建议使用我们插件中提供的Podspec文件.

（1）把CodePush依赖添加到Podfile里，并指向NPM的安装路径

pod 'CodePush', :path => '../node_modules/react-native-code-push'  

（2）运行

pod install     

3. "手动安装" -如果你不想依赖任何额外的工具，你可以使用这个方法.

（1）打开你的APP的Xcode工程

（2）点击Libraries文件夹右键‘Add Files to ....’,在node_modules里找到‘CodePush.xcodeproj’

2.png 3.png

(3) 把.a文件从Libraries/CodePush.xcodeproj/Products拖拽到Link Binary With Libraries选项

4.png

(4) 选择“Link Binary With Libraries”列表下方的加号，添加libz.tbd

5.png

（5） 在项目配置的“"Build Settings"”选项卡下，找到“Header Search Paths”。 添加路径$(SRCROOT)/../node_modules/react-native-code-push/ios并在下拉菜单中选择“recursive”。

(6) 插件配置

注意：如果你使用RNPM 或者 react-native link自动配置了组件，这一步已经完成，你可以跳过这一步了！！！

1. 打开AppDelegate.m文件，导入CodePush头文件：#import "CodePush.h"

2. 在Info.plist里添加CodePushDeploymentKey字段，填入Deployment Key

6.png

3. 在Info.plist中将Bundle versions string, short的值修改为1.0.0

ios部署

1.在Xcode 里打开项目 ，选择工程根目录,选择info

7.png

2.点击➕按钮，选择Duplicate "Release" Configuration

8.png

3. 命名为 Staging或者你喜欢的

4. 选择 Build Setting

5. 点击工具栏上的+号按钮，选择`Add User-Defined Setting

9.png

6. 命名为CONDPUSH_KEY,添加Staging和Production环境的deployment key

10.png

7. 打开你工程的Info.plist文件，修改CodePushDeploymentKey的值为：$(CODEPUSH_KEY)

到此，你的iOS动态部署配置已完成,当你运行项目时，根据你运行的版本（Debug,Release）会去自动匹配Staging和 Production环境

发布更新

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

第一种方式：通过code-push release-react发布更新

这种方式将打包与发布两个命令合二为一，可以说大大简化了我们的操作流程，建议大家多使用这种方式来发布更新。

命令格式：

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

eg:

code-push release-react MyApp-iOS ios
code-push release-react MyApp-Android android  

再来个更高级的：

code-push release-react MyApp-iOS ios  --t 1.0.0 --dev false --d Production --des "1.优化操作流程" --m true  

其中参数--t为二进制(.ipa与apk)安装包的的版本；--dev为是否启用开发者模式(默认为false)；--d是要发布更新的环境分Production与Staging(默认为Staging)；--des为更新说明；--m 是强制更新。

关于code-push release-react更多可选的参数，可以在终端输入code-push release-react进行查看。

另外，我们可以通过code-push deployment ls <appName>来查看发布详情与此次更新的安装情况。

第二中方式：通过code-push release发布更新

code-push release发布更新呢我们首先需要将js与图片资源进行打包成 bundle

生成bundle

发布更新之前，需要先把 js打包成 bundle，如：

第一步： 在 工程目录里面新增 bundles文件：mkdir bundles

第二步： 运行命令打包

react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试。

eg:

react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev false

需要注意的是：

1. 忽略了资源输出是因为 输出资源文件后，会把bundle文件覆盖了。
2. 输出的bundle文件名不叫其他，而是 index.android.bundle，是因为 在debug模式下，工程读取的bundle就是叫做 index.android.bundle。
3. 平台可以选择 android 或者 ios

发布更新

打包bundle结束后，就可以通过CodePush发布更新了。在终端输入

code-push release <应用名称> <Bundles所在目录> <对应的应用版本> --deploymentName： 更新环境 --description： 更新描述 --mandatory： 是否强制更新

eg:

code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.支持文章缓存。" --mandatory true

注意：

1. CodePush默认是更新 staging 环境的，如果是staging，则不需要填写 deploymentName。
2. 如果有 mandatory 则Code Push会根据mandatory 是true或false来控制应用是否强制更新。默认情况下mandatory为false即不强制更新。
3. 对应的应用版本（targetBinaryVersion）是指当前app的版本(对应build.gradle中设置的versionName "1.0.6")，也就是说此次更新的js/images对应的是app的那个版本。不要将其理解为这次js更新的版本。
   如客户端版本是 1.0.6，那么我们对1.0.6的客户端更新js/images，targetBinaryVersion填的就是1.0.6。
4. 对于对某个应用版本进行多次更新的情况，CodePush会检查每次上传的 bundle，如果在该版本下如1.0.6已经存在与这次上传完全一样的bundle(对应一个版本有两个bundle的md5完全一样)，那么CodePush会拒绝此次更新。
   所以如果我们要对某一个应用版本进行多次更新，只需要上传与上次不同的bundle/images即可。如：
   eg:
   对1.0.6的版本进行第一次更新：
   code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.支持文章缓存。" --mandatory true
   对1.0.6的版本进行第二次更新：
   code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.新添加收藏功能。" --mandatory true
5. 在终端输入 code-push deployment history <appName> Staging 可以看到Staging版本更新的时间、描述等等属性。
   eg:
   code-push release Equipment ./bundles 1.0.1

总结：

CodePush也存在着一些缺点：

1. 服务器在国外，在国内访问，网速不是很理想。
2. 其升级服务器端程序并不开源的，后期微软会不会对其收费还是个未知数。
   如果在没有更好的动态更新React Native应用的方案的情况下，并且这些问题还在你的接受范围之内的话，那么CodePush可以作为动态更新React Native应用的一种选择。
3. 最好自己搭建动态更新服务器