code-push-sever搭建全教程（原生目前只包含Android配置）

JasonK
1,256 阅读8分钟

由于公司项目需要，针对热更新实施几个方案。主要分为两点：

  • 第一是通过传统的传包以及下包操作，通过公司的后端提供上传下载接口实现。但目前刚来公司，所以资源协调没有那么顺利，都很忙...(除了接口提供外，还需要Android相关同事在原生壳子中做些下载、加载以及重启操作，以及web端提供包资源可视化操作)

  • 第二是通过微软的codePush实现。不过这种唯一考虑就是代码的安全性和后续服务器的日志输出等

所以综上考虑采用codePush实现，并且基于code-push-server搭建私服实现热更新（本文主要讲述在本地搭建过程及所遇问题和解决方案，部署到服务端需要将code-push-server用docker打包成镜像上传，这部分我没研究透，暂且搁置吧...）

环境

  • react-native : 0.68.2
  • react-native-code-push :7.0.5
  • code-push-cli : 2.1.9
  • node : 16.17.1
  • node镜像 : registry.npmjs.org/

code-push-cli目前最新版本已达到3.0.0，但安装3.0.0版本使用相关命令会出现警告，大致就推荐使用appCenter脚手架，但是appcenter是无法login私有服务器上，所有这里大家最好是安装指定版本2.1.9

安装MySQL

1.1 下载安装MySQL

这里可以通过homebrew下载，也可以通过去官网下载。这里我选择官网下载，homebrew安装网络不太行就放弃了。

WechatIMG876.png

注意点

安装到最后一步时需要选择以MySQL 5.x版本的密码加密方式。这里一定要选择好，不然在code-push-server项目中创建数据库会报错就需要重新设置密码加密方式了，因为项目中使用的5.x版本sql管理，所以需要保持统一

WX20221024-163244@2x.png

1.2 关于MySQL密码修改

1.在你的偏好设置中找到MySQL的图标，进入点击Stop MySQL Server

image.png

如果无法正常stop，可以在终端输入关闭服务指令，注意密码是开机密码

sudo /usr/local/mysql/support-files/mysql.server stop

2.打开终端输入获取sql位置指令

which  mysql

3.进入sql位置中

cd /usr/local/mysql/bin/

4.获取管理员权限并输入开机密码

sudo su

5.禁止MySQL安全验证

./mysqld_safe --skip-grant-tables &

6.无密码安全登入MySQL,出现下面截图所示代表登入成功

./mysql

image.png

7.刷新权限

flush privileges;

image.png

8.修改密码(新密码以123456为例)

ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';

9.输入quit退出服务并重新登入服务验证

quit

mysql -u root -p123456

配置code-push-server服务

2.1 下载项目

git clone https://github.com/lisong/code-push-server.git

进入项目目录并安装相关库

cd code-push-server && npm install

2.2 初始化code-push-server数据库

./bin/db init --dbhost localhost --dbuser root --dbpassword 123456

这里稍微注意下本地数据库服务不能通过禁止MySQL安全验证方式开启！否则在初始化数据库时会报 OperationalError: connect ECONNREFUSED 127.0.0.1:3306 错误，

如果通过禁止MySQL安全验证方式开启，需要新增一个终端窗口输入关闭服务指令。

sudo /usr/local/mysql/support-files/mysql.server stops

关闭后再去偏好设置中MySQL服务手动开启

image.png

2.3 修改配置文件

打开config/config.js文件，主要修改涉及：db的配置、local的配置、jwt的配置以及common的配置（相关修改后面已添加注释）

var os = require('os');

var config = {};
config.development = {
  db: {
    username: "root",//改成MySQL的user表中名称，一般都为root
    password: '123456',//改为MySQL登入密码
    database: "codepush",//数据库名称，自定义codepush即可
    host: "127.0.0.1",//数据库host
    port: process.env.RDS_PORT || 3306,
    dialect: "mysql",
    logging: false,
    operatorsAliases: false,
  },
  local: {
    storageDir: "/Users/用户名/Desktop/workspace/storage", //这里是数据库相关的资料路径记录,路径一般和code-push-server项目同级就行
    downloadUrl: "http://本机ip:3000/download", //这里就是本机ip + '/download' ，一定要加上后缀download，否则后续code-push下载时会出现404
    public: '/download'
  },
  jwt: {
    tokenSecret: "hMutKNMEENIwGYc6NsEvc61xUaTkyKFns3eHYVeQWxWN5osTBdBlV9zbeACYiWh",  //进入https://www.grc.com/passwords.htm，直接取63 random alpha-numeric characters (a-z, A-Z, 0-9):后面的加密文本
  },
  common: {
    tryLoginTimes: 0,
    diffNums: 3,
    dataDir: "/Users/用户名/Desktop/workspace/data",//图片等资源文件与jsbundle，路径设置同storageDir
    storageType: "local", //存储类型设置为local
    updateCheckCache: false,
    rolloutClientUniqueIdCache: false,
  },
}

打开docker/config.js文件，主要修改涉及：db的配置（相关修改后面已添加注释）

