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

image.png

部署热更并测试（IOS）

IOS 版本的测试，我使用了 TestFlight + CodePush 的方式，将1.0.0版本的正式包在 TestFlight 上分发，然后发布基于1.0.0版本的 CodePush 热更新。发布方式同 Android。

Apple TestFlight 也改良了，可以公开匿名邀请测试用户了：