iOS Mobile与React Native，Yarn，GreenhouseCI，CodePush和HockeyApp的持续集成

自从问世以来不到两年，但是React Native已经扰乱了移动开发。 React Native采用了卓越的开发经验，轻松的启动时间，“一次学习，随处编写”的精神以及热情的社区，因此赢得了本机和Web开发人员的一致好评。

随着React Native社区的不断发展和成熟，软件工程最佳实践开始显现。 任何平台开发的一项重要最佳实践是持续集成的概念。 一段时间以来，出于自动化的原因，自动化的构建和部署一直是Web开发社区的主要内容：效率低下，手动且易于出错的构建和部署在现代开发中不应该成为现实。

相同的信念已经进入移动开发，现在有大量支持自动化构建和部署的工具。 在本文中，我们将利用一套流行的工具（GreenhouseCI，CodePush和HockeyApp）以及React Native应用程序来实现强大的移动CI系统。

重要说明： GreenhouseCI不“正式”支持React Native，但其构建系统具有促进React Native应用程序CI的所有先决条件。 这就是下面的说明如此涉及的部分原因。

可以在此链接上找到此博客文章的示例应用程序。

假设条件

本博客文章假定以下内容：

• 您具有React Native开发的工作知识，包括NPM的工作知识
• 您已经为iOS应用设置了证书和配置文件
• 您正在使用Yarn管理您的React Native依赖项

关于版本的注意事项

此博客文章的编写具有以下版本：

• 节点：6.9.0（LTS）
• React Native：0.36
• 纱：0.15.1

贸易工具

在开始之前，需要注意这些工具的含义以及它们对于有效的移动CI系统的重要性。

• GreenhouseCI ： “ CI即服务”平台，可轻松配置适用于本机和混合应用程序的移动CI
• Yarn ：Facebook创建的程序包管理器，允许进行快速，确定性的依赖项管理
• CodePush ：由Microsoft构建的库和基础结构，可通过无线（OTA）更新基于JavaScript的混合平台
• HockeyApp ：Microsoft的一项服务，允许将应用程序Beta有效地分发给测试人员

和谐地使用所有这些工具，使移动开发人员可以将更多的精力放在他们产品的质量上，而手动准备好要测试和部署的应用程序效率低下。

我们的目标

到本文结尾，我们将完成以下工作：

• 为我们的iOS React Native应用程序设置CodePush项目
• 在我们的iOS React Native应用程序中集成了CodePush
• 为我们的iOS React Native应用设置一个HockeyApp
• 为我们的iOS React Native应用程序设置GreenhouseCI，将代码部署到CodePush并将该应用程序上传到HockeyApp

CodePush指令

步骤1：CodePush设置

假设我们的应用程序已准备好用于CI，让我们首先与CodePush集成。 幸运的是，CodePush团队创建了一个我们可以轻松使用的React Native模块。

在RN应用程序根目录的终端中，执行以下命令：

• npm install -g代码-push-cli
• 纱线添加反应本机代码推

这些命令将在本地开发计算机中设置CodePush，并为您的项目添加对react-native-code-push的依赖项

步骤2：使用CodePush-ify我们的应用程序并将其发布到CodePush

现在已经安装了CodePush，让我们开始吧。

1. 在终端中，执行代码推送寄存器 （在浏览器中显示以下屏幕）

2.选择一个身份验证提供程序。 获得授权后，浏览器将重定向到具有唯一访问密钥的页面。 将其复制并粘贴到步骤1中的终端中，然后按Enter。

3.在终端窗口中，执行代码推送应用程序添加[YourAppName] 。 在此示例中，我们将在代码推送应用程序中键入add GreenhouseExample 。 记下生产和登台部署密钥。

4.在终端窗口中，执行react-native链接react-native-code-push。

5.当要求您提供Android的CodePush部署密钥时，请复制并粘贴步骤3中的暂存密钥。

6.当要求您提供iOS的CodePush部署密钥时，请复制并粘贴步骤3中的暂存密钥。

7.将codePush高阶组件应用于index.ios.js

8.在终端窗口中，执行以下命令（在此示例中，[YourAppName]为GreenhouseExample）：

• 代码推送发布反应[YourAppName] ios

CodePush摘要

通过上述步骤，我们已将CodePush集成到我们的React Native应用程序中，这样它就可以在恢复应用程序时自动从CodePush中提取所有JavaScript更新。 我们还向CodePush发布了您的React Native捆绑包的最新副本。

HockeyApp说明

步骤1：HockeyApp设定

现在我们有了一个带有CodePush的React Native应用程序，让我们设置HockeyApp，以便我们可以有效地分发和管理我们的移动应用程序。

1. 浏览到https://hockeyapp.net并注册一个帐户
2. 出现在下面的窗口后，请单击第三个选项（改为手动创建应用）

