实现 React Naitve 热更新 (client && server) 客户端以及服务器端

2024年2月20日 95次阅读来源: Timdan

目前针对react native 热更新的方案比较成熟的选择有microsoft公司的code-push 传送门，与react-native 中文网的pushy 传送门

本文选择code-push 用来进行对react-native 实现热更新，code-push 包含client端的配置，默认code-push 使用的服务器地址为微软的服务器，但是在国内的网速不是太好。因此可以使用code-push-server 搭建自己的服务器。本文主要介绍了实现热更新 client 和 server 端的配置。

React Native 热更新借助 code-push-cli 脚手架完成
参考教程 https://blog.csdn.net/dounine…
code-push 常用命令可查看 https://www.jianshu.com/p/aa2…
官方code-push 命令操作以及简介可查看 https://github.com/Microsoft/…

1.react native 热更新客户端配置

    1.首先全局安装code-push-cli

npm install -g code-push-cli

2.然后注册一个code-push 账号(可使用github账号)

code-push register

3.注册成功后将获取的token在当前命令行输入并回车 (如下)

Enter your token from the browser:  b0c9ba1f91dd232xxxxxxxxxxxxxxxxx
#成功提示如下方
Successfully logged-in. Your session file was written to /Users/huanghuanlai/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.

如使用自己搭建的code-push-server 可忽略 2 ,3 步骤并使用以下命令登录到code-push-server

登录可采用以下命令

code-push login  http://***.***.***.***

4.使用code-push 添加一个 app

code-push app add AppName android react-native

添加成功后

code-push app add AppName android react-native
#成功提示如下方
Successfully added the "dounineApp-android" app, along with the following default deployments:
┌────────────┬──────────────────────────────────────────────────────────────────┐
│ Name       │ Deployment Key                                                   │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Production │ PZVCGLlVW-0FtdoCF-3ZDWLcX58L6dec4087-57cf-4c9d-b0dc-ad38ce431e1d │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Staging    │ T0NshYi9X8nRkIe_cIRZGbAut90a6dec4087-57cf-4c9d-b0dc-ad38ce431e1d │

5.在自己项目中安装react-native-code-push

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

6.将安装的包进行link

react-native link react-native-code-push

Scanning folders for symlinks in /Users/huanghuanlai/dounine/oschina/dounineApp/node_modules (8ms)
? What is your CodePush deployment key for Android (hit <ENTER> to ignore) T0NshYi9X8nRkIe_cIRZGbAut90a6dec4087-57cf-4c9d-b0dc-ad38ce431e1d

#将刚才添加的Android App的Deployment Key复制粘贴到这里,复制名为Staging测试Deployment Key。

rnpm-install info Linking react-native-code-push android dependency 
rnpm-install info Android module react-native-code-push has been successfully linked 
rnpm-install info Linking react-native-code-push ios dependency 
rnpm-install WARN ERRGROUP Group 'Frameworks' does not exist in your Xcode project. We have created it automatically for you.
rnpm-install info iOS module react-native-code-push has been successfully linked 
Running ios postlink script
? What is your CodePush deployment key for iOS (hit <ENTER> to ignore) IjC3_iRGEZE8-9ikmBZ4ITJTz9wn6dec4087-57cf-4c9d-b0dc-ad38ce431e1d

此时为app 生成key的过程已完成，现需要在自己的项目中加入生成的key ,如果要采用自己的server需要配置服务器的地址。
需要检查如下信息在执行react-native link 命令后会将相关的依赖进入引入。正常情况下link 会帮助我们完成以下操作，但有时并没有完全引入需要自己检查。

(1) 在 android/app/build.gradle文件里面是否包含如下代码：

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

(2) 在/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')

(3) 在 android/app/build.gradle 是否包含

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

个人修改
在android/app/src/main/java/MainApplication 中
默认的代码我在编译后报错，如下，(如无报错可不用修改)

new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG),

修改后 (此时默认的为微软的热更新服务地址)

new CodePush("", MainApplication.this, BuildConfig.DEBUG),

