React Native基于云服务器的热更新方案

本文有较多的命令拷贝自网友Yochi的文章,特此感谢。

  1. 云服务器(阿里云或者腾讯云等)安装MySQL

    使用命令进行远程连接
    $ ssh -p 22 root@111.xxx.xxx.xxx
    
    参照这个链接傻瓜式安装MySQL。不过下载我用的是本地下载,然后远程传输。传输命令如下:
    scp /home/jack/A root@192.168.xxx.xxx:/home/jihao/home/jack/A是本地目录,192.168.xxx.xxx是linux服务地IP,:/home/jihao指向服务器的目录
    
    安装后进行登录,可能会出现Access denied for user ‘root’@’localhost’ (using password: YES)错误,可以参考该地址的方法二进行登录。

    登录后需要修改密码,可以参考该地址的方法一。
  2. 云服务器部署code-push-server
    $ cd 存放code-push-server文件夹
    $ git clone https://github.com/lisong/code-push-server.git
    $ cd code-push-server
    $ npm install
    
    之后可以打开./bin/db文件修改数据库的配置,按I进行修改。
    $ vim ./bin/db
    
    找到如下语句修改数据库名字、host、账号、密码,修改后按ESC退出编辑,并输入:wq保存退出。
    default({dbname: 'codepush', dbhost: 'localhost', dbuser: 'root', dbpassword: null})
    
    之后进行数据库初始化
    $ ./bin/db init --dbhost localhost --dbuser root --dbpassword xx00(刚刚刚安  装的数据库密码) 
    
    接着打开配置文件进行修改
    $ vim ./config/config.js
    
    db: {
        username: process.env.RDS_USERNAME || "root",
        password: process.env.RDS_PASSWORD || "password",
        database: process.env.DATA_BASE || "codepush",
        host: process.env.RDS_HOST || "127.0.0.1",
        port: process.env.RDS_PORT || 3306,
        dialect: "mysql",
        logging: false,
        operatorsAliases: false,
    },
    ....
    local: {
        // Binary files storage dir, Do not use tmpdir and it's public download dir.
        storageDir: process.env.STORAGE_DIR || "/usr/local/CodePushServer/tablee/workspaces/storage",
        // Binary files download host address which Code Push Server listen to. the files storage in storageDir.
        downloadUrl: process.env.LOCAL_DOWNLOAD_URL || "http://111.xxx.xxx.xxx:3000/download",
        // public static download spacename.
        public: '/download'
    },
    ...
    
    <font color=red>这里需要注意的是local。需要配置好storageDir所指定的目录,没有就创建个,或者是另外指定,否则启动会报找不到目录;如果是将code-push-server部署在云服务器上的话,downloadUrl需要改为公网指定的IP地址,不需要再去配置前面的tencentcloudqiniu等</font>

    启动服务
    $ ./bin/www 
    
  3. 开发设备上登录

    在开发设备上安装code-push-cli
    $ npm install code-push-cli@latest -g
    $ code-push login http://xxx.xxx.xxx.xxx:3000  #云服务器的IP,之后会弹出浏览器,输入admin/123456登录后,拷贝token,会填到终端,登录成功
    $ Enter your token from the browser:
    
    添加工程与指定环境
    $ code-push app add name ios react-native #name为工程名字
    #添加后默认会创建两个环境Staging和Production,可以通过下面命令创建新环境
    $ code-push deployment add name 环境名 
    $ code-push deployment ls name -k #查看name所有的环境及对应的Deployment Key(后续用到)
    
  4. 工程改造

    找一个RN项目或者创建一个。
    $ cd 存放项目目录(package.json文件所在目录)
    $ npm install --save react-native-code-push  #安装react-native-code-push
    $ react-native link react-native-code-push   #连接到项目中,提示输入配置可以先行忽略
    
    然后在info.plist文件中加上配置
    <key>CodePushDeploymentKey</key>
    <string>Deployment Key</string>
    <key>CodePushServerURL</key>
    <string>http://公网IP:3000</string>
    
    修改指定的js文件,引用官方的一个列子。代码中的【1】【2】【3】为修改部分
    //RNHighScores.js
    import React,{ Component } from 'react';
    import {AppRegistry, StyleSheet, Text, View} from 'react-native';
    //【1】引入react-native-code-push
    import codePush from "react-native-code-push";
    
    class RNHighScores extends React.Component {
        componentDidMount () {
            //【2】提示是否更新,deploymentKey要设置为指定环境对应的key。
            codePush.sync({
                      // updateDialog: true, // 是否打开更新提示弹窗
                      // codePush.InstallMode.ON_NEXT_RESTART是下次启动的时候
                      updateDialog: {
                      optionalIgnoreButtonLabel: '稍等',
                      optionalInstallButtonLabel: '丢后台去',
                      optionalUpdateMessage: '发现新版本,更新下呗?',
                      title: '更新提示>.<'
                      },
                      installMode: codePush.InstallMode.ON_NEXT_RESTART,
                      mandatoryInstallMode: codePush.InstallMode.ON_NEXT_RESTART,
                      deploymentKey: 'Lt11STjRihTPyRAibUvbU2fzpknb4ksvOXqog',
                      });
        },
        render() {
            var contents = this.props['scores'].map((score) => (
                                                            <Text key={score.name}>
                                                            {score.name}:{score.value}
                                                            {'\n'}
                                                            </Text>
                                                            ));
            return (
                <View style={styles.container}>
                <Text style={styles.highScoresTitle}>2048 High Scores!</Text>
                <Text style={styles.scores}>{contents}</Text>
                </View>
                );
        }
    }
    
    const styles = StyleSheet.create({
                                 container: {
                                 flex: 1,
                                 justifyContent: 'center',
                                 alignItems: 'center',
                                 backgroundColor: '#FFFFFF',
                                 },
                                 highScoresTitle: {
                                 fontSize: 20,
                                 textAlign: 'center',
                                 margin: 10,
                                 },
                                 scores: {
                                 textAlign: 'center',
                                 color: '#333333',
                                 marginBottom: 5,
                                 },
                                 });
    
    // 整体js模块的名称
    //【3】
    RNHighScores = codePush({checkFrequency: codePush.CheckFrequency.MANUAL})(RNHighScores);
    AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
    
    //index.js
    import RNHighScores from './ios/XXX/RNHighScores/RNHighScores'; //指向RNHighScores.js的存放位置
    
  5. 发布更新
    $ code-push release-react name ios --deploymentName Release  #Release为指定环境,这个要跟deploymentKey相对应
    $ code-push deployment history name Release #利用该命令可以查看Release的所有版本及下载情况。
    
  6. 其他地址
    react-native-code-push命令
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,717评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,501评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,311评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,417评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,500评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,538评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,557评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,310评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,759评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,065评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,233评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,909评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,548评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,172评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,420评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,103评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,098评论 2 352

推荐阅读更多精彩内容