React Native用CodePush实现热更新(二)

  • Z时代
  • 2024-01-10
  • 分类：综合

react

本文介绍将code-push-server放在AWS EC2服务器上，以S3作为storageType实现热更新。

1. 创建S3 bucket。

① 登录AWS账号，在Amazon S3控制台，点击“Create bucket”创建S3 bucket。

② 在“Create bucket”对话框中，输入“Bucket name” 和 “Region”，一直点next，直到创建成功。







2. 安装 CodePush CLI:

npm install -g code-push-cli

code-push -v 查看版本，显示版本说明安装成功。（这里用的是2.1.3-beta）

3. 在Amazon EC2上安装code-push-server:

① 从git上下载code-push-server: git clone https://github.com/lisong/code-push-server.git
② 进入code-push-server: cd code-push-server
③ sudo npm install
④ ./bin/db init --dbhost localhost --dbuser root --dbpassword yourPassword
⑤ 在 /path/to/code-push-server/config/config.js 中修改相关配置。



⑥ 开启服务：./bin/www

   浏览器中能打开http://your-ec2-Public-DNS:3000，说明服务启动成功。

4. 登录CodePush:

code-push login http://your-ec2-Public-DNS:3000

自动在浏览器中打开登录页面。


输入用户名和密码（account:admin password:123456）后点击获取Token，复制access key到命令行窗口中。



如图则登录成功。

5. 添加APP，获得Deployment Key:

Android和iOS分别添加：

code-push app add CodePushDemo-ios ios react-native

code-push app add CodePushDemo-android android react-native

6. 安装 react-nativ-code-push 插件：

① 进入项目根目录。

② npm install [email protected] --save

注：这里没有用npm install [email protected] --save是因为如果用最新的版本5.x.x，在编译android是会出现“cannot find symbol class JSBundleLoader”的问题（https://github.com/Microsoft/react-native-code-push/issues/935）

③ rnpm link react-native-code-push 这条命令将会自动帮我们在android/ios中添加好设置。


android：

I. 在android/app/build.gradle中自动添加上：apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

II. 在/android/settings.gradle中自动添加上：

include ':react-native-code-push'

project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

III. 在MainActivity中自动添加上：

import com.microsoft.codepush.react.CodePush;


ios：

在info.plist中自动添加上CodePushDeploymentKey。

7. 在 index.ios.js 和 index.android.js 中分别添加如下：

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

componentDidMount() {

   codePush.sync();

}

8. 修改android/ios程序相关配置：

ios:

① 在info.plist中添加CodePushDeploymentKey和CodePushServerURL。



注：CodePushDeploymentKey为Deployment Key(Production)。

如果用微软默认的CodePush Cloud则不需要添加CodePushDeploymentKey。

② 在Xcode中以Release运行。

③ Version 1.0修改为1.0.0(默认是1.0，但是codepush需要三位数）。

android:

① 在MainApplication中添加如下：


注：CodePush的第一个参数为Deployment Key(Production)。

② 在android/app/build.gradle中versionName由1.0修改为1.0.0(默认是1.0，但是codepush需要三位数）。

9. 打包 + 发布

code-push release-react CodePushDemo-ios ios --des "description" -d Production

code-push release-react CodePushDemo-android android --des "description" -d Production

注：code-push release-react CodePushDemo-ios ios --des "test" --m true 默认为Staging，如果用默认的话，需要把程序中相关的Deployment Key替换为Staging的key。

10. 测试更新

① 修改 index.ios.js 和 index.android.js 中的代码及images文件夹中的资源。


② 重新打包发布 android 和 ios。

code-push release-react CodePushDemo-ios ios --des "description" -d Production

code-push release-react CodePushDemo-android android --des "description" -d Production


③ 执行完“code-push release-react” 命令后，会在你之前创建的S3 bucket中生成文件，同时在 /home/ec2-user/ReactNative/data （之前在config.js中定义的）中生成相应的文件。

S3中生成的文件：两个文件分别为发布的二进制文件和json格式的文件。应用程序将从这里下载jsbundle的二进制文件进行更新。


/home/ec2-user/ReactNative/data 中生成的文件：该目录用于比较每次打包的内容的差异。如果两次打包的内容相同则执行release-react命令会报错，就是根据这个文件目录来做比较的。

ios打包发布后生成的文件：



android打包发布后生成的文件：


注：ios及android生成的文件会略有不同，体现在bundle文件名及图片名上（android会在图片名前加上“image_”）。

④ 重新启动APP（2次），界面改变。

11. 代码片段及程序

代码片段：https://gitee.com/AuroraDuring/codes/432v70uzdjfayb6kolep173

程序下载：http://download.csdn.net/download/u011886447/10204494

12. 相关命令：

添加部署：code-push deployment add CodePushDemo-ios Staging

删除部署：code-push deployment rm CodePushDemo-ios Staging

查看部署的key：code-push deployment list CodePushDemo-ios -k

查看历史版本：code-push deployment history CodePushDemo-ios Staging

13. 参考网址：

https://github.com/Microsoft/react-native-code-push/blob/master/Examples/CodePushDemoApp-pre0.49/demo.js

http://blog.csdn.net/fengyuzhengfan/article/details/52003798

http://www.jianshu.com/p/fa362da953c7

http://www.jianshu.com/p/cbc6a1dbfe30

http://blog.csdn.net/xiangzhihong8/article/details/73201421

http://lib.csdn.net/article/reactnative/67095

http://blog.csdn.net/itpinpai/article/details/50845625 ---- Android启动白屏

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

https://github.com/lisong/code-push-server/issues/103 ---- [Error]  Could not parse response: 

http://www.360doc.com/content/16/0911/08/35331283_589947241.shtml

http://blog.csdn.net/wnma3mz/article/details/77618475

https://hfyeh.github.io/webdev/articles/build-code-push-server.html ---- EC2



以上是 React Native用CodePush实现热更新(二) 的全部内容， 来源链接： utcz.com/z/382736.html

回到顶部