如自己搭建的server 则忽略上面的修改，需要添加自己server的地址如下
修改链接自己的热更新服务器（第一个参数为自己当前应用生成的key，最后一个参数为热更新服务器地址）

new CodePush("自己应用的key", MainApplication.this, BuildConfig.DEBUG,"http://***.***.***.***:3000/"),

在自己的项目的入口文件引入react-code-push 并写入检测更新与用户进行更新操作的逻辑代码
个人在app.js中修改

#先引入项目包
import codePush from "react-native-code-push";
#以下为自己的升级逻辑代码(放到入口文件中)
    codePush.checkForUpdate(deploymentKey).then((update) => {
      if (!update) {
        console.log('已是最新版本',update)
      } else {
          codePush.sync({
                  deploymentKey: deploymentKey,
                  updateDialog: {
                      optionalIgnoreButtonLabel: '稍后',
                      optionalInstallButtonLabel: '立即更新',
                      optionalUpdateMessage: '有新版本了，是否更新？',
                      title: '更新提示'
                  },
                  installMode: codePush.InstallMode.IMMEDIATE,

              },
              (status) => {
                  switch (status) {
                      case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                          console.log("DOWNLOADING_PACKAGE");
                          break;
                      case codePush.SyncStatus.INSTALLING_UPDATE:
                          console.log(" INSTALLING_UPDATE");
                          break;
                  }
              },
              (progress) => {
                  console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
              }
          );
      }
})

热更新客户端的配置暂时完毕
此时可进行版本的发布，版本的发布命令参数如下具体的参数说明可查看官方文档
https://github.com/Microsoft/…

code-push release-react <appName> <platform>
[--bundleName <bundleName>]
[--deploymentName <deploymentName>]
[--description <description>]
[--development <development>]
[--disabled <disabled>]
[--entryFile <entryFile>]
[--gradleFile <gradleFile>]
[--mandatory]
[--noDuplicateReleaseError]
[--outputDir <outputDir>]
[--plistFile <plistFile>]
[--plistFilePrefix <plistFilePrefix>]
[--sourcemapOutput <sourcemapOutput>]
[--targetBinaryVersion <targetBinaryVersion>]
[--rollout <rolloutPercentage>]
[--privateKeyPath <pathToPrivateKey>]
[--config <config>]

发布之前需要将项目打包

# 执行打包
gradlew.bat assembleRelease

然后再项目的根目录下运行命令发布
(通过查看发布配置项，可看到支持指定文件发布，感兴趣的同学可研究其发布命令)

code-push release-react 应用名称 android -m true --des '描述' -t 版本

如无报错信息则发布成功，此时打开应用可查看到更新的提示。

2. React Native 热更新server端配置 (搭建 code-push-server)

所需环境 node
所需软件 mysql pm2
服务器环境 RedHat

1.首先搭建node 环境采用 nvm安装
安装步骤

# 下载安装NVM脚本
>>>curl https://raw.githubusercontent.com/creationix/nvm/v0.13.1/install.sh | bash
>>>source ~/.bash_profile

# 列出npm的版本号
>>>nvm list-remote

# 选择其一安装即可, vn.n.n是版本号,此步骤耗时最久
>>>nvm install vn.n.n

# 查看已安装的版本
>>>nvm list

# 使用版本
>>>nvm use vn.n.n

# 设置为默认版本
>>>nvm alias default vn.n.n

通过此步骤我安装的node版本为v8.11.3 npm 版本为5.6.0

2.安装mysql

#下载，在这里使用的是命令行下载，也建议在图形界面下载，然后上传至服务器
>>>wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm

#使用rpm安装
>>>rpm -ivh mysql-community-release-el7-5.noarch.rpm

#使用yum安装mysql-community-server
>>>yum install mysql-community-server

#启动服务
>>>service mysqld start

#进入mysql，第一次进入无密码
>>>mysql -u root -p

#命令行变成如下
mysql>

配置mysql

#进入配置文件，若未安装vim，建议先使用命令yum install vim安装vim
>>>vim /etc/my.cnf

#最后加上编码配置
[mysql]
default-character-set =utf8

