React-Native 雙平臺應用的測試發佈和 CodePush 熱更新部署

初衷

最近在作一些基於 RN 的產品預研工做，當預研開發進行到必定程度時，就須要「平時多用用」了，可是繼續 RN 的 debug 版本，無論是 Android 仍是 ios平臺，都會有煩人的 yellow box warning 提示，因此剛纔完成掉一個原型產品的開發、測試、反饋閉環流程，也就是發佈測試包、測試並使用、反饋以及從新發包。在 RN 的世界裏，還多了一個 CodePush 熱更新的內容，因此基本的流程會是 發佈一個基線版本的正式包到應用分發平臺（TestFlightTop） -> 反饋 -> 陸續發佈基於該基線版本的 Codepush 熱更新到熱更新服務 -> 反饋 -> 發佈更新基線版本 。 產品形態怎麼樣再說，可是開發測試閉環對我的開發者來講是很重要的一點，固然最好仍是將設計加入閉環。

增長 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 服務

# 執行後會打開 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 複製代碼

註冊待發布應用到 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（咱們認爲是內測版）和Production（正式版），可是爲了方便，我會直接使用Production版本線進行發佈。

部署熱更並測試（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版本的熱更新發布到 Android 的 Production 版本線上 
code-push release-react fantuan-android android --d Production --des "first codepush" --t 1.0.0
複製代碼

• 因爲咱們將 codepush sync 的邏輯放在了主頁面組件加載過程當中，因此會在每次加載時都是查詢熱更，在下次啓動時應用更新，更新成功後，經過 codepush 命令行能夠看到升級信息：

componentDidMount() {
  //增長最簡單的熱更新觸發方法
codePush.sync();
}

複製代碼

» code-push deployment ls fantuan-android -k
複製代碼

部署熱更並測試（IOS）

IOS 版本的測試，我使用了 TestFlight + CodePush 的方式，將1.0.0版本的正式包在 TestFlight 上分發，而後發佈基於1.0.0版本的 CodePush 熱更新。發佈方式同 Android。

Apple TestFlight 也改良了，能夠公開匿名邀請測試用戶了：

可是繼續配合 TestFlight Top 這樣的平臺進行測試行爲的管理會更加方便，可更加方便整合 Android/IOS 兩個平臺的測試分發。

TestFlight.top