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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,784评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,745评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,702评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,229评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,245评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,376评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,798评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,471评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,655评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,485评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,535评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,235评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,793评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,863评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,096评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,654评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,233评论 2 341

推荐阅读更多精彩内容