3.指定以下值

平台： iOS

发布类型 ：Beta

标题 ：[您的应用的标题]

捆绑包标识符 ：[您的应用程序的CFBundleIdentifier在您的Info.plist中]

4.按保存

5.返回您的HockeyApp仪表板

HockeyApp摘要

通过上述步骤，我们为iOS HockeyApp发行版设置了空白框架。

GreenhouseCI说明

步骤1：设定CI

1. 在https://greenhouseci.com上注册帐户后，单击“添加新应用”
2. 在存储库URL中，将该URL粘贴到您的React Native应用程序的Git存储库中。 请注意，如果您有私人存储库，则可以提供用户名/密码或SSH凭据
3. 让GreenhouseCI从您的仓库中扫描项目。 它应该检测到iOS应用程序。
4. 对于目标，选择最后带有[方案]的选项
5. 上载您的配置文件
6. 从钥匙串访问权限中上传证书（导出为.p12）
7. 按“保存”
8. 等待构建过程完成。 它应该失败。

步骤2：添加支持脚本和环境变量

您会注意到上面的构建中断，因为它找不到“ CodePush.h”。 这是因为我们尚未通过Yarn / NPM安装React依赖项。 下面的步骤概述了如何集成一些脚本以使此CI流程正常工作。

1. 从示例项目本地保存gh_post_clone_script.sh。 该脚本在您的构建服务器上全局安装react-native-cli，yarn和code-push-cli。
2. 从示例项目本地保存gh_post_build_script.sh。 该脚本将最新的JavaScript推送到我们之前设置的CodePush项目。
3. 在您的GreenhouseCI项目中，单击“构建”按钮左侧的齿轮图标以进入项目设置

4.打开一个终端窗口，然后键入以下命令： code-push access-key add“ GreenhouseCI”。 复制生成的访问密钥。

5.返回GreenhouseCI项目，单击左侧的“环境”选项卡。 将以下内容用作“环境变量”文本框的模板。

平台= ios
PROJECT_NAME = [您建立的CodePush项目名称]
CODE_PUSH_ACCESS_KEY = [您从步骤4复制的访问密钥]

6.按“环境变量”文本框下的保存。

7.在“环境文件”部分下，按“添加”。 从步骤1中选择gh_post_clone_script.sh文件，并将其命名为GH_POST_CLONE_SCRIPT 。

8.在“环境文件”部分下，按“添加”。 从步骤1中选择gh_post_build_script.sh文件，并将其命名为GH_POST_BUILD_SCRIPT 。

9.单击左侧导航上的“测试”链接。 取消选中“单元测试”。 这些使Xcode单元测试暂时无法运行。 我假设您将在React端设置单元测试，也许还要设置自己的GH_PRE_BUILD_SCRIPT。

10.返回到GreenhouseCI项目的主页，然后按Build。

步骤3：整合HockeyApp

现在我们已经在GreenhouseCI上正确构建了React Native应用程序，我们希望将结果应用程序发送到我们先前设置的HockeyApp。

1. 浏览到https://hockeyapp.net并登录
2. 单击屏幕右上角的头像，然后单击帐户设置
3. 在左侧导航中，单击“ API令牌”
4. 使用以下参数创建API令牌

应用 ：所有应用

权利 ：完全访问

名称 ：GreenhouseCI

5.复制结果令牌

6.浏览回到https://greenhouseci.com并转到您的项目

7.单击“生成”旁边的齿轮图标以转到项目设置

8.单击发布，然后展开“发布到HockeyApp”

9.粘贴步骤5中的令牌，然后将Release类型指定为“ Beta”。 单击保存。

10.返回GreenhouseCI主页，然后按Build。 构建应该成功，并且您应该在HockeyApp上看到新版本的应用程序

GreenhouseCI摘要

上面的步骤将所有内容组合在一起。 GreenhouseCI从您的git存储库中删除，从NPM安装必备软件，运行Yarn，将您最新的React Native捆绑包上传到CodePush，然后将生成的应用程序上传到HockeyApp。 ew！

接下来是什么？

上面的构建使您可以在HockeyApp上进行Beta测试。 您会注意到我们不会自动发布到App Store：我们会将其保存为另一篇文章！

诚然，移动CI的一般状态不如其他平台成熟。 但是，使用GreenhouseCI，CodePush和HockeyApp之类的工具，移动开发人员或开发团队可以“设置并忘记”其构建，并专注于迭代地改进其产品！

敬请关注！

在下一篇文章中，我们将讨论如何为您的React Native Android应用完成相同的设置。

此外，我已经测试了GreenhouseCI的竞争对手Bitrise的React Native应用程序。 他们在设置构建版本时提供了更现代的UX和具有竞争力的价格，因此也希望在以后的文章中看到它们。

骇客入侵！