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

前言

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

简介

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

环境

nodejs

mysql 5.6

windows/macOS/Linux

一、安装mysql(其他环境自行对应mysql安装)

以windows说明：

推荐安装 mysql 5.6 下载地址

cd到解压后的bin目录

向windows注册mysql服务 mysqld.exe --install MySql --defaults-file="D:/MySql/mysql-5.6.40-winx64/my-default.ini" 后面地址修改自己的

打开本地服务，可手动启动或 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