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

推荐阅读更多精彩内容