實現 React Naitve 熱更新 (client && server) 客戶端以及服務器端

目前針對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/...