醉临武-临武县第一中学官网

React Native应用部署CodePush热更新最新最全的教程

http://microsoft.github.io/code-push/docs/getting-started.html  微软codepush官方文档

https://github.com/Microsoft/react-native-code-push  github库

https://github.com/Microsoft/react-native-code-push/tree/master/Examples/CodePushDemoApp  官方demo

网友文章:

1.http://blog.csdn.net/changsimeng/article/details/64444672

2.http://blog.csdn.net/u013718120/article/details/55096393

3.http://www.jianshu.com/p/e1a9302cfdff

4.http://bbs.reactnative.cn/topic/725/code-push-%E7%83%AD%E6%9B%B4%E6%96%B0%E4%BD%BF%E7%94%A8%E8%AF%A6%E7%BB%86%E8%AF%B4%E6%98%8E%E5%92%8C%E6%95%99%E7%A8%8B

5.http://bbs.it-home.org/thread-72488-1-1.html

6.http://www.jianshu.com/p/6e96c6038d80


1. code-push常用命令

  • 安装: npm install -g code-push-cli

  • 注册账号: code-push register

  • 登陆: code-push login

  • 注销: code-push logout

  • 添加项目: code-push app add [app名称]

  • 删除项目: code-push app remove [app名称]

  • 列出账号下的所有项目: code-push app list

  • 显示登陆的token: code-push access-key ls

  • 删除某个access-key: code-push access-key rm <accessKey>

  • 添加协作人员:code-push collaborator add <appName> next@126.com

  • 部署一个环境: code-push deployment add <appName> <deploymentName>

  • 删除部署: code-push deployment rm <appName>

  • 列出应用的部署: code-push deployment ls <appName>

  • 查询部署环境的key: code-push deployment ls <appName> -k

  • 查看部署的历史版本信息: code-push deployment history <appName> <deploymentNmae>

  • 重命名一个部署: code-push deployment rename <appName> <currentDeploymentName> <newDeploymentName>

在终端输入 npm install -g code-push-cli,就可以安装了。 
安装完毕后,输入 code-push -v查看版本,如看到版本代表成功。

QQͼƬ20170915113454.png

创建一个CodePush 账号

在终端输入code-push register,会打开如下注册页面让你选择授权账号。

QQ图片20170915113428.png 

2. 集成到项目

ios安装方法:

  1. 在项目目录下, 安装CodePush插件

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

  2. 引入到Xcode工程, 有两种方法, 第一种手动加入, 第二种使用rnpm自动引入, 第三种使用cocoaPods接入:

    • 修改Podfile文件:(注意路径正确): pod 'CodePush', :path => './node_modules/react-native-code-push'

    • 执行命令行更新pod:pod install 或者 pod install --verbose --no-repo-update

    • 安装rnpm: npm -g install rnpm xcode

    • 使用rnpm: rnpm link

    • 第二种:

    • 第三种:

  3. 在Xcode里AppDelegate.m里 修改

    //  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];#ifdef DEBUG
      jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];#else
      jsCodeLocation = [CodePush bundleURL];#endif
  4. 修改info.plist 添加CodePushDeploymentKey键值对中的Staging的值,Deployment Key可以通过命令code-push deployment ls appName --displayKeys进行获取.也可以使用$(CODEPUSH_KEY)来自动适配ProductionStaging环境, 如果填的是Production的key, 则打的包就是Production的包, 如果填的是Staging的key, 则打的包就是Staging的包.

  5. 修改info.plist 中 Bundle versions string, short的值改成三位数字,如1.0.0, 不然会报错

安卓的安装方法:

第一步。在应用中安装react-native插件,npm install --save react-native-code-push

第二步。在Anroid project中安装插件。
CodePush提供了两种方式:RNPM 和 Manual
如果你不想依赖其他工具或者愿意走多几步额外的步骤,可以使用 Manual。不过像我这么懒的代码从业者,毫不犹豫地选择了 RNPM 这个实用工具。

第三步 运行 npm i rnpm 安装 RNPM。

