初衷

最近在做一些基于 RN 的產(chǎn)品預研工作，當預研開發(fā)進行到一定程度時，就需要“平時多用用”了，但是繼續(xù) RN 的 debug 版本，不管是 Android 還是 ios平臺，都會有煩人的 yellow box warning 提示，所以剛才完成掉一個原型產(chǎn)品的開發(fā)、測試、反饋閉環(huán)流程，也就是發(fā)布測試包、測試并使用、反饋以及重新發(fā)包。在 RN 的世界里，還多了一個 CodePush 熱更新的內(nèi)容，所以基本的流程會是 發(fā)布一個基線版本的正式包到應用分發(fā)平臺（TestFlightTop） -> 反饋 -> 陸續(xù)發(fā)布基于該基線版本的 Codepush 熱更新到熱更新服務 -> 反饋 -> 發(fā)布更新基線版本 。 產(chǎn)品形態(tài)怎么樣再說，但是開發(fā)測試閉環(huán)對個人開發(fā)者來說是很重要的一點，當然最好還是將設計加入閉環(huán)。

增加 CodePush 功能和服務

客戶端添加 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 值，這里先直接回車忽略，等部署時在生成和添加

服務端部署非微軟 CodePush 服務

# 安裝更新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 用戶名密碼配置進去
node_modules/code-push-server/config/config.js

# 啟動服務
export PORT=8080
export HOST=0.0.0.0
export NODE_ENV=production
code-push-server 1>/dev/null 2>&1 &

命令行登錄 CodePush 服務

# 執(zhí)行后會打開 web 管理頁面，默認登錄賬號為 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 就都是針對本次登錄操作了，如需更換，需要 code-push logout

注冊待發(fā)布應用到 CodePush 服務

# ios 和 Android 需要單獨添加
 ? 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

添加成功后，可以看到每個應用默認都會有兩個版本線，staging（我們認為是內(nèi)測版）和Production（正式版），但是為了方便，我會直接使用Production版本線進行發(fā)布。

部署熱更并測試（Android）

• 打一個使用 Production key 的 基線apk，版本號為1.0.0，安裝。

// 注意codepushkey 和服務地址
new CodePush(CODEPUSH_KEY, getApplicationContext(), BuildConfig.DEBUG, "http://app.airoubo.com:8080/"),

• 在1.0.0版本基線版本基礎上修改 js 代碼，生成基于該版本的熱更并部署：

# 將一個基于1.0.0版本的熱更新發(fā)布到 Android 的 Production 版本線上 
code-push release-react fantuan-android android --d Production --des "first codepush" --t 1.0.0

• 由于我們將 codepush sync 的邏輯放在了主頁面組件加載過程中，所以會在每次加載時都是查詢熱更，在下次啟動時應用更新，更新成功后，通過 codepush 命令行可以看到升級信息：

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 也改良了，可以公開匿名邀請測試用戶了：

image.png

但是繼續(xù)配合 TestFlight Top 這樣的平臺進行測試行為的管理會更加方便，可更加方便整合 Android/IOS 兩個平臺的測試分發(fā)。

TestFlight.top