【React-native】輕鬆從零搭建微軟Code-Push熱更新

 

總體步驟：

1. 前提：需要 mac 電腦（iOS需要，僅安卓Win亦可），RN iOS/android 環境搭建好，服務器一臺（最好linux），mysql 數據庫以及 git 和 npm 環境。
2. 搭建服務器，下載code-push項目，npm install安裝，配置數據庫，生成數據庫表。
3. 打開阿里雲3000端口，運行測試。
4. 本地安裝code-push-cli，獲取token，推送應用。
5. 安裝code-push，npm install react-native-code-push，react-native link react-native-code-push，輸入app token即可。
6. iOS配置Release與Debug版本token，android配置URL。
7. 運行推送測試。

---

那麼，既然是全解，肯定是要一步一步搭建。  

第一步，安裝 mysql 可以搜索 Linux 下 yum 安裝 mysql，這教程很多，我這裏就不說了（什麼，你說的一步一步來啊？?）

---

二，搭建服務器 

首先，要下載熱更新的包到服務器上，這裏使用git的方式下載，進入服務器，創建一個文件夾：

// 創建熱更新文件夾
mkdir code-push
// 進入
cd code-push
// 創建熱更新存儲文件夾
mkdir code-push-file
// 進入
cd code-push-file
// 創建熱更新存儲文件夾，後續會用到
mkdir storage

然後使用如下命令，下載熱更新代碼：

git clone https://github.com/lisong/code-push-server.git

如下圖所示：

接着，進入 code-push-server 然後安裝依賴，命令如下：

 

cd code-push-server && npm install

 運行結果如下：

安裝完畢後，需要修改配置文件，鏈接到數據庫創建表，這裏修改config/config.js文件如下：

  db: {
    username: process.env.RDS_USERNAME || "用戶名",
    password: process.env.RDS_PASSWORD || "密碼",
    database: process.env.DATA_BASE || "codepush",
    host: process.env.RDS_HOST || "數據庫域名",
    port: process.env.RDS_PORT || 3306,
    dialect: "mysql",
    logging: false,
    operatorsAliases: false,
  }
  local: {
    // 如下存儲路徑修改爲自己的存儲路徑，第二部中創建的路徑 pwd 後 copy 過來
    storageDir: process.env.STORAGE_DIR || "/root/app/code-push/code-push-file/storage",
    // Binary files download host address which Code Push Server listen to. the files storage in storageDir.
    downloadUrl: process.env.LOCAL_DOWNLOAD_URL || "http://服務器域名:3000/download",
    // public static download spacename.
    public: '/download'
  }

配置完畢後，執行以下命令創建數據庫的表：

// 執行腳本創建數據庫
./bin/db init --dbhost localhost --dbuser 用戶名 --dbpassword 密碼

eg..
./bin/db init --dbhost 127.0.0.1 --dbuser root --dbpassword  root

 至此，如果沒有報錯的話，服務器搭建就完畢了，比較傻瓜式。

---

三，打開阿里雲3000端口且運行測試 

如下圖，進入ECS實例後，依次點擊【更多】->【網絡和安全組】->【安全組配置】

 如下圖，點擊【配置規則】

 隨便點擊一個克隆，然後改爲3000即可。

如下圖，修改爲3000即可。 

輸入網址進行測試：

如下圖，點擊【登錄】後，輸入賬戶：admin，密碼：123456進行登錄。

 登錄成功後，可以點擊獲取 token 來獲得 token 祕鑰，用於後面的認證以及修改當前登錄賬戶密碼等。

 至此，熱更新後端搭建完畢~~~

---

四，本地搭建code-push-cli環境創建推送應用

• 安裝 code-push-cli 工具

npm install -g code-push-cli

• 查看當前登錄用戶

code-push whoami

如果顯示郵箱則已登錄，否則，使用如下命令進行登錄 ：

// localhost改爲熱更新服務器域名
code-push login http://localhost:3000

 此步會跳轉到瀏覽器，登錄後獲取 token，放入【終端】窗口即可

• 創建應用

如下圖，創建了一個名爲 test-android 的 android 系統應用，對應平臺爲 RN

