React-Native 热部署 热更新

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

CodePush 可以进行实时的推送代码更新:

*直接对用户部署代码更新

*管理 Alpha,Beta 和生产环境应用

*支持 Cordova 和 React Native

官方对Code-push的介绍

CodePush is a cloud service that enables Cordova and React Native developers to deploy mobile app updates directly to their users’ devices. It works by acting as a central repository that developers can publish certain updates to (e.g. JS, HTML, CSS and image changes), and that apps can query for updates from (using our provided client SDKs). This allows you to have a more deterministic and direct engagement model with your end-users, while addressing bugs and/or adding small features that don’t require you to re-build a binary and/or re-distribute it through any public app stores.

一、环境准备


1.安装Code-push cli

$ npm install -g code-push-cli

2、 注册CodePush账户

$ code-push register

执行以上命令将会自动打开如下图所示的注册页面:

注册页面

本文使用GitHub账户进行注册,注册成功后将会生成如下图所示相应的access token:

access token

在终端输入刚生成的access token:

3、添加CodePush应用

$ code-push app add XXX              //xxx   为你要热部署的app name

4、查看应用 

成功后我们可以看到有两个发布键值。一个Production是对应生产环境的,二Staging是对应开发环境的。这个值在后面我们集成工程里面要用到。

二、集成code-push 到工程文件

在项目工程安装CodePush,一般有两三种方法。

一种是cocoaPods接入,一种是手动接入,本文采用的是手动接入。

1、cocoaPods 

// 新增

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

// 安装

pod install

2、手动接入 

1) 在命令行下,进入整个工程的根目录,安装CodePush。

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

2)引入工程  

此处有两种方法 :

a.


将react-native-code-push文件夹中 CodePush.xcodeproj 直接拉入项目中Libraries中


Libraries/CodePush.xcodeproj/Products

中的

libCodePush.a

直接拖入 Link Binary With Libraries中

点击Link Binary With Libraries的加号,选择

libz.tbd

加入

在Build Settings的Header Search Paths那一项中加入

$(SRCROOT)/../node_modules/react-native-code-push


当然上面是一种蠢方法。[doge],下面是便捷的一键做法。

b npm install 安装以后 

直接使用rnpm神器 

安装 

$ npm -g install rnpm xcode

使用 

rnpm link

然后就省略了a步骤那么多步操作,是不是很简单,一步步按a做完的,看到这是不是很想打人。 哈哈。

三 修改oc代码

1.在加载 js bundle的类中 修改代码


修改代码


#import"CodePush.h"

NSURL *jsCodeLocation;

#ifdef DEBUG

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

#else

jsCodeLocation = [CodePush bundleURL];

#endif


2.修改info.plist 添加CodePushDeploymentKey键值对,Deployment Key可以通过以下命令进行获取:(还可以获取热部署后,包更新的详情)。


$ code-push deployment ls <appname> --displayKeys


一个Production是对应生产环境的,二Staging是对应开发环境的。

添加后如图 


并在

Info.plist

中将

Bundle versions string, short

的值修改为

1.0.0 (三位 务必三位 否则codepush 会出错)

3.React Native项目的入口文件,做如下修改:

在需要启动代码更新的位置里面,引用CodePush,并且调用Code Push的更新接口。

一般在componentDidMount()调用。

四、发布更新 

1)发布更新 (JavaScript-only)

当你修改js文件的时候,并且想立刻发布。则仅仅需要以下的操作:

将你修改的js文件(当前文件是index.ios.js)打包为二进制文件,放入指定的地方(当前位置为根目录)。

 react-native bundle --platform ios --entry-file index.ios.js --bundle-output codepush.js --dev false

将二进制文件push到staging 环境中

code-push release [--deploymentName ] [--description ]  [--mandatory]

eg:

code-push release AwesomeProject2  codepush.js 1.0.0

2)发布更新 (JavaScript + images)

–assets-dest 就是你放图片的位置(当前仅仅是做测试,实际上最好建个文件夹专门存入相关图片)

react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./main.jsbundle --assets-dest ./<img 地址>

// main.jsbundle 为自定义名字的bundle名

push bundle文件

code-push <release/debug> <projectName(与注册的app同名)><bundle文件名> <版本号>

eg:

code-push release AwesomeProject2  main.jsbundle 1.0.0



Q&A

1.更新规则 

2.更新后都需要重启才能看到最新的变化 再次进入后要等一会。TODO:还要验证后确定稳定时机。

3.查看历史上传过的版本:

code-push deployment history 你注册的appname Staging

推荐阅读更多精彩内容