自建 CodePush 服务

CodePush 服务主要分为三个部分：服务端、客户端、React Native 项目。

一、服务端

服务端需要使用 code-push-server 和MySQL 所以需要先将这两个安装好。

1. 安装MySQL

官网下载后直接双击安装，下载地址；
打开“系统设置”，看到最新安装的MySQL，进入并启动服务。

2. 安装 code-push-server

屏幕快照 2018-10-31 下午5.03.47.png

屏幕快照 2018-10-31 下午5.04.00.png

作者发布了两种安装方式（npm安装或源码安装），在此我推荐使用源码安装，为后期我们要基于这个服务修改自己的网页，源码安装方便些。

• (1)、下载code-push-server代码

// clone代码
git clone https://github.com/lisong/code-push-server.git
// 进入项目并安装资源
cd code-push-server && npm install

• (2)、修改config/config.js 文件，在 db 对象中添加数据库信息，参考如下：

db: {
    username: process.env.RDS_USERNAME || "root",
    password: process.env.RDS_PASSWORD || "admin123",//你的MySQL访问密码,如果没有就null
    database: process.env.DATA_BASE || "codepush",//如果你init的时候指定了数据库名字的话，也需要改
    host: process.env.RDS_HOST || "127.0.0.1",
    port: process.env.RDS_PORT || 3306,
    dialect: "mysql",
    logging: false,
    operatorsAliases: false,
  },

(3)、创建数据库表

./bin/db init --dbhost localhost --dbuser root --dbpassword admin123 --dbname codepush

为了演示我重新创建一个

屏幕快照 2018-10-31 下午5.15.08.png

创建storage和data文件夹，用来保存打包好的资源，供用户更新下载，downloadUrl地址必须为服务器所在的地址，不然用户无法下载到包。主要配置如下：

46EF97E2-F543-4BF2-9FC0-8574CAD4E451.png

七牛对象储存地址

qiniu: {
    accessKey: "", //个人面板 > 秘钥管理 > AK
    secretKey: "",  //个人面板 > 秘钥管理 > SK
    bucketName: "faweapp",//储存空间名称
    downloadUrl: "http://babi.lhsea.com" //绑定的域名
  },

阿里云对象储存

oss: {
    accessKeyId: "",
    secretAccessKey: "",
    endpoint: "https://oss-cn-qingdao.aliyuncs.com",
    bucketName: "babizhibo",//储存空间名称
    prefix: "storage", // 目录文件夹名称
    downloadUrl: "http://babizhibo.oss-cn-qingdao.aliyuncs.com/storage", //下载地址
  },

• config.js文件路径：code-push-server/config/config.js

var os = require('os');

var config = {};
config.development = {
  // Config for database, only support mysql.
  db: {
    username: process.env.RDS_USERNAME || "root",
    password: process.env.RDS_PASSWORD || "admin123",//你的MySQL访问密码,如果没有就null
    database: process.env.DATA_BASE || "codepush",//如果你init的时候指定了数据库名字的话，也需要改
    host: process.env.RDS_HOST || "127.0.0.1",
    port: process.env.RDS_PORT || 3306,
    dialect: "mysql",
    logging: false,
    operatorsAliases: false,
  },
  // Config for qiniu (http://www.qiniu.com/) cloud storage when storageType value is "qiniu".
  qiniu: {
    accessKey: "",
    secretKey: "",
    bucketName: "faweapp",
    downloadUrl: "http://babi.lhsea.com" // Binary files download host address.http://pby2wik41.bkt.clouddn.com/Fi_BSD0I9yokJRdors-4LsZucE4_
  },
  // Config for Amazon s3 (https://aws.amazon.com/cn/s3/) storage when storageType value is "s3".
  s3: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
    sessionToken: process.env.AWS_SESSION_TOKEN, //(optional)
    bucketName: process.env.BUCKET_NAME,
    region: process.env.REGION,
    downloadUrl: process.env.DOWNLOAD_URL, // binary files download host address.
  },
  // Config for Aliyun OSS (https://www.aliyun.com/product/oss) when storageType value is "oss".
  oss: {
    accessKeyId: "",
    secretAccessKey: "",
    endpoint: "https://oss-cn-qingdao.aliyuncs.com",
    bucketName: "babizhibo",
    prefix: "storage", // Key prefix in object key
    downloadUrl: "http://babizhibo.oss-cn-qingdao.aliyuncs.com/storage", // binary files download host address.
  },
  // Config for tencentyun COS (https://cloud.tencent.com/product/cos) when storageType value is "oss".
  tencentcloud: {
    accessKeyId: "",
    secretAccessKey: "",
    bucketName: "",
    region: "",
    downloadUrl: "", // binary files download host address.
  },
  // Config for local storage when storageType value is "local".
  local: {
    // Binary files storage dir, Do not use tmpdir and it's public download dir.
    storageDir: process.env.STORAGE_DIR || "/Users/mac/Desktop/workspaces/storage",
    //文件下载地址 CodePush Server 地址 + '/download' download对应app.js里面的地址
    downloadUrl: process.env.LOCAL_DOWNLOAD_URL || "http://localhost:3000/download",//注意此地方是否是你的本机ip地址(如果是模拟器的话，无须更改）
    // public static download spacename.
    public: '/download'
  },
  jwt: {
    // Recommended: 63 random alpha-numeric characters
    // Generate using: https://www.grc.com/passwords.htm
    tokenSecret: process.env.TOKEN_SECRET ||'fnoQkK2w9zEp2Sj03lYaGCkWDgkVEvaTqrYPxbaZvq2MM3ivnXKNMLzrn96MTmn'
  },
  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 || "/Users/mac/Desktop/workspaces/data",
    // storageType which is your binary package files store. options value is ("local" | "qiniu" | "s3"| "oss" || "tencentcloud")
    //选择存储类型，目前支持local,oss,qiniu,s3配置
    storageType: process.env.STORAGE_TYPE || "qiniu",
    // options value is (true | false), when it's true, it will cache updateCheck results in redis.
    updateCheckCache: false,
    // options value is (true | false), when it's true, it will cache rollout results in redis
    rolloutClientUniqueIdCache: false,
  },