第四步 运行 rnpm link react-native-code-push。这条命令将会自动帮我们在anroid文件中添加好设置(其实就是通过Manual的安装步骤)

第五步 在 android/app/build.gradle文件里面添加额为的创建任务:

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

第六步 运行 code-push deployment ls <appName>获取 部署秘钥。默认的部署名是 staging,所以 部署秘钥(deployment key ) 就是 staging的可以。

  1. 打开你的应用程序的build.gradle文件(例如android/app/build.gradle在标准的React Native项目中)

  2. 查找android { buildTypes {} }部分并buildConfigField为您debugrelease构建类型定义条目,分别引用您StagingProduction部署密钥。如果您愿意,您可以在gradle.properties文件中定义关键文字,然后在这里引用它们。无论哪种方式都会奏效,这只是个人偏好的问题。

android {    ...
    buildTypes {
        debug {    
                ...     
           // Note: CodePush updates should not be tested in Debug mode as they are overriden by the RN packager. However, because CodePush checks for updates in all modes, we must supply a key.
            buildConfigField "String", "CODEPUSH_KEY", '""'
            ...
        }

        releaseStaging {   
                ...
            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_STAGING_KEY>"'
            ...
        }

        release {       
             ...
            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
            ...
        }
    }    ...
}


第七步 添加配置。我们需要让app向CodePush咨询JS bundle的所在位置,这样CodePush就可以控制版本。更新 MainActivity.java文件:


QQ截图20170915114732.png




第八步 在 android/app/build.gradle中有个 android.defaultConfig.versionName属性,我们需要把 应用版本改成 1.0.0(默认是1.0,但是codepush需要三位数)。

    android{
        defaultConfig{
            versionName "1.0.0"
        }
    }

第九步 CodePush 插件下载和关联完毕后,就剩下在应用中部署更新控制策略:

  • 在 js中加载 CodePush模块: import codePush from 'react-native-code-push'

  • 在 componentDidMount中调用 sync方法,后台请求更新 codePush.sync()

以上就是在app中添加sdk和配置了。具体的还可以参考官方文档

3. 发布更新

自动打包发布

自动打包你的js和资源文件成bundle并且上传发布到CodePush的服务器(注意: 默认是Staging环境, 还不懂怎样切换Production环境):

code-push release-react MyApp ios --plistFile ../MyApp/Info.plist -t "1.0.0" --des "测试完毕还原原状" -m true -d development

手动打包发布

自己打包有两种: 第一种只是更新js文件(可整个项目的js文件/当个js文件), 第二种js文件+images文件(release 整个文件夹)

第一种单单js文件:

1. 创建一个bundles文件夹
打包命令: 
// react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试 打包整个项目的js文件: 
react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./bundles/main.bundle --dev false2. 发布更新
发布命令: 
// code-push release <应用名称> <Bundles所在目录> <对应的应用版本> --deploymentName 更新环境 --description 更新描述 --mandatory 是否强制更新例如:
code-push release HybridDemo ./bundles/main.bundle 1.0.0 --deploymentName Production --description "第四次更新" --mandatory true

第二种js文件+图片资源:

// 1. –assets-dest 后就是放图片的文件夹路径react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./bundles/qqm.jsbundle --assets-dest ./bundles --dev false// 2. push bundles文件code-push <release/debug> <projectName(与注册的app同名)><bundle文件名> <版本号>
例如: 
code-push release appName ./bundles 1.0.0

例子:

code-push release Rgxdemo ./bundles/ 1.0.2 --deploymentName Production  --description "1.临武一中的官网是www.051z.cc" --mandatory false

更新规则

你APP内plist文件写的版本号可能是1.0.0,所以你的reactjs打包上传的版本也要是1.0.0(而不是1.0.1这样递增),你需要和APP保持一致,然后服务器会根据你最新上传的且和APP一样的版本作为最新版。

范围表达式

  • 1.2.3 仅仅只有1.2.3的版本

  • * 所有版本

  • 1.2.x 主要版本1,次要版本2的任何修补程序版本

  • 1.2.3 - 1.2.7 1.2.3版本到1.2.7版本

  • >=1.2.3 <1.2.7 大于等于1.2.3版本小于1.2.7的版本

  • ~1.2.3 大于等于1.2.3版本小于1.3.0的版本

  • ^1.2.3 大于等于1.2.3版本小于2.0.0的版本