#此处字符编码必须和/usr/share/mysql/charsets/Index.xml中一致。
#不过一般情况下使用的都是utf8

设置密码

#下面三种方法需要进入mysql
>>>mysql -u root -p

#方法一
mysql>insert into user(host,user,password) values('%','user_name',password("password");
#方法二
mysql>set password for user_name = password("password");
#方法三
mysql>grant all on *.* to user_name@% identified by "password";

#下面这一种方法可直接在shell下设置密码
>>>mysqladmin -u root password "password"

远程连接

#进入mysql
>>>mysql -u root -p

#把在所有数据库的所有表的所有权限赋值给位于所有IP地址的root用户。
mysql> grant all privileges on *.* to root@'%'identified by "password";

3.下载code-push-server 并配置

# 下载源码
>>>git clone https://github.com/lisong/code-push-server

# 进入源码目录并安装相应模块
>>>cd code-push-server && npm install

# 修改配置文件
>>>vim config/config.js

数据库配置文件

db: {
    username: "root",
    password: null,
    database: "codepush",
    host: "127.0.0.1",
    dialect: "mysql"
  },
  //七牛云存储配置 当storageType为qiniu时需要配置
  qiniu: {
    accessKey: "",
    secretKey: "",
    bucketName: "",
    downloadUrl: "" //文件下载域名地址
  },
  //阿里云存储配置 当storageType为oss时需要配置
  oss: {
    accessKeyId: "",
    secretAccessKey: "",
    endpoint: "",
    bucketName: "",
    prefix: "", // 对象Key的前缀，允许放到子文件夹里面
    downloadUrl: "", // 文件下载域名地址，需要包含前缀
  },
  //文件存储在本地配置 当storageType为local时需要配置

文件存储部分

 local: {
    storageDir: "/Users/tablee/workspaces/storage",
    //文件下载地址 CodePush Server 地址 + '/download' download对应app.js里面的地址
    downloadUrl: "http://localhost:3000/download",  #本地服务器地址
    // public static download spacename.
    public: '/download'
  },
  jwt: {
    // 登录jwt签名密钥，必须更改，否则有安全隐患，可以使用随机生成的字符串
    // Recommended: 63 random alpha-numeric characters
    // Generate using: https://www.grc.com/passwords.htm
    tokenSecret: 'INSERT_RANDOM_TOKEN_KEY'
  },
  common: {
    dataDir: "/Users/tablee/workspaces/data",
    //选择存储类型，目前支持local,oss,qiniu,s3配置
    storageType: "local"
  },

初始化数据库

# 初始化数据库
>>>./bin/db init --dbhost localhost --dbuser root  --dbpassword password --dbport 3306

# 初始化数据库确保不报错才能启动服务
>>>./bin/www

# 若无报错，则表示成功启动，默认端口为3000

可在本地打开浏览器进行检验，输入ip:3000 查看code-push-server 是否正常运行

本人通过pm2 管理 code-push-server 服务

# 安装pm2 
npm install -g pm2 
# 通过 pm2 启动服务并命名
pm2 start ./bin/www --name code-push-server
# 查看当前服务进程
pm2 list
-------------------------------------------------------
──────────────────┬────┬─────────┬──────┬──────┬────────┬─────────┬────────┬─────┬───────────┬──────┬──────────┐
│ App name         │ id │ version │ mode │ pid  │ status │ restart │ uptime │ cpu │ mem       │ user │ watching │
├──────────────────┼────┼─────────┼──────┼──────┼────────┼─────────┼────────┼─────┼───────────┼──────┼──────────┤
│ code-push-server │ 1  │ 0.5.2   │ fork │ 4282 │ online │ 1       │ 0s     │ 0%  │ 11.5 MB   │ root │ disabled │

此时server 配置已经完成，可直接进行热更新部署。

可通过 code-push 发布相关版本信息，并且支持回滚。更多骚操作可阅读官方code-push文档 https://github.com/Microsoft/…

    原文作者：Timdan
    原文地址: https://segmentfault.com/a/1190000017043114
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。