使用CodePush实现React Native的热更新（热更新服务在本地搭建）

1、搭建热更新服务器

准备工作
本人使用code-push-server搭建热更新服务器，code-push-server，基于node.js，在安装code-push-server前，需要安装好：

• Node.js环境
• MySQL数据库
• PM2守护进程

建议创建CentOS虚拟机，在虚拟机中运行热更新服务，可参考安装CentOS + Node + PM2 + MariaDB(MySQL) + Git的基础环境。

开始搭建
（1）安装code-push-server:

npm install code-push-server@latest -g

（2）初始化数据库

code-push-server-db init --dbhost "127.0.0.1" --dbport "3306"  --dbuser "root" --dbpassword "123456" #root、123456替换成自己的用户名和密码

（3）编辑config.js
进入code-push-server的目录(在node.js安装目录下的lib/node_module下)，config.js位置在code-push-server/config目录下。

cd /usr/local/nodejs/lib/node_modules/code-push-server/config/
vi config.js

对config.js做出以下修改：

• local.storageDir 改成自己本地目录且保证当前用户有读写权限（推荐使用root用户）；
• local.downloadUrl 根据自己情况替换（本地改为127.0.0.1，虚拟机改为192.168开头的IP）；
• common.dataDir 改成自己本地目录且保证当前用户有读写权限，更新包即存储在该目录下；
• jwt.tokenSecret 从 https://www.grc.com/passwords.htm网站中获取随机串替换INSERT_RANDOM_TOKEN_KEY；
• db 配置数据库的初始化信息: username,password,host,port

（4）运行并查看

pm2 start code-push-server #启动code-push-server服务
pm2 list #查看运行状况
pm2 log code-push-server #实时查看code-push-server的运行日志

2、安装热更新服务客户端

接下来的工作请在React Native开发环境中进行（本人在Windows进行React Native，接下来的工作即在Windows中进行）
（1）安装code-push-cli

npm install code-push-cli@lastest -g

（2）创建code push app

code-push app add <你的应用名> <平台> react-native #应用名建议设为<实际应用名+平台名>

例如：

code-push app add demo-android android react-native

查看已创建的app：

code-push app list

查看已创建app的Deployment Key（后面要用到）:

code-push deployment list <应用名>  -k

3、配置React Native

（1）安装react-native-code-push
在React Native App项目目录下运行：

npm install react-native-code-push --save

接下来基于React Native 0.60及以上版本和Android介绍配置过程，其他版本可参考Plugin Installation for React Native lower than 0.60 (Android)
iOS可参考iOS Setup

（2）在android/app/build.gradle中添加codepush.gradle构建任务

...
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...

（3）修改MainApplication.java(第一部分)

import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

（4）将对应的code push app的Deployment Key增加到strings.xml中：

<resources>
     ...
     <string moduleConfig="true" name="CodePushDeploymentKey">对应的的Deployment Key</string>
 </resources>

（5）修改MainApplication.java(第二部分)

import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
        @Override
        protected List<ReactPackage> getPackages() {
          return new ArrayList<>(Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              new CodePush(getResources().getString(R.string.CodePushDeploymentKey), getApplicationContext(), BuildConfig.DEBUG, "热更新服务器地址（如http://127.0.0.1:3000）")
          ));
        }
    };
}

更多更完整的过程请参考react-native-code-push 官方github：https://github.com/microsoft/react-native-code-push
（6）修改index.js

import CodePush from 'react-native-code-push';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

const codePushOptions = {
    checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,	//onResume时检测是否可更新
    updateDialog: true,		//发现可更新时是否显示对话框
};

const CodePushApp = CodePush(codePushOptions)(App);
AppRegistry.registerComponent(appName, () => CodePushApp);

更多API和可配置项可参考JavaScript API Reference
（7）运行release版的React Native

react-native run-android --variant release

（8）对React Native程序进行修改（改变样式或者文字，以验证热更新效果）

4、使用热更新服务客户端发布更新包

（1）发布更新包

code-push release-react <应用名> <平台> --t <版本> -d <Staging/Production...> --des <描述>

注意：版本指的是当前React Native App中android/app/build.gradle中versionName，而不是只更新包的版本，如不一致则检测不到是否可更新。
（2）在系统桌面中打开一次APP以触发检测，如果弹出对话框则说明检测到可用更新包，选择INSTALL，后退出（不是返回），再次启动APP即可看到更新后的效果。