React-Native 熱部署 熱更新

CodePush 是提供給 React Native 和 Cordova 開發(fā)者直接部署移動(dòng)應(yīng)用更新給用戶設(shè)備的云服務(wù)。CodePush 作為一個(gè)中央倉(cāng)庫(kù),開發(fā)者可以推送更新到 (JS, HTML, CSS and images),應(yīng)用可以從客戶端 SDKs 里面查詢更新。CodePush 可以讓應(yīng)用有更多的可確定性,也可以讓你直接接觸用戶群。在修復(fù)一些小問題和添加新特性的時(shí)候,不需要經(jīng)過二進(jìn)制打包,可以直接推送代碼進(jìn)行實(shí)時(shí)更新。

CodePush 可以進(jìn)行實(shí)時(shí)的推送代碼更新:

*直接對(duì)用戶部署代碼更新

*管理 Alpha,Beta 和生產(chǎn)環(huán)境應(yīng)用

*支持 Cordova 和 React Native

官方對(duì)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.

一、環(huán)境準(zhǔn)備


1.安裝Code-push cli

$ npm install -g code-push-cli

2、 注冊(cè)CodePush賬戶

$ code-push register

執(zhí)行以上命令將會(huì)自動(dòng)打開如下圖所示的注冊(cè)頁(yè)面:

注冊(cè)頁(yè)面

本文使用GitHub賬戶進(jìn)行注冊(cè),注冊(cè)成功后將會(huì)生成如下圖所示相應(yīng)的access token:

access token

在終端輸入剛生成的access token:

3、添加CodePush應(yīng)用

$ code-push app add XXX ? ? ? ? ? ? ?//xxx ? 為你要熱部署的app name

4、查看應(yīng)用?

成功后我們可以看到有兩個(gè)發(fā)布鍵值。一個(gè)Production是對(duì)應(yīng)生產(chǎn)環(huán)境的,二Staging是對(duì)應(yīng)開發(fā)環(huán)境的。這個(gè)值在后面我們集成工程里面要用到。

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

在項(xiàng)目工程安裝CodePush,一般有兩三種方法。

一種是cocoaPods接入,一種是手動(dòng)接入,本文采用的是手動(dòng)接入。

1、cocoaPods?

// 新增

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

// 安裝

pod install

2、手動(dòng)接入?

1) 在命令行下,進(jìn)入整個(gè)工程的根目錄,安裝CodePush。

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

2)引入工程 ?

此處有兩種方法 :

a.


將react-native-code-push文件夾中?CodePush.xcodeproj?直接拉入項(xiàng)目中Libraries中


Libraries/CodePush.xcodeproj/Products

中的

libCodePush.a

直接拖入 Link Binary With Libraries中

點(diǎn)擊Link Binary With Libraries的加號(hào),選擇

libz.tbd

加入

在Build Settings的Header Search Paths那一項(xiàng)中加入

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


當(dāng)然上面是一種蠢方法。[doge],下面是便捷的一鍵做法。

b npm install 安裝以后?

直接使用rnpm神器?

安裝?

$ npm -g install rnpm xcode

使用?

rnpm link

然后就省略了a步驟那么多步操作,是不是很簡(jiǎn)單,一步步按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鍵值對(duì),Deployment Key可以通過以下命令進(jìn)行獲?。?還可以獲取熱部署后,包更新的詳情)。


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


一個(gè)Production是對(duì)應(yīng)生產(chǎn)環(huán)境的,二Staging是對(duì)應(yīng)開發(fā)環(huán)境的。

添加后如圖?


并在

Info.plist

中將

Bundle versions string, short

的值修改為

1.0.0 (三位 務(wù)必三位 否則codepush 會(huì)出錯(cuò))

3.React Native項(xiàng)目的入口文件,做如下修改:

在需要啟動(dòng)代碼更新的位置里面,引用CodePush,并且調(diào)用Code Push的更新接口。

一般在componentDidMount()調(diào)用。

四、發(fā)布更新?

1)發(fā)布更新 (JavaScript-only)

當(dāng)你修改js文件的時(shí)候,并且想立刻發(fā)布。則僅僅需要以下的操作:

將你修改的js文件(當(dāng)前文件是index.ios.js)打包為二進(jìn)制文件,放入指定的地方(當(dāng)前位置為根目錄)。

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

將二進(jìn)制文件push到staging 環(huán)境中

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

eg:

code-push release AwesomeProject2? codepush.js 1.0.0

2)發(fā)布更新 (JavaScript + images)

–assets-dest 就是你放圖片的位置(當(dāng)前僅僅是做測(cè)試,實(shí)際上最好建個(gè)文件夾專門存入相關(guān)圖片)

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(與注冊(cè)的app同名)><bundle文件名> <版本號(hào)>

eg:

code-push release AwesomeProject2? main.jsbundle 1.0.0



Q&A

1.更新規(guī)則?

2.更新后都需要重啟才能看到最新的變化 再次進(jìn)入后要等一會(huì)。TODO:還要驗(yàn)證后確定穩(wěn)定時(shí)機(jī)。

3.查看歷史上傳過的版本:

code-push deployment history 你注冊(cè)的appname Staging

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容