美文网首页
React Native 热更新

React Native 热更新

作者: TroyZhang | 来源:发表于2017-04-20 23:58 被阅读53次
    • 工具
    • 服务端配置
    • 安装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
    

    相关文章

      网友评论

          本文标题:React Native 热更新

          本文链接:https://www.haomeiwen.com/subject/nmurzttx.html