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地址，不需要再去配置前面的tencentcloud、qiniu等</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命令