React Native 热更新

  • 工具
  • 服务端配置
  • 安装mysql数据库
  • 源码安装 code-push-server
  • 配置文件
  • 运行
  • 客户端配置
  • 安装命令行工具
  • 登录code-push-server服务器
  • 创建 app
  • App中添加code-push
    • 安装SDK
    • 配置Deployment Key参数
    • iOS配置加载路径
    • 添加检查更新代码
  • 发布更新包

工具

服务端(CentOS) 客户端 (App端)
code-push-server react-native-code-push

服务端配置

code-push-server用来作热更新的服务器,它需要机器上提前安装mysql数据库。

安装mysql数据库

$ sudo yum install -y mysql-server mysql mysql-devel

源码安装 code-push-server

$ git clone https://github.com/lisong/code-push-server.git
$ cd code-push-server
$ npm install
// 初始化数据库
$ ./bin/db init --dbhost localhost --dbuser root --dbpassword

配置文件

// 注意要修改相应的参数
code-push-server配置文件:config.js

// 注意要修改相应的参数
pm2守护进程配置文件:process.json

运行

// 独立运行
$ CONFIG_FILE=config.js PORT=8030 HOST=0.0.0.0 NODE_ENV=production code-push-server/bin/www

// 守护进程运行
$ pm2 start process.json

客户端配置

安装命令行工具

$ npm install -g code-push-cli

登录code-push-server服务器

浏览器访问 刚才部署的 code-push-server服务器 ,登录并获取 token

// 输入上面获取的`token`
$ code-push login http://YOUR_CODE_PUSH_SERVER:8030

创建 app

// 创建后会生成相应 Staging、Production 的 Deployment Key;
// 这个Key接下来需要配置在iOS/Android工程里面
$ code-push app add {App名称}-ios
$ code-push app add {App名称}-android

// 查看你app的配置key
$ code-push deployment ls {App名称}-ios -k

┌────────────┬─────────────────────────────┐
│ Name │ Deployment Key │
├────────────┼─────────────────────────────┤
│ Production │ YoGhxhMWmi72nDdFr3F24kQQSMVx4yoYaYChf │
├────────────┼─────────────────────────────┤
│ Staging │ y8LZUAILNMCa4C6f5N3XwAlaAROe4yoYaYChf │
└────────────┴─────────────────────────────┘

App中添加code-push

安装SDK

// 进到你的react-native项目
$ npm install --save react-native-code-push@latest

注意:如果你是在现有的native项目集成的react-native,需要修改你native项目中的Podfile:

pod 'CodePush', :path => '{你的react-native项目目录}/node_modules/react-native-code-push'

然后执行:
$ pod install

配置Deployment Key参数

将上面生成的Deployment Key 配置到iOS项目的Info.plist中,同时需要指定CodePushServerURL参数,如果不指定的话,它会去微软的Code Push服务器去检查更新,因为我们部署了自己的code-push-server服务器,这里配置成我们自己的就可以了。

<key>CodePushDeploymentKey</key>
<string>YoGhxhMWmi72nDdFr3F24kQQSMVx4yoYaYChf</string>
<key>CodePushServerURL</key>
<string>http://YOUR_CODE_PUSH_SERVER:8030/</string>

iOS配置加载路径

// AppDelegate.m
#import <CodePush/CodePush.h>

#ifdef DEBUG
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
#else
    jsCodeLocation = [CodePush bundleURL];
#endif

添加检查更新代码

import codePush from "react-native-code-push";

class MyApp extends Component {
}

MyApp = codePush(MyApp);

详情请查阅官方文档

发布更新包

从客户端发布更新包到服务器:

// 进入你的 react-native 项目目录

// 如果你的项目是一个纯的 react-native 项目,则执行:
$ code-push release-react {App名称}-ios ios

// 如果你是在现有native项目中集成的 react-native,则执行
$ code-push release-react {App名称}-ios ios --plistFile={你的native项目目录}/Info.plist

// 上面2条命令默认发布到 `Staging`环境,如果想发布到`Production`环境,需跟上参数:
$ -d Production

// 查看你app的配置key、已发布的更新包
$ code-push deployment ls {App名称}-ios -k
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容