React-Native 雙平臺(tái)應(yīng)用的測試發(fā)布和 CodePush 熱更新部署

初衷

最近在做一些基于 RN 的產(chǎn)品預(yù)研工作万细,當(dāng)預(yù)研開發(fā)進(jìn)行到一定程度時(shí),就需要“平時(shí)多用用”了瓦戚,但是繼續(xù) RN 的 debug 版本匪燕,不管是 Android 還是 ios平臺(tái),都會(huì)有煩人的 yellow box warning 提示侮叮,所以剛才完成掉一個(gè)原型產(chǎn)品的開發(fā)避矢、測試、反饋閉環(huán)流程囊榜,也就是發(fā)布測試包审胸、測試并使用、反饋以及重新發(fā)包卸勺。在 RN 的世界里砂沛,還多了一個(gè) CodePush 熱更新的內(nèi)容,所以基本的流程會(huì)是 發(fā)布一個(gè)基線版本的正式包到應(yīng)用分發(fā)平臺(tái)(TestFlightTop) -> 反饋 -> 陸續(xù)發(fā)布基于該基線版本的 Codepush 熱更新到熱更新服務(wù) -> 反饋 -> 發(fā)布更新基線版本 曙求。 產(chǎn)品形態(tài)怎么樣再說碍庵,但是開發(fā)測試閉環(huán)對(duì)個(gè)人開發(fā)者來說是很重要的一點(diǎn),當(dāng)然最好還是將設(shè)計(jì)加入閉環(huán)悟狱。

增加 CodePush 功能和服務(wù)

客戶端添加 react-native-code-push 組件

npm install --save react-native-code-push
react-native link react-native-code-push
? What is your CodePush deployment key for Android (hit <ENTER> to ignore) 
? What is your CodePush deployment key for iOS (hit <ENTER> to ignore) 
# 詢問是否添加部署 key 值静浴,這里先直接回車忽略,等部署時(shí)在生成和添加

服務(wù)端部署非微軟 CodePush 服務(wù)

# 安裝更新node-js和npm
sudo apt-get install nodejs-dev
sudo apt-get install npm
sudo npm install -g n
sudo n stable
node -v
npm -v

# 安裝code-push-server
npm install code-push-server --save
sudo ln -s /data/codepush/node_modules/code-push-server/bin/db /usr/local/bin/code-push-server-db
sudo ln -s /data/codepush/node_modules/code-push-server/bin/www /usr/local/bin/code-push-server

# 初始化配置code-push-server芽淡, 傳入 mysql 的用戶名密碼
code-push-server-db init --dbhost localhost --dbuser root --dbpassword xxxx

# 配置 config马绝,將 mysql 用戶名密碼配置進(jìn)去
node_modules/code-push-server/config/config.js

# 啟動(dòng)服務(wù)
export PORT=8080
export HOST=0.0.0.0
export NODE_ENV=production
code-push-server 1>/dev/null 2>&1 &

命令行登錄 CodePush 服務(wù)

# 執(zhí)行后會(huì)打開 web 管理頁面,默認(rèn)登錄賬號(hào)為 admin/123456, 登錄后填入 token 值
code-push login http://app.airoubo.com:8080
Please login to Mobile Center in the browser window we've just opened.
Enter your token from the browser:  xxxxx
# 這以后挣菲,code-push 就都是針對(duì)本次登錄操作了富稻,如需更換,需要 code-push logout

注冊待發(fā)布應(yīng)用到 CodePush 服務(wù)

# ios 和 Android 需要單獨(dú)添加
 ? code-push app add fantuan-ios ios react-native
Successfully added the "fantuan-ios" app, along with the following default deployments:
┌────────────┬───────────────────────────────────────┐
│ Name       │ Deployment Key                        │
├────────────┼───────────────────────────────────────┤
│ Production │ tH1HvTgUq6FVrhqsv5MxCbZYLexxxxxsvXqog │
├────────────┼───────────────────────────────────────┤
│ Staging    │ yl1nhf3chhdcKDsMlczz5xxxxNxz4ksvOXqog │
└────────────┴───────────────────────────────────────┘
 ? code-push app add fantuan-android android react-native

