CodePush 是一個雲端服務，能夠讓 Cordova 和 React Native 的開發者將手機應用的更新，跳過提交審查，直接部署到用戶的設備上。 它擔任類似中間倉庫的角色，開發者可以把更新（JS，HTML，CSS和圖片）發佈到這個倉庫上，透過程式碼的整合，Apps 就能夠查詢到更新並且下載。

Setup CodePush Service

首先我們先從 CodePush 服務的準備開始～～

Install CodePush Management CLI

首先我們需要安裝 CodePush CLI

$ npm install -g code-push-cli

安裝完後察看版本確認安裝成功

$ code-push -v

Register & Login CodePush

$ code-push register

執行後會開啟網頁讓你進行註冊，並在 terminal 要求填入 access key

可以直接透過網頁以微軟或Github帳號做第三方登入進行授權

註冊登入後頁面會給你 access key

此時複製回到 terminal 貼上

  • 登入：$ code-push login
  • 登出：$ code-push loout

Add new App

$ code-push app add <appName>

新增完後透過 ls 指令確認新增成功

新增的 App 將會有兩個預設的環境

  • Staging：通常用來當作開發中的部署環境
  • Production：上線的部署環境

每個部署環境可以當成是 git 當中不同的 branch 概念

也能夠從 history 進行版本控制，做一些 rollback 的動作

Get Deployment Key Of App

$ code-push deployment ls <appName> -k

就能看見該 App 所有部署環境的 deplyment key

React-Native-Code-Push 整合

文件寫得相當詳細，Step by step 照著文件作就可以

這邊簡單說明流程

由於不同的 React Native 版本所需要做的配置略有不同

這邊以 React Native v0.41.2 為例

  1. 安裝 react-native-code-push :

    $ npm install --save react-native-code-push@latest 點一下這邊 確認 RN 版本和套件支援的版本相依性

  2. 安裝完後，接下來需要 link

    由於 React Native 版本在 0.27 之後，已經將 rnpm link 合併到 React Native CLI

    直接使用

    $ react-native link react-native-code-push

    0.27 以下的版本則可以透過 $ rnpm link 設置，詳細可以參考 Setup

  3. 安裝完後還需要做兩個整合的動作 (這邊的設置方式對應不同的 RN 版本也有差異)

    • 設定 deployment key 到專案中

      • Android :

        編輯 android/app/src/main/java/com/<ProjectName>/MainApplication.java

        1
        2
        3
        4
        5
        6
        7
        @Override
            protected List<ReactPackage> getPackages() {
              return Arrays.<ReactPackage>asList(
                  new MainReactPackage(),
                    new CodePush("Deployment_Key", getApplicationContext(), BuildConfig.DEBUG)
              );
            }

        填入 app 的 deployment key

      • iOS :

        在 ios/<Project_Name>/info.plist 中

        可以看見 CodePushDeploymentKey 欄位，在 value 欄填入 deployment key 即可

  4. 最後是整合 JS 的部分

    使用 HOC (Higher Order Component) 的方式就能快速的整合到你的 App 中了

    程式碼如下

    1
    2
    3
    4
    5
    6
    import codePush from "react-native-code-push";

    class MyApp extends Component {
    }

    MyApp = codePush(MyApp);

    ​

進行更新

release-react 是專門更新 React Native 專案的指令

會自動將目前檔案產生 bundle 並上傳更新版本到 CodePush 的雲端上

$ code-push release-react <appName> <platform> -d <deploymentName>

如果沒有給 -d 的 deploymentName 參數的話，預設將會是 Staging

Read More