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说明:
- 推荐安装 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<ReactPackage> getPackages() {
return Arrays.<ReactPackage>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 <应用名称> <Bundles所在目录> <对应的应用版本> --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
网友评论