添加成功后白胀,可以看到每個(gè)應(yīng)用默認(rèn)都會(huì)有兩個(gè)版本線椭赋,staging(我們認(rèn)為是內(nèi)測版)和Production(正式版),但是為了方便或杠,我會(huì)直接使用Production版本線進(jìn)行發(fā)布哪怔。

部署熱更并測試(Android)

  • 打一個(gè)使用 Production key 的 基線apk,版本號(hào)為1.0.0向抢,安裝认境。
// 注意codepushkey 和服務(wù)地址
new CodePush(CODEPUSH_KEY, getApplicationContext(), BuildConfig.DEBUG, "http://app.airoubo.com:8080/"),
  • 在1.0.0版本基線版本基礎(chǔ)上修改 js 代碼,生成基于該版本的熱更并部署:
# 將一個(gè)基于1.0.0版本的熱更新發(fā)布到 Android 的 Production 版本線上 
code-push release-react fantuan-android android --d Production --des "first codepush" --t 1.0.0
  • 由于我們將 codepush sync 的邏輯放在了主頁面組件加載過程中挟鸠,所以會(huì)在每次加載時(shí)都是查詢熱更叉信,在下次啟動(dòng)時(shí)應(yīng)用更新,更新成功后艘希,通過 codepush 命令行可以看到升級(jí)信息:
componentDidMount() {
  //增加最簡單的熱更新觸發(fā)方法
codePush.sync();
}

 ? code-push deployment ls fantuan-android -k
image.png

部署熱更并測試(IOS)

IOS 版本的測試硼身,我使用了 TestFlight + CodePush 的方式硅急,將1.0.0版本的正式包在 TestFlight 上分發(fā),然后發(fā)布基于1.0.0版本的 CodePush 熱更新佳遂。發(fā)布方式同 Android营袜。

Apple TestFlight 也改良了,可以公開匿名邀請(qǐng)測試用戶了:


image.png

但是繼續(xù)配合 TestFlight Top 這樣的平臺(tái)進(jìn)行測試行為的管理會(huì)更加方便丑罪,可更加方便整合 Android/IOS 兩個(gè)平臺(tái)的測試分發(fā)荚板。

TestFlight.top

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市吩屹,隨后出現(xiàn)的幾起案子啸驯,更是在濱河造成了極大的恐慌,老刑警劉巖祟峦,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異徙鱼,居然都是意外死亡宅楞,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門袱吆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來厌衙,“玉大人,你說我怎么就攤上這事绞绒∩粝#” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵蓬衡,是天一觀的道長喻杈。 經(jīng)常有香客問我,道長狰晚,這世上最難降的妖魔是什么筒饰? 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮壁晒,結(jié)果婚禮上瓷们,老公的妹妹穿的比我還像新娘。我一直安慰自己秒咐,他們只是感情好谬晕,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著携取,像睡著了一般攒钳。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上歹茶,一...
    開封第一講書人閱讀 51,146評(píng)論 1 297
  • 那天夕玩,我揣著相機(jī)與錄音你弦,去河邊找鬼。 笑死燎孟,一個(gè)胖子當(dāng)著我的面吹牛禽作,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播揩页,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼旷偿,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了爆侣?” 一聲冷哼從身側(cè)響起萍程,我...
    開封第一講書人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎兔仰,沒想到半個(gè)月后茫负,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡乎赴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年忍法,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片榕吼。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡饿序,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出羹蚣,到底是詐尸還是另有隱情原探,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布顽素,位于F島的核電站咽弦,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏戈抄。R本人自食惡果不足惜离唬,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望划鸽。 院中可真熱鬧输莺,春花似錦、人聲如沸裸诽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽丈冬。三九已至嘱函,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間埂蕊,已是汗流浹背往弓。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來泰國打工疏唾, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人函似。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓槐脏,卻偏偏與公主長得像,于是被迫代替她去往敵國和親撇寞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子顿天,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容