使用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