修改更新

Usage: code-push patch <appName> <deploymentName> [--label <label>] [--description <description>] [--disabled] [--mandatory] [--rollout <rolloutPercentage>]选项:
  --label, -l           指定标签版本更新,默认最新版本 [string] [默认值: null]
  --description, --des  描述  [string] [默认值: null]
  --disabled, -x        是否禁用该更新  [boolean] [默认值: null]
  --mandatory, -m       是否强制更新  [boolean] [默认值: null]
  --rollout, -r         此更新推送用户的百分比,此值仅可以从先前的值增加。  [string] [默认值: null]示例:
  code-push patch MyApp Production --des "Updated description" -r 50         修改"MyApp"的"Production"部署中最新更新的描述 ,并且更新推送范围为50%
  code-push patch MyApp Production -l v3 --des "Updated description for v3"  修改"MyApp"的"Production"部署中标签为v3的更新的描述

升级环境

Usage: code-push promote <appName> <sourceDeploymentName> <destDeploymentName> [--description <description>] [--mandatory] [--rollout <rolloutPercentage>]

选项:
  --description, --des  描述  [string] [默认值: null]
  --disabled, -x        是否禁用该更新  [boolean] [默认值: null]
  --mandatory, -m       是否强制更新  [boolean] [默认值: null]
  --rollout, -r         此促进更新推送用户的百分比  [string] [默认值: null]

示例:  code-push promote MyApp Staging Production                 
       "MyApp"中"Staging"部署的最新更新发布到"Production"部署中
       code-push promote MyApp Staging Production --des "Production rollout" -r 25 
       "MyApp"中"Staging"部署的最新更新发布到"Production"部署中, 并且只推送25%的用户

回滚更新

Usage: code-push rollback <appName> <deploymentName> [--targetRelease <releaseLabel>]

选项:
  --targetRelease, -r  指定回归到哪个标签,默认是回滚到上一个更新  [string] [默认值: null]

示例:  code-push rollback MyApp Production           
       "MyApp"中"Production"部署执行回滚 
        code-push rollback MyApp Production --targetRelease v4 
         "MyApp"中"Production"部署执行回滚,回滚到v4这个标签版本

js内写法

如果有发布热更新时 mandatory 则 Code Push 会根据 mandatory 是 true 或false 来控制应用是否强制更新。默认情况下 mandatory 为 false 即不强制更新。mandatory 为 false时以下三种设置方法才有效

// 第一种:codePush.sync();
// 第二种:codePush.sync({   
 updateDialog: false, 
 installMode: codePush.InstallMode.IMMEDIATE
});
// 第三种:CodePush.sync({   
 deploymentKey: 'deployment-key-here',  
   updateDialog: {     
      optionalIgnoreButtonLabel: '稍后', 
      optionalInstallButtonLabel: '后台更新',
      optionalUpdateMessage: '有新版本了,是否更新?', 
      title: '更新提示'
    },   
     installMode: CodePush.InstallMode.IMMEDIATE
});
  • 三种更新的策略: 配置到installMode: 之后即可生效

    • IMMEDIATE 立即更新APP

    • ON_NEXT_RESTART 到下一次启动应用时

    • ON_NEXT_RESUME 当应用从后台返回时

项目实际发布时使用命令

  1. 登录: code-push login

  2. 列出账号下的所有项目: code-push app list

  3. 列出应用的部署: code-push deployment ls MyApp

  4. 查看部署的历史版本信息: code-push deployment history MyApp Debug

  5. 发布版本更新: code-push release-react MyApp ios -d Staging -p ../MyApp/Info.plist --des 'UI调整' -t '1.0.2'

  6. 把更新推到另一个环境: code-push promote QQMProjec Staging Production

  7. 关闭某个版本: code-push patch MyApp Staging -l v13 --des '关闭v13' -x true