ReactNative 搭建自己的热更新服务器(code-push-server)

https://github.com/lisong/code-push-server

前言

ReactNative的热更新服务，目前开源较好的是微软的react-native-code-push框架，功能全面，支持增量更新。 但是服务器在国外，且用别人的服务器的不确定因素等。。so,我们现在根据微软的功能搭建一套属于自己的热更新服务。

简介

 code-push-server是一个开源项目，基于 nodejs + mysql 搭建自己的热更新服务器

环境

nodejs

mysql 5.6

windows/macOS/Linux

一、安装mysql（其他环境自行对应mysql安装）

以windows说明：

1. 推荐安装 mysql 5.6 下载地址
2. cd到解压后的bin目录
3. 向windows注册mysql服务 mysqld.exe --install MySql --defaults-file="D:/MySql/mysql-5.6.40-winx64/my-default.ini" 后面地址修改自己的
4. 打开本地服务，可手动启动或 net start mysql

二、本地安装code-push-serve

下载代码到本地：

git clone https://github.com/lisong/code-push-server.git

clone完毕后执行，npm需要安装nodejs(不再阐述)

cd code-push-server && npm install

修改config/config.js 文件，在 db 对象中添加数据库信息，参考如下配置，对应自己的用户名密码，数据库名称

db: {
    username: "root",   //
    password: "123456",
    database: "codepush",
    host: "127.0.0.1",
    port: 3306,
    dialect: "mysql"
  }

初始化服务，项目根目录（code-push-server）下执行命令

node ./bin/db init --dbhost localhost --dbuser root —dbpassword  #初始化mysql数据库

三、配置服务器-存储在本地(或者看配置存储在七牛云或者阿里云等。)

修改config/config.js

将 common 对象中的 storageType改为 local

新建文件存储目录 data，storage，并修改配置文件

downloadUrl修改成本地地址

local: {
    // Binary files storage dir, Do not use tmpdir and it's public download dir.
    storageDir: process.env.STORAGE_DIR || "D:/local-data/storageDir",
    // Binary files download host address which Code Push Server listen to. the files storage in storageDir.
    downloadUrl: process.env.LOCAL_DOWNLOAD_URL || "http://192.168.197.143:3000/download",
    // public static download spacename.
    public: process.env.PUBLIC || '/download'
  },
  common: {
    /*
     * tryLoginTimes is control login error times to avoid force attack.
     * if value is 0, no limit for login auth, it may not safe for account. when it's a number, it means you can
     * try that times today. but it need config redis server.
     */
    tryLoginTimes: 0,
    // CodePush Web(https://github.com/lisong/code-push-web) login address.
    //codePushWebUrl: "http://127.0.0.1:3001/login",
    // create patch updates's number. default value is 3
    diffNums: 3,
    // data dir for caclulate diff files. it's optimization.
    dataDir: process.env.DATA_DIR || "D:/local-data/dataDir",
    // storageType which is your binary package files store. options value is ("local" | "qiniu" | "s3")
    storageType: process.env.STORAGE_TYPE || "local",
    // options value is (true | false), when it's true, it will cache updateCheck results in redis.
    updateCheckCache: false
  },

启动服务

 node ./bin/www   //无报错信息即为正常启动，可以在浏览器中输入 http://127.0.0.1:3000查看，默认用户名密码是 admin 123456

下面是客户端ReactNative代码

四、项目关联

进入reactnative 项目根目录执行命令查看当前是否登录，先保证没有别的账号正在登录

code-push whoami

如果报错如下，表示没有登录

[Error]  You are not currently logged in. Run the 'code-push login' command to authenticate with the CodePush server.

如果没有报错 且显示邮箱账号，则表示已经登录账户，我们要先注销当前账号

code-push logout

成功注销后执行登录指令，登录服务器

code-push login http://localhost:3000

输入账号和密码 admin 123456 登录后点击按钮 获取token 并复制token到命令行中，并回车确认

Successfully logged-in. //提示此表示登录成功

ok,codepush和我们自建的服务器关联起来了.

五、注册应用

项目根目录下执行

code-push app add Stock-android android react-native  //项目名+iOS/android后缀

生成的key

│ Production │ lxJBDwTkl2qE8tsxG4sn7jqzu8nl4ksvPXqog │
├────────────┼───────────────────────────────────────┤
│ Staging    │ nJ3oSQmb64bxRqTP9mwMhZuZLIm94ksvOXqog │

注：Production、Staging表示不同环境的key。

六、项目中查看对应的环境版本

code-push deployment ls Stock-android

七、ReactNative项目中导入CodePush代码

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

在启动的js代码中加入(根据需求调整)：

 componentWillMount(){
        CodePush.disallowRestart();//页面加载的禁止重启，在加载完了可以允许重启
    }

    componentDidMount(){
        CodePush.allowRestart();//在加载完了可以允许重启

        this.syncImmediate();
    }


    syncImmediate() {
        CodePush.sync(
            { installMode: CodePush.InstallMode.IMMEDIATE,//启动模式三种：ON_NEXT_RESUME、ON_NEXT_RESTART、IMMEDIATE
                updateDialog: {
                    appendReleaseDescription:true,//是否显示更新description，默认为false
                    descriptionPrefix:"更新内容：",//更新说明的前缀。 默认是” Description:
                    mandatoryContinueButtonLabel:"立即更新",//强制更新的按钮文字，默认为continue
                    mandatoryUpdateMessage:"",//- 强制更新时，更新通知. Defaults to “An update is available that must be installed.”.
                    optionalIgnoreButtonLabel: '稍后',//非强制更新时，取消按钮文字,默认是ignore
                    optionalInstallButtonLabel: '后台更新',//非强制更新时，确认文字. Defaults to “Install”
                    optionalUpdateMessage: '有新版本了，是否更新？',//非强制更新时，更新通知. Defaults to “An update is available. Would you like to install it?”.
                    title: '更新提示'//要显示的更新通知的标题. Defaults to “Update available”.
                },
            },
        );
    }

八、Ardoid项目导入CodePush代码

settings.gradle加入：

include ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

build.gradle修改：

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

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile project(':react-native-code-push')
}

MainApplication文件下修改

 private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

   @Override
   protected String getJSBundleFile() {
        return CodePush.getJSBundleFile();
   }
    
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
    //第一个参数是刚刚申请的key（可以根据环境配置）
    //第三个参数是服务器的URL
    @Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
          new CodePush(" nJ3oSQmb64bxRqTP9mwMhZuZLIm94ksvOXqog ", MainApplication.this, BuildConfig.DEBUG,"http://你的IP:端口/")
      );
    }

打包发布(为了熟悉流程我们先本地打包，再上传)

1.项目根目录先创建一个bundles文件夹

mkdir bundles

2.打包成bundle文件

react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试。 

react-native bundle --platform android --entry-file index.js --bundle-output ./bundles/index.android.bundle --assets-dest ./bundles --dev false

3.发布到code push

code-push release <应用名称>  <对应的应用版本> --deploymentName： 更新环境 --description： 更新描述  --mandatory： 是否强制更新

code-push release Stock-android ./bundles/ 1.0.0 --deploymentName Staging  --description "1.首页文字修改。" --mandatory true

4.查看历史版本

测试版本更新：code-push deployment history 应用名 Staging/Production

code-push deployment history Stock-android Staging
    

windows下的问题

发布后，APP也收到到了版本更新的提示，但是下载地址一直错误404，后面尝试很多方法不行，下载了pm2管理，重启也无效，后重启电脑，重新 node ./bin/www 就可以。
好像是在开启服务后，再创建storageDir有问题。TODO