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閱讀 227,797評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,179評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,628評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,642評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,444評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,948評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,040評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,185評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,717評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,602評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,794評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,316評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,045評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,418評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,671評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,414評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,750評論 2 370

推薦閱讀更多精彩內容