摘要:本文主要介绍了实现热更新和端的配置。此时为生成的过程已完成,现需要在自己的项目中加入生成的如果要采用自己的需要配置服务器的地址。正常情况下会帮助我们完成以下操作,但有时并没有完全引入需要自己检查。
目前针对react native 热更新的方案比较成熟的选择有microsoft公司的code-push 传送门,与react-native 中文网的pushy 传送门
本文选择code-push 用来进行对react-native 实现热更新,code-push 包含client端的配置,默认code-push 使用的服务器地址为微软的服务器,但是在国内的网速不是太好。因此可以使用code-push-server 搭建自己的服务器。本文主要介绍了实现热更新 client 和 server 端的配置。
React Native 热更新 借助 code-push-cli 脚手架完成
参考教程 https://blog.csdn.net/dounine...
code-push 常用命令可查看 https://www.jianshu.com/p/aa2...
官方code-push 命令操作以及简介可查看 https://github.com/Microsoft/...
1.react native 热更新 客户端配置
1.首先全局安装code-push-cli
npm install -g code-push-cli
2.然后注册一个code-push 账号(可使用github账号)
code-push register
3.注册成功后将获取的token在当前命令行输入并回车 (如下)
Enter your token from the browser: b0c9ba1f91dd232xxxxxxxxxxxxxxxxx #成功提示如下方 Successfully logged-in. Your session file was written to /Users/huanghuanlai/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.
如使用自己搭建的code-push-server 可忽略 2 ,3 步骤 并使用以下命令登录到code-push-server
登录可采用以下命令
code-push login http://***.***.***.***
4.使用code-push 添加一个 app
code-push app add AppName android react-native
添加成功后
code-push app add AppName android react-native #成功提示如下方 Successfully added the "dounineApp-android" app, along with the following default deployments: ┌────────────┬──────────────────────────────────────────────────────────────────┐ │ Name │ Deployment Key │ ├────────────┼──────────────────────────────────────────────────────────────────┤ │ Production │ PZVCGLlVW-0FtdoCF-3ZDWLcX58L6dec4087-57cf-4c9d-b0dc-ad38ce431e1d │ ├────────────┼──────────────────────────────────────────────────────────────────┤ │ Staging │ T0NshYi9X8nRkIe_cIRZGbAut90a6dec4087-57cf-4c9d-b0dc-ad38ce431e1d │
5.在自己项目中安装react-native-code-push
npm install react-native-code-push --save
6.将安装的包进行link
react-native link react-native-code-push
Scanning folders for symlinks in /Users/huanghuanlai/dounine/oschina/dounineApp/node_modules (8ms) ? What is your CodePush deployment key for Android (hitto ignore) T0NshYi9X8nRkIe_cIRZGbAut90a6dec4087-57cf-4c9d-b0dc-ad38ce431e1d #将刚才添加的Android App的Deployment Key复制粘贴到这里,复制名为Staging测试Deployment Key。 rnpm-install info Linking react-native-code-push android dependency rnpm-install info Android module react-native-code-push has been successfully linked rnpm-install info Linking react-native-code-push ios dependency rnpm-install WARN ERRGROUP Group "Frameworks" does not exist in your Xcode project. We have created it automatically for you. rnpm-install info iOS module react-native-code-push has been successfully linked Running ios postlink script ? What is your CodePush deployment key for iOS (hit to ignore) IjC3_iRGEZE8-9ikmBZ4ITJTz9wn6dec4087-57cf-4c9d-b0dc-ad38ce431e1d
此时为app 生成key的过程已完成,现需要在自己的项目中加入生成的key ,如果要采用自己的server需要配置服务器的地址。
需要检查如下信息 在执行react-native link 命令后 会将相关的依赖进入引入。正常情况下link 会帮助我们完成以下操作,但有时并没有完全引入需要自己检查。
(1) 在 android/app/build.gradle文件里面是否包含如下代码:
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
(2) 在/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")
(3) 在 android/app/build.gradle 是否包含
compile project(":react-native-code-push")
个人修改
在android/app/src/main/java/MainApplication 中
默认的代码我在编译后报错,如下,(如无报错可不用修改)
new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG),
修改后 (此时默认的为微软的热更新服务地址)
new CodePush("", MainApplication.this, BuildConfig.DEBUG),
如自己搭建的server 则忽略上面的修改,需要添加自己server的地址 如下
修改链接自己的热更新服务器(第一个参数为自己当前应用生成的key,最后一个参数为热更新服务器地址)
new CodePush("自己应用的key", MainApplication.this, BuildConfig.DEBUG,"http://***.***.***.***:3000/"),
在自己的项目的入口文件引入react-code-push 并写入检测更新与用户进行更新操作的逻辑代码
个人在app.js中修改
#先引入项目包 import codePush from "react-native-code-push"; #以下为自己的升级逻辑代码(放到入口文件中) codePush.checkForUpdate(deploymentKey).then((update) => { if (!update) { console.log("已是最新版本",update) } else { codePush.sync({ deploymentKey: deploymentKey, updateDialog: { optionalIgnoreButtonLabel: "稍后", optionalInstallButtonLabel: "立即更新", optionalUpdateMessage: "有新版本了,是否更新?", title: "更新提示" }, installMode: codePush.InstallMode.IMMEDIATE, }, (status) => { switch (status) { case codePush.SyncStatus.DOWNLOADING_PACKAGE: console.log("DOWNLOADING_PACKAGE"); break; case codePush.SyncStatus.INSTALLING_UPDATE: console.log(" INSTALLING_UPDATE"); break; } }, (progress) => { console.log(progress.receivedBytes + " of " + progress.totalBytes + " received."); } ); } })
热更新客户端的配置暂时完毕
此时可进行版本的发布,版本的发布命令参数如下 具体的参数说明可 查看官方文档
https://github.com/Microsoft/...
code-push release-react[--bundleName ] [--deploymentName ] [--description ] [--development ] [--disabled ] [--entryFile ] [--gradleFile ] [--mandatory] [--noDuplicateReleaseError] [--outputDir ] [--plistFile ] [--plistFilePrefix ] [--sourcemapOutput ] [--targetBinaryVersion ] [--rollout ] [--privateKeyPath ] [--config ]
发布之前需要将项目打包
# 执行打包 gradlew.bat assembleRelease
然后再项目的根目录下运行命令发布
(通过查看发布配置项,可看到支持指定文件发布,感兴趣的同学可研究其发布命令)
code-push release-react 应用名称 android -m true --des "描述" -t 版本
如无报错信息则发布成功,此时打开应用可查看到更新的提示。
2. React Native 热更新server端配置 (搭建 code-push-server)
所需环境 node
所需软件 mysql pm2
服务器环境 RedHat
1.首先搭建node 环境采用 nvm安装
安装步骤
# 下载安装NVM脚本 >>>curl https://raw.githubusercontent.com/creationix/nvm/v0.13.1/install.sh | bash >>>source ~/.bash_profile # 列出npm的版本号 >>>nvm list-remote # 选择其一安装即可, vn.n.n是版本号,此步骤耗时最久 >>>nvm install vn.n.n # 查看已安装的版本 >>>nvm list # 使用版本 >>>nvm use vn.n.n # 设置为默认版本 >>>nvm alias default vn.n.n
通过此步骤我安装的node版本为v8.11.3 npm 版本为5.6.0
2.安装mysql
#下载,在这里使用的是命令行下载,也建议在图形界面下载,然后上传至服务器 >>>wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm #使用rpm安装 >>>rpm -ivh mysql-community-release-el7-5.noarch.rpm #使用yum安装mysql-community-server >>>yum install mysql-community-server #启动服务 >>>service mysqld start #进入mysql,第一次进入无密码 >>>mysql -u root -p #命令行变成如下 mysql>
配置mysql
#进入配置文件,若未安装vim,建议先使用命令yum install vim安装vim >>>vim /etc/my.cnf #最后加上编码配置 [mysql] default-character-set =utf8 #此处字符编码必须和/usr/share/mysql/charsets/Index.xml中一致。 #不过一般情况下使用的都是utf8
设置密码
#下面三种方法需要进入mysql >>>mysql -u root -p #方法一 mysql>insert into user(host,user,password) values("%","user_name",password("password"); #方法二 mysql>set password for user_name = password("password"); #方法三 mysql>grant all on *.* to user_name@% identified by "password"; #下面这一种方法可直接在shell下设置密码 >>>mysqladmin -u root password "password"
远程连接
#进入mysql >>>mysql -u root -p #把在所有数据库的所有表的所有权限赋值给位于所有IP地址的root用户。 mysql> grant all privileges on *.* to root@"%"identified by "password";
3.下载code-push-server 并配置
# 下载源码 >>>git clone https://github.com/lisong/code-push-server # 进入源码目录并安装相应模块 >>>cd code-push-server && npm install # 修改配置文件 >>>vim config/config.js
数据库配置文件
db: { username: "root", password: null, database: "codepush", host: "127.0.0.1", dialect: "mysql" }, //七牛云存储配置 当storageType为qiniu时需要配置 qiniu: { accessKey: "", secretKey: "", bucketName: "", downloadUrl: "" //文件下载域名地址 }, //阿里云存储配置 当storageType为oss时需要配置 oss: { accessKeyId: "", secretAccessKey: "", endpoint: "", bucketName: "", prefix: "", // 对象Key的前缀,允许放到子文件夹里面 downloadUrl: "", // 文件下载域名地址,需要包含前缀 }, //文件存储在本地配置 当storageType为local时需要配置
文件存储部分
local: { storageDir: "/Users/tablee/workspaces/storage", //文件下载地址 CodePush Server 地址 + "/download" download对应app.js里面的地址 downloadUrl: "http://localhost:3000/download", #本地服务器地址 // public static download spacename. public: "/download" }, jwt: { // 登录jwt签名密钥,必须更改,否则有安全隐患,可以使用随机生成的字符串 // Recommended: 63 random alpha-numeric characters // Generate using: https://www.grc.com/passwords.htm tokenSecret: "INSERT_RANDOM_TOKEN_KEY" }, common: { dataDir: "/Users/tablee/workspaces/data", //选择存储类型,目前支持local,oss,qiniu,s3配置 storageType: "local" },
初始化数据库
# 初始化数据库 >>>./bin/db init --dbhost localhost --dbuser root --dbpassword password --dbport 3306 # 初始化数据库确保不报错才能启动服务 >>>./bin/www # 若无报错,则表示成功启动,默认端口为3000
可在本地打开浏览器进行检验,输入ip:3000 查看code-push-server 是否正常运行
本人通过pm2 管理 code-push-server 服务
# 安装pm2 npm install -g pm2 # 通过 pm2 启动服务并命名 pm2 start ./bin/www --name code-push-server # 查看当前服务进程 pm2 list ------------------------------------------------------- ──────────────────┬────┬─────────┬──────┬──────┬────────┬─────────┬────────┬─────┬───────────┬──────┬──────────┐ │ App name │ id │ version │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │ ├──────────────────┼────┼─────────┼──────┼──────┼────────┼─────────┼────────┼─────┼───────────┼──────┼──────────┤ │ code-push-server │ 1 │ 0.5.2 │ fork │ 4282 │ online │ 1 │ 0s │ 0% │ 11.5 MB │ root │ disabled │
此时server 配置已经完成,可直接进行热更新部署。
可通过 code-push 发布相关版本信息,并且支持回滚。更多骚操作可阅读官方code-push文档 https://github.com/Microsoft/...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/48880.html
摘要:原理踩坑起因最近在做框架的热更新,记录一下的原理和小坑。文件系统接收更改并通知。运行时通过请求这些更新。类似的问题还有很多,事件绑定手动插入并且没有销毁的定时器等,记得把这些副作用一起干掉。参考官方文档原理分析与实现 webpack hot-module-replacement 原理&踩坑 起因 最近在做san框架的热更新,记录一下webpack HMR的原理和小坑。 什么是HMR? ...
摘要:那时候所配置的任务监听匹配文件的变化自动刷新浏览器自动编译自动补全前缀多雪碧图合并拼图等等基于编译图片的任务,已经是完全满足我们的需求了。直至到后来在雪碧图的合并,多倍图的输出上,在上苦苦找寻不了比较完美的解决方案等等。 折腾 从 2015 到现在,短短的三年内,几乎每年折腾一下工作流的 更新换代 。从最早开始使用 Grunt 到 Gulp 再到 Webpack,再到 Rollup,...
react组件 参考:https://facebook.github.io/re... react的组件是其核心思想部分,react允许将整个ui设计分割称为独立的、可复用的隔离模块,react的组件是一个抽象的类,直接使用reacy.component是没有很大意义的,所以一般使用的方法就是定义一个 class 来继承这个component,并且需要实现方法 render();就像下面一样: ...
react组件 参考:https://facebook.github.io/re... react的组件是其核心思想部分,react允许将整个ui设计分割称为独立的、可复用的隔离模块,react的组件是一个抽象的类,直接使用reacy.component是没有很大意义的,所以一般使用的方法就是定义一个 class 来继承这个component,并且需要实现方法 render();就像下面一样: ...
小编写这篇文章的目的,主要是给大家讲解一下,关于实现配置热加载的方法,具体是怎么操作呢?下面就给大家详细的解答下。 背景 由于最近有相关的工作需求,需要进行增添相关的新功能,实现配置热加载的功能。所谓的配置热加载,也就是说当服务收到配置更新消息之后,我们不用重启服务就可以使用最新的配置去执行任务。 如何实现 下面我分别采用多进程、多线程、协程的方式去实现配置热加载。 使用多进程实现配...
阅读 3031·2021-11-24 09:38
阅读 719·2021-11-15 11:38
阅读 2812·2021-11-15 11:37
阅读 539·2021-11-12 10:36
阅读 3394·2021-10-21 09:38
阅读 3080·2021-09-28 09:36
阅读 2202·2021-09-22 16:01
阅读 4327·2021-09-22 15:09