(5)、改好之后，启动服务

./bin/www

屏幕快照 2018-10-31 下午5.27.59.png

(6)、进入项目根目录

cd /Users/mac/Desktop/RNCPProject

(7)、登入

code-push login http://127.0.0.1:3000

会自动打开浏览器登录,获取token,把获取到的token粘贴过来, 回车

屏幕快照 2018-10-31 下午5.35.06.png

屏幕快照 2018-10-31 下午5.35.17.png

查看

whoami

(8)、添加一个应用

testApp //应用名称
code-push app add testApp ios react-native
code-push app add testApp android react-native

58973AE9-BF81-4C1C-AF8D-FE42DBD792FD.png

(9)、配置Xcode info.plist 把我们获取的Staging对应的CodePushDeploymentKey填到上面就行了。

28E7E113-7908-458B-A74B-11188F2CC1D6.png

(10)、运行Xcode 启动项目以更改导航标题为示例

F1C5D5F4-3E37-4229-AFD1-B810C49394EF.png

(11)、更改项目执行

code-push release-react testApp ios

//发布命令（打包文件并上传到服务器）
$ code-push release-react <appName> <OS> <updateContents> <deploymentNmae> <description> <disabled> <mandatory>
<appName> //必须 app名称
<OS> //必须 发布平台iOS/Android
<updateContents> //非必须 Bundle文件所在目录
<targetBinaryVersion> //非必须 需要热更的app 版本
<deploymentNmae> //必须 需要发布的部署
<description> //非必须 描述 (更新客户端不可见必须有"hide"  eg: --description "hide xxxx")
<disabled> //非必须 该版本客户端是否可以获得更新,默认为false
<mandatory> //非必须  如果有则表示app强制更新

E04ADBC9-9E63-4D21-A9DD-2184F712243D.png

BEF2F743-7709-48C6-B807-F8E2D2C2F4E8.png

//查看历史版本
code-push deployment history <应用名> Staging/Production
code-push deployment history testApp Staging
//清空历史版本
code-push deployment clear testApp Staging
//查看key
code-push deployment ls testApp -k

二.集成CodePush SDK

Android

下面我们通过如下步骤在Android项目中集成CodePush。

第一步：在项目中安装 react-native-code-push插件，终端进入你的项目根目录然后运行

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

第二步：在Android project中安装插件。

CodePush提供了两种方式：RNPM 和 Manual，本次演示所使用的是RNPM。
运行npm i -g rnpm，来安装RNPM。

在React Native v0.27及以后版本RNPM已经被集成到了 React Native CL中，就不需要再进行安装了

第三步： 运行 rnpm link react-native-code-push。这条命令将会自动帮我们在anroid文件中添加好设置。

react-native-code-push has been successfully linked.png

