React-Native 双平台应用的测试发布和 CodePush 热更新部署

0.245字数 646阅读 428

初衷

最近在做一些基于 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 也改良了,可以公开匿名邀请测试用户了:


image.png

但是继续配合 TestFlight Top 这样的平台进行测试行为的管理会更加方便,可更加方便整合 Android/IOS 两个平台的测试分发。

TestFlight.top

推荐阅读更多精彩内容