使用codepush進行ReactNative熱部署

項目背景

1. 公司的最新的一個項目像使用ReactNative進行開發，首先是要進行相關的技術調研。
2. 以前公司的項目使用的是H5開發，當時我並無參加，可是調研ReactNative的時候被告知，須要能實現ReactNative的熱部署，貌似H5就能夠支持熱部署。
3. 進過幾天的掙扎和瘋狂的翻閱google的資料而且查找各類博客，終於找到了如何讓ReactNative項目實現熱部署的方法了，也就是使用CodePush
4. 這個是CodePush 的官方網站地址,這個是CodePushGitHut地址

官方對CodePush的介紹

CodePush is a cloud service that enables Cordova and React Native developers to deploy mobile app updates directly to their users’ devices. It works by acting as a central repository that developers can publish certain updates to (e.g. JS, HTML, CSS and image changes), and that apps can query for updates from (using our provided client SDKs). This allows you to have a more deterministic and direct engagement model with your end-users, while addressing bugs and/or adding small features that don’t require you to re-build a binary and/or re-distribute it through any public app stores.

準備工做（iOS）

CodePush支持多平臺，二者熱部署方式略有差別，具體去官網查看，本人暫時只在iOS上開發

1. Mac
2. Xode7.2
3. iOS9.2
4. React-Native 1.7
5. codePush-1.6.0-beta
6. 使用真機release測試。若是沒有，能夠參照這篇例子 ReactNative 真機調試
7. 使用的RN例子就是ReactNative官方那個AwesomeProject項目例子（在我機器裏項目名稱AwesomeProject2）

起步

1. 安裝客戶端

   npm install -g code-push-cli

2. 建立帳戶（我使用的GitHub的帳號）

   code-push register

3. 將本身的App項目加入服務

   code-push app add <MyAppName>

安裝CodePush插件

1. 使用以下命令在項目的更目錄下執行(相似給項目加一個ReacNatice plugin)

   npm install --save react-native-code-push

2. 打開項目AwesomeProject，在項目根目錄下會有文件夾react-native-code-push

3. 將react-native-code-push文件夾中CodePush.xcodeproj直接拉入項目中Libraries中

4. 將Libraries/CodePush.xcodeproj/Products中的libCodePush.a直接拖入 Link Binary With Libraries中

5. 點擊Link Binary With Libraries的加號，選擇libz.tbd加入

6. 在Build Settings的Header Search Paths那一項中加入$(SRCROOT)/../node_modules/react-native-code-push

配置CodePush插件

1. 在Xcode打開項目在AppDelegate.m中引入

   #import "CodePush.h"

2. 在AppDelegate中找到 加載發佈版本中的JS Bundle文件的那段代碼

   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

3. 將這段話替換爲：

   jsCodeLocation = [CodePush bundleURL];

   1. 該文章是討論在Release下進行相關的操做，若是是debug版本加上以下代碼，系統在運行時候會自動切換。

      NSURL *jsCodeLocation;
      
      #ifdef DEBUG
          jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
      #else
          jsCodeLocation = [CodePush bundleURL];
      #endif

4. 在命令行下使用code-push deployment ls <AppName> --displayKeys 查出Staging的值，在info.plist文件中添加CodePushDeploymentKey而且把Staging的值填入。 
   

5. 在Info.plist中將Bundle versions string, short的值修改成1.0.0

插件使用（在相關js文件中調用）

1. 在js文件中引入（該項目文件是index.ios.js）

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

2. 在componentDidMount調用sync方法，當你的App啓動的時候會在後臺更新

   componentDidMount(){
       codePush.sync();
     }

---

1. 到此位置，全部的基本配置已經所有完成了，能夠運行起你的程序啦，不過注意是Release不是Debug
2. 後面將會講到發佈更新了，這裏的跟新分兩種中，一種是僅僅是js代碼的改變動新，還有一種是js+image的更新

---

發佈更新 (JavaScript-only)

當你修改js文件的時候，而且想馬上發佈。則僅僅須要如下的操做：

1. 將你修改的js文件（當前文件是index.ios.js）打包爲二進制文件，放入指定的地方（當前位置爲根目錄）。

   react-native bundle --platform ios --entry-file index.ios.js --bundle-output codepush.js --dev false

2. 將二進制文件push到staging 環境中

   code-push release <appName> <updateContents> <targetBinaryVersion>
   [--deploymentName <deploymentName>]
   [--description <description>]
   [--mandatory]
   
   code-push release AwesomeProject2  codepush.js 1.0.0

發佈更新 (JavaScript + images)

1. –assets-dest 就是你放圖片的位置（當前僅僅是作測試，實際上最好建個文件夾專門存入相關圖片）

   react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./main.jsbundle --assets-dest ./

2. 將二進制文件push到staging 環境中

   code-push release AwesomeProject2  codepush.js 1.0.0

---

而後在你手機上退出App 再次進入就會發現界面改變啦！！

其餘熱更新思路：

https://github.com/fengjundev/React-Native-Remote-Update#使用react-native實現app熱部署的一次實踐

http://www.tuicool.com/articles/Z3ayquJ

http://www.jianshu.com/p/2cb3eb9604ca