// code-push app add 應用名 版本 平臺
code-push app add test-android android react-native

• 查看當前已創建 app 應用列表 

code-push app list

這裏創建了四個應用，對應的 【Prodcutin】和 【Staging】分別爲 【生產】與 【測試】版本 

• 查看已應用對應的 key 值 

code-push deployment ls 《應用名》 -k

更多命令，可以參考【我的github】，至此，本地環境搭建完畢，已經可以創建 app 應用，那麼，喝口水，接着往下走 。

---

五，項目內安裝 code-push 

進入項目中，輸入：

// 安裝熱更新服務
npm install react-native-code-push --save
// 關聯項目
react-native link react-native-code-push

在link時，會提示輸入相對應的key，也就是第四步【查看已應用對應的 key 值 】中獲取到的 key。

接下來，還需要改一些設置。

• android：

版本號改爲三位

    defaultConfig {
        versionName "1.0.0"
    }

在 MainApplication.java 中 getPackages 方法中

new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG, "http://你的域名:3000/"),

• iOS

點擊新增自定義設置

新增如下： 

 在 info.plist中增加：

那麼，項目配置到這裏，就結束了，接下來，讓我們在 RN 中添加熱更新的代碼。 

• 配置更新代碼： 

在入口（通常是 APP.js）文件中導入codepush庫

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

添加監聽 ，這裏彈出提示框，默認是英文的，修改了 updateDialog 中的參數後，可以改成想要的文字。

    componentDidMount() {
        // 熱更新檢測
        CodePush.sync(
            {
                updateDialog: {
                    optionalIgnoreButtonLabel: '下次再說',
                    optionalInstallButtonLabel: '馬上體驗',
                    optionalUpdateMessage: '新版本來襲，是否更新',
                    title: '更新提示',
                    mandatoryUpdateMessage: '噢，版本中有一些大改動，不得不更新',
                    mandatoryContinueButtonLabel: '立即更新'
                },
                installMode: CodePush.InstallMode.IMMEDIATE
            },
            this.codePushStatusDidChange.bind(this),
            this.codePushDownloadDidProgress.bind(this)
        );
    }

如下爲對不同狀態的監聽，可以用於後續增加用戶點擊更新後的進度條

codePushStatusDidChange(syncStatus) {
        switch (syncStatus) {
            case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
                this.setState({syncMessage: "Checking for update."});
                break;
            case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
                this.setState({syncMessage: "Downloading package."});
                break;
            case CodePush.SyncStatus.AWAITING_USER_ACTION:
                this.setState({syncMessage: "Awaiting user action."});
                break;
            case CodePush.SyncStatus.INSTALLING_UPDATE:
                this.setState({syncMessage: "Installing update."});
                break;
            case CodePush.SyncStatus.UP_TO_DATE:
                this.setState({syncMessage: "App up to date.", progress: false});
                break;
            case CodePush.SyncStatus.UPDATE_IGNORED:
                this.setState({syncMessage: "Update cancelled by user.", progress: false});
                break;
            case CodePush.SyncStatus.UPDATE_INSTALLED:
                this.setState({syncMessage: "Update installed and will be applied on restart.", progress: false});
                break;
            case CodePush.SyncStatus.UNKNOWN_ERROR:
                this.setState({syncMessage: "An unknown error occurred.", progress: false});
                break;
        }
    }

 

    codePushDownloadDidProgress(progress) {
        this.setState({progress});
    }

---

六，推送及更新測試 

• Android 

code-push release-react 《應用名》 android -t "1.0.0" --des "測試熱更新" -d Staging

android 可以打包後，進行測試，是否是正式環境按配置的 key 來判斷 

•  iOS

code-push release-react 《應用名》 ios -t "1.0.0" --des "測試熱更新" -d Staging

iOS 如果是用虛擬機的話，則推送到 Staging 環境即可，因虛擬機有 node 服務，看不出來，故可以進行如下設置，以Release 啓動，所以上面的 Staging 改成 Production 即可。

檢測到更新如下：

如果需要清空app的更新，用如下命令 

code-push deployment clear <appName> Production or Staging

---

前方發現博主的小行星，內涵大量獨特見解文章，歡迎加入討論學習，隨時交談！