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<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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容