初衷
最近在做一些基于 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
部署熱更并測試(IOS)
IOS 版本的測試硼身,我使用了 TestFlight + CodePush 的方式硅急,將1.0.0版本的正式包在 TestFlight 上分發(fā),然后發(fā)布基于1.0.0版本的 CodePush 熱更新佳遂。發(fā)布方式同 Android营袜。
Apple TestFlight 也改良了,可以公開匿名邀請(qǐng)測試用戶了:
但是繼續(xù)配合 TestFlight Top 這樣的平臺(tái)進(jìn)行測試行為的管理會(huì)更加方便丑罪,可更加方便整合 Android/IOS 兩個(gè)平臺(tái)的測試分發(fā)荚板。