在终端运行此命令之后，终端会提示让你输入deployment key，这是你只需将你的deployment Staging key输入进去即可，如果不输入则直接单击enter跳过即可。

第四步： 在 android/app/build.gradle文件里面添如下代码：

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

然后在/android/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')

第五步: 运行code-push deployment -k ls <appName>获取 部署秘钥。默认的部署名是 staging，所以 部署秘钥（deployment key ） 就是 staging。

第六步： 添加配置。当APP启动时我们需要让app向CodePush咨询JS bundle的所在位置，这样CodePush就可以控制版本。更新 MainApplication.java文件：

public class MainApplication extends Application implements ReactApplication {
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
    @Override
    protected String getJSBundleFile() {
      return CodePush.getJSBundleFile();
    }
    @Override
    protected List<ReactPackage> getPackages() {
      // 3. Instantiate an instance of the CodePush runtime and add it to the list of
      // existing packages, specifying the right deployment key. If you don't already
      // have it, you can run "code-push deployment ls <appName> -k" to retrieve your key.
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
      );
    }
  };
  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

关于deployment-key的设置
在上述代码中我们在创建CodePush实例的时候需要设置一个deployment-key,因为deployment-key分生产环境与测试环境两种,所以建议大家在build.gradle中进行设置。在build.gradle中的设置方法如下:

打开android/app/build.gradle文件,找到android { buildTypes {} }然后添加如下代码即可:

android {
    ...
    buildTypes {
        debug {
            ...
            // CodePush updates should not be tested in Debug mode
            ...
        }

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

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

心得:另外,我们也可以将deployment-key存放在local.properties中:

code_push_key_production=erASzHa1-wTdODdPJDh6DBF2Jwo94JFH08Kvb
code_push_key_staging=mQY75RkFbX6SiZU1kVT1II7OqWst4JFH08Kvb

如图:

local.properties存放codepush-key.png

Properties properties = new Properties()
properties.load(project.rootProject.file('local.properties').newDataInputStream())
android {
    ...
    buildTypes {
        debug {
            ...
            // CodePush updates should not be tested in Debug mode
            ...
        }

        releaseStaging {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"'+properties.getProperty("code_push_key_production")+'"'
            ...
        }

        release {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"'+properties.getProperty("code_push_key_staging")+'"'
            ...
        }
    }
    ...
}

在android/app/build.gradle设置好deployment-key之后呢,我们就可以这样使用了:

@Override
protected List<ReactPackage> getPackages() {
     return Arrays.<ReactPackage>asList(
         ...
         new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG), // Add/change this line.
         ...
     );
}

第七步：修改versionName。

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

android{
    defaultConfig{
        versionName "1.0.0"
    }
}

至此Code Push for Android的SDK已经集成完成。

iOS

CodePush官方提供RNPM、CocoaPods与手动三种在iOS项目中集成CodePush的方式，接下来我就以RNPM的方式来讲解一下如何在iOS项目中集成CodePush。

第一步：在项目中安装react-native-code-push插件，终端进入你的项目根目录然后运行

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

第二步： 运行rnpm link react-native-code-push。这条命令将会自动帮我们在ios中添加好设置。

在终端运行此命令之后，终端会提示让你输入deployment key，这是你只需将你的deployment Staging key输入进去即可，如果不输入则直接单击enter跳过即可。

关于deployment-key的设置
在我们想CodePush注册App的时候，CodePush会给我们两个deployment-key分别是在生产环境与测试环境时使用的，我们可以通过如下步骤来设置deployment-key。

1.用Xcode 打开项目 ➜ Xcode的项目导航视图中的PROJECT下选择你的项目 ➜ 选择Info页签 ➜ 在Configurations节点下单击 + 按钮 ➜ 选择Duplicate "Release ➜ 输入Staging(名称可以自定义)；

Duplicate-Release-Staging.png

2.然后选择Build Settings页签 ➜ 单击 + 按钮然后选择添加User-Defined Setting

添加User-Defined-Setting.png

3.然后输入CODEPUSH_KEY(名称可以自定义)

设置Staging deployment key.png

提示：你可以通过code-push deployment ls <APP_NAME> -k命令来查看deployment key。

4.打开 Info.plist文件，在CodePushDeploymentKey列的Value中输入$(CODEPUSH_KEY)

引用CODEPUSH_KEY.png

参考:
https://www.jianshu.com/p/ca4beb5973bb
https://www.jianshu.com/p/417a165ca9d7
React Native应用部署/热更新-CodePush最新集成总结(新)