美文网首页
ReactNative 搭建自己的热更新服务器(code-pus

ReactNative 搭建自己的热更新服务器(code-pus

作者: suphu | 来源:发表于2018-06-26 15:16 被阅读903次

    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

    相关文章

      网友评论

          本文标题:ReactNative 搭建自己的热更新服务器(code-pus

          本文链接:https://www.haomeiwen.com/subject/lvqmyftx.html