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-pushreact-native link react-native-code-push? What is your CodePush deployment key for Android (hit 
    
      to ignore) ? What is your CodePush deployment key for iOS (hit 
     
       to ignore) # 询问是否添加部署 key 值，这里先直接回车忽略，等部署时在生成和添加复制代码

服务端部署非微软 CodePush 服务

# 安装更新node-js和npmsudo apt-get install nodejs-devsudo apt-get install npmsudo npm install -g nsudo n stablenode -vnpm -v# 安装code-push-servernpm install code-push-server --savesudo ln -s /data/codepush/node_modules/code-push-server/bin/db /usr/local/bin/code-push-server-dbsudo 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=8080export HOST=0.0.0.0export NODE_ENV=productioncode-push-server 1>/dev/null 2>&1 &复制代码

命令行登录 CodePush 服务

# 执行后会打开 web 管理页面，默认登录账号为 admin/123456, 登录后填入 token 值code-push login http://app.airoubo.com:8080Please 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-nativeSuccessfully 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 两个平台的测试分发。