var config = {};
config.development = {
  db: {
    username: "root",//参考config/config.js中db配置
    password: '123456',//参考config/config.js中db配置
    database: "codepush",//参考config/config.js中db配置
    host: "127.0.0.1",//参考config/config.js中db配置
    port: process.env.MYSQL_PORT || 3306,
    dialect: "mysql",
    logging: false,
    operatorsAliases: false,
  },
}

2.4 开启code-push-server 服务

./bin/www

出现下面输出即开启成功或者通过访问 本机ip + ':3000' 和 http://127.0.0.1:3000

image.png

可视化数据库配置

这里推荐使用DBeaver Ultimate

3.1 官网下载安装包

dbeaver.com/download/ul…

3.2 创建连接

选择MySQL类型后，点击下一步，只需要输入密码就OK

image.png

然后在左侧就可以看到创建连接的数据库codepush

image.png

RN项目code-push代码集成

4.1 package.json添加三方库

"react-native-code-push": "^7.0.5",

4.2 App.js入口增加codepush热更功能

export default CodePush(App);

这里默认是重启App会checkUpdate拉取热更信息，下次重启生效

如果需要针对热更做出自定义配置可以设置checkFrequency（指定需要检查更新的时间）和installMode（指定何时安装可选更新，强制更新此设置会失效）

image.png

十分抱歉，这里的checkFequency的值中CodePush应取小写codePush，对象而不是方法引用。

安装code-push-cli客户端管理工具

5.1 安装指定版本

开头说过我们会选择2.1.9版本进行安装，3.0.0版本会出现弃用警告，并且无法登录我们部署的code-push-server服务。

npm i -g code-push-cli@2.1.9

这里可能需要稍微等会儿,安装完毕之后查看code-push版本，显示2.1.9即完成安装

code-push --v

Android配置

如果有配置不够规范的，希望大家在评价区指正。

6.1 动态发布环境配置

主要分为stagging和production两个环境配置

在app/build.gradle中顶部添加一下头文件

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

../../node_modules/react-native/react.gradle 这个头文件我添加后会报错，如果有同学遇到以下报错，将react.gradle这个头文件注释即可

Where: Script '/Users/jason/Downloads/chapter2/node_modules/react-native/react.gradle' line: 202

What went wrong: A problem occurred configuring project ':app'. Cannot add task 'bundleDebugJsAndAssets' as a task with that name already exists.

defaultConfig的versionName设置

设置为例如1.0.0，热更版本发布时需要这样格式版本号

buildTypes设置

这里debug中设置stagging环境key主要为了运行时候拉stagging环境热更新，所以大家可以根据自己需求设置。

codePushDeploymentKey最好保持一致，后面在其他地方有使用到

红色框中都为增加部分

image.png

获取CodePushDevelopmentKey

通过code-push-cli获取

code-push login http:"本机ip":3000

有遇到类似问题可以参考下：由于我这边是无线网连接，所以这个ip可能会变。那么就可能会导致无法登入新的域名但也无法退出旧的域名。需要在 /Users/用户名/.code-push.config 文件中清空内容即可登入新域名。

注册平台App

code-push app add demoApp(项目名称) android（平台）react-native

image.png

如果后续需要查看key可以通过两种方式：

  • code-push develoyment ls demoApp -k

  • 上面所用到的数据库可视化工具中develoyments表中查看

6.2 对react-native-code-push库进行手动依赖

主要分为两个步骤

在RN项目根路径中添加react-native.config.js文件

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
    dependencies: {
        'react-native-code-push': {
            platforms: {
                android: null, // disable Android platform, other platforms will still autolink if provided
            },
        },
    },
};

在Android原生中设置

app/build.grandle中 dependencies设置添加

implementation project(':react-native-code-push')

android/settings.gradle中添加

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

MainApplication.java（红色框为修改和增加部分，包括了code-push原生入口修改getJSBundleFile ）

image.png

这里请注意下 getPackages() 方法中的 packages.add()，其中getResources().getString(R.string.CodePushDeploymentKey)就是根据app/build.grandle设置的CodePushDeploymentKey获取，所以这两处需要保持key统一

上面设置完毕需要在RN项目根路径下执行 yarn install 或者 npm install

发布热更新测试

未打过包的先打一个原始包上去

code-push release-react demoApp android --t 1.0.0 --dev true -d Staging --des "第一次更新” --m false

其中参数--t为原生安装包的的匹配版本；--dev为是否启用开发者模式(默认为false)；--d是要发布更新的环境分Production与Staging(默认为Staging)；--des为更新说明；--m 是强制更新。

关于code-push release-react更多可选的参数，可以在终端输入code-push release-react进行查看。

修改任意一行js代码发布热更新，拉取之后如果遇到下载404问题，请检查下code-push-server中config/config.js中downloadUrl是否带有/download后缀。

相关问题收集

code-push发布后downloading出现Error in getting binary resources modified time（RN 0.72环境）

WX20221124-152556@2x.png

解决办法：android/app/build.gradle的defaultConfig中添加一行

resValue 'string', "CODE_PUSH_APK_BUILD_TIME", String.format(""%d"", System.currentTimeMillis())

avatar
文章
阅读
粉丝