ReactNative集成CodePush实现热部署（iOS和Android）

一.CodePush简介

CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库，开发者可以推送更新 (JS, HTML, CSS and images)，应用可以从客户端 SDK 里面查询更新。CodePush 可以让应用有更多的可确定性，也可以让你直接接触用户群。在修复一些小问题和添加新特性的时候，不需要经过二进制打包，可以直接推送代码进行实时更新。

二.安装与注册CodePush

前提：OSX系统，安装了Node.js

使用CodePush之前首先要安装CodePush客户端，终端输入：

npm install -g code-push-cli

安装完毕，查看当前CodePush版本：

code-push -v

三.创建CodePush账号

1)终端输入,会打开注册页面让你选择授权账号。你可以通过，Github,或者微软账号授权，授权通过之后，CodePush会告诉你“access key”，复制此key到终端即可完成注册。

code-push register

2)登录CodePush

code-push login

四.在CodePush上注册你的APP（本文以RNDoctor为例）

为了让CodePush知道我们的APP，我们需要注册APP，终端输入，就可完成注册了，注册成功会返回你两个Deployment Key，一个是Production,一个是Staging,之后会用上

code-push app add <yourAppName>

PS:例如我的项目是RNDoctor code-push app add RNDoctor

五.集成CodePush SDK

iOS端

—–原生端的配置—–

1）项目中安装CodePush插件，在你的RN项目的根目录下执行下面命令,安装成功后可以在node_modules文件下找到react-native-code-push

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

2）在node_modules/react-native-code-push/ios 目录下找到CodePush.xcodeproj,然后直接拖入iOS项目的Libraries中

3)将Libraries/CodePush.xcodeproj/Products中的libCodePush.a直接拖入 Link Binary With Libraries中

4)点击Link Binary With Libraries的加号，选择libz.tbd加入

5)在Build Settings的Header Search Paths那一项中加入$(SRCROOT)/../node_modules/react-native-code-push 并点击后面的上下箭头换成recursive

6)在项目的AppDelegate.m里面引入

#import "CodePush.h"

7)把didFinishLaunchingWithOptions里面的代码换成

NSURL *jsCodeLocation; 

 [[RCTBundleURLProvider sharedSettings] setDefaults]; 

   //debug 是从本地服务器  release 从codepush服务器 

  #ifdef DEBUG 

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@”index.ios” fallbackResource:nil]; 

 #else 

  jsCodeLocation = [CodePush bundleURL]; 

 #endif 

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 

                                                      moduleName:@”RNDoctor” 

                                               initialProperties:nil 

                                                   launchOptions:launchOptions]; 

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 

  UIViewController *rootViewController = [UIViewController new]; 

  rootViewController.view = rootView; 

  self.window.rootViewController = rootViewController; 

  [self.window makeKeyAndVisible]; 

  return YES;

8)终端输入code-push deployment ls RNDoctor –k查看你的APP deployment Key,查出Staging的值，在info.plist文件中添加CodePushDeploymentKey并且把Staging的值填入。 并把版本号改成1.0.0

—–RN的配置—–

9)在index.ios.js文件中引入

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

10)在componentDidMount调用sync方法，当你的App启动的时候会在后台更新(当然还有其他的更新策略，这里就不讲了)

componentDidMount(){
    codePush.sync();
  }

至此配置完成，接着你需要把你的APP发布到CodePush服务器上面，才能从CodePush实现热更新

运行时，把项目改成release

Android端

1）项目中安装codepush插件（如果iOS端安装了，就忽略这步）

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

2）安装RNPM插件,终端运行

npm i -g rnpm

3）运行下面命令。这条命令将会自动帮我们在anroid文件中添加好设置。 react-native-code-push has been successfully linked，安卓和iOS都会自动link.

rnpm link react-native-code-push

4） 在 android/app/build.gradle文件里面检查是否有如下代码，如果没有则加上（默认如果link上的话就会有）

apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"  

5）获取deployment key ,复制staging

code-push deployment ls RNDoctor --k

6）添加配置。当APP启动时我们需要让app向CodePush咨询JS bundle的所在位置，这样CodePush就可以控制版本。更新 MainApplication.Java文件

package com.rndoctor;

import android.app.Application;
import android.util.Log;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;
import com.microsoft.codepush.react.CodePush;//确定导入codepush,有时候link不上

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

    @Override
    protected String getJSBundleFile() {
      return CodePush.getJSBundleFile();
    }

    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),

          new CodePush("你的staging", MainApplication.this, BuildConfig.DEBUG)
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

7）在 android/app/build.gradle中有个 android.defaultConfig.versionName属性，我们需要把 应用版本改成 1.0.0（默认是1.0，但是codepush需要三位数）。

android{
    defaultConfig{
        versionName "1.0.0"
    }
}

至此Android CodePush SDK 集成完毕，但是还没完

注意：但是安卓需要生成已签名的APK安装到手机上才能实现热更新，参考生成已签名的APK

六.发布更新

发布更新分为两种：

• 只更新项目的JS
• 更新图片和JS

一、更新js

1）在RN项目的根目录下面创建bundles文件夹

2）将你修改的js文件（当前文件是index.ios.js）打包为二进制文件，放入指定的地方，我这里放入bundles里面。

react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./bundles/main.jsbundle --dev false

3）将main.jsbundle二进制文件push到staging环境中

code-push release RNDoctor ./bundles 1.0.0

RNDoctor 项目的名字

./bundles 是bundles文件夹的东西都更新

1.0.0 是版本号

二、更新图片和js

2）打包，打包成功如下如

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

3）发布和上面的更新js的发布一样,发布成功如下图

4) 终端输入如下命令可以查看，APP是否安装

code-push deployment history RNDoctor Staging