在我的职业生涯中，我了解到，当你把笨重和重复的日常工作自动化时，生产力就会提高。对于移动开发者来说，创建一个新的构建并将其运送给所需的用户是最乏味的项目之一。CI/CD已经存在了很长时间，但它对前端世界来说相对较新。尽管如此，我们有很好的工具可以帮助我们将繁琐而耗时的构建和分发过程自动化。我们之前的一篇文章关注于测试react-native应用，但现在我们更深入地研究用react native构建的应用。因此，我们为React Native（RN）开发人员设置了一个详细的教程，以使用Fastlane和Semaphore CI实现构建、测试和分发的自动化。
没有时间阅读更多内容？您可以查看我们的示例应用程序，其中有我们将涉及的所有内容!
TLDR；Fastlane介绍
Fastlane是一个由谷歌开发人员支持的开源平台，旨在简化Android和iOS的部署。它可以让你自动进行屏幕截图捕捉、测试版发布、代码演唱和应用商店发布。大量的社区行动和插件帮助你更快地实现流程自动化。
使用Fastlane构建iOS应用程序
让我们深入了解Fastlane对iOS应用程序的设置。安装Fastlane的建议方式是通过Ruby Bundler安装任何操作系统。你还需要确保你安装了Xcode命令行工具。这里有一个小的bash脚本来帮助你安装MacOS上所需的一切。
xcode-select --install
sudo gem install fastlane # Make sure ruby is already installed
设置Fastlane
现在你已经在你的机器上安装了Fastlane，现在是时候把它添加到你的React Native应用中了。由于Fastlane使用XCode项目进行设置，你将执行初始化命令ios/ directory。
cd ios
fastlane init
然后Fastlane会问你设置的目的。首先，你可以选择 "自动向TestFlight发布测试版"--不用担心，因为你将在本篇文章的后面添加其他通道。
接下来，它将要求你在认证成功后输入苹果开发者账户凭证。它将要求你选择应用商店，为你的应用连接团队。
一旦完成这些，iOS目录将在Fastlane/目录下有Fastlane和AppFile文件。这里的AppFile将有应用程序的证书，而Fastlane文件则是发生魔法的地方。你可以自定义这个文件，以酝酿更多的美好事物。
由于你在开始时选择了最佳分发选项，你的Fastlane文件将看起来如下⬇️ ：
platform :ios do
desc "Push a new beta build to TestFlight" # Description to define following lane
lane :beta do # `:<laneId>` this will be used via CLI to init lane
# 🪄 this will increment build number of project to ensure smooth deliver
increment_build_number(xcodeproj: "ReactNativeSemaphoreNew.xcodeproj")
# 🏗️ Build app, this method has other options few we will explore in next section
build_app(
workspace: "ReactNativeSemaphoreNew.xcworkspace",
scheme: "ReactNativeSemaphoreNew"
)
# ⏫ Its time to upload.
upload_to_testflight
end
end
宾果，🎉你已将Fastlane添加到你的应用程序中；为写出令人兴奋的车道而干杯。
创建 a 简单的构建任务
然而，你并不想把每次构建都上传到应用商店。让我们添加一个简单的构建任务，就像这样：
desc "Build"
desc "Build without code sign. Just to see if the build is working"
lane :build do |options|
build_app(
workspace: "./ios/ReactNativeSemaphoreNew.xcworkspace",
scheme: "ReactNativeSemaphoreNew",
skip_package_ipa: true,
skip_archive: true,
skip_codesigning: true,
xcargs: "ONLY_ACTIVE_ARCH=YES", # since for this demo we skip_codesigning, the build will be done for a simulator, and since XCode 12, this means arm64, thus build failing. Semaphore is running on x86 chips.
silent: true, # less logs
clean: true # clean before build making sure no caching issues
)
end
现在你可以使用Fastlane触发构建：
bundle exec fastlane build
在CI环境中，管理应用程序的签名和秘密可能有点困难。幸运的是，我们有Semaphore Fastlane插件来协助。Semaphore插件创建了一个临时钥匙链，将匹配设置为只读模式，并（可选择）重定向扫描和健身的日志输出。
现在你可以从你的应用程序的项目目录中安装该插件：
fastlane add_plugin semaphore
然后从你的Fastfile ：
before_all do
setup_semaphore
end
上传你的应用程序
上面的例子表明，用Fastlane发布应用程序只是一个单行的问题。对于App Store和Google Play商店的分发，Fastlane有现成的行动。此外，您还可以安装几个插件，用于通过不同渠道发布应用程序。
在React Native中使用它
你现在已经在你的ios/ 目录内设置了Fastlane，但作为React Native开发者，从平台目录中执行任务看起来有点尴尬。相反，你可以把它放在你的项目根部，通过NPM任务来运行它。
简单吗？是的，就是这样。只要把ios/Fastlane 目录移到你的项目根部，并在package.json 的脚本中添加构建任务：
{
...
"scripts": {
...
"fastlane-build-ios": "bundle exec fastlane ios build",
},
...
}
✅完成!
你机器上的Fastlane构建设置已经完成。现在你可以添加一些非常酷和有用的插件和动作来增强你的工作流程。
使用Semaphore CI实现自动构建
在Semaphore上每投入1美元，工程师就能获得41美元的再生生产力。这听起来可能有点夸张，但当你尝试不同的CI/CD平台时，你会发现它越来越现实。
凭借强大的基础设施和广泛的配置图像，为大多数使用案例量身定做。Semaphore可以让你的CI/CD快速实施，并以极快的速度执行。
设置Semaphore应用程序
现在你有一个Semaphore账户，你可以把我们的Github仓库作为一个项目导入我们的组织中。一旦项目被导入，就可以设置你的工作流程了。Semaphore CI为几个应用程序提供开箱即用的模板--包括iOS与Fastlane。这可以让你有一个很好的基线来开始，所以你可以根据你的需要来编辑这个。你也可以从一开始就选择一个自定义文件。
选择一个虚拟机 🎰
让我们定义一个VM来执行你的CI/CD流程。Semaphore提供带有XCode 11和XCode 12的苹果VM。我们将使用macos-Xcode12图像，它有几个常用于CI/CD工作流程的工具和实用程序。macos-xcode12是一个基于MacOS 11.5.1的定制镜像，为CI/CD而优化。
以下是它的外观sempahore``.yml
agent:
machine:
type: a1-standard-4
os_image: macos-xcode12
定义作业配置 ⚙️
这里的全局作业配置将帮助我们准备所有管道中的常见项目，如加载秘密、将文件移动到正确的地方，以及从GitHub中检查出我们的代码。序幕部分允许我们声明在执行任何管道块之前必须执行的命令。在我们的例子中，它将从GitHub repo中检出代码：
global_job_config:
env_vars:
- name: SAMPLE_ENV_VAR
value: "123abc"
prologue:
commands:
- checkout
块 - CI 🧪
现在是添加你的块的时候了。在我们的上一篇博文中，我们研究了测试React Native应用的前4个部分：
- 线性测试
- 单元测试
- 集成测试
- E2E测试
为了让这一切在CI中发生，你可以把这些分成3块：
- 安装依赖项
- 运行Lint
- 执行测试
- 单元和集成测试
- E2E测试
- 安装依赖项
在这块，你将为你的应用程序安装依赖性。请注意：运行你的应用程序的工具和实用程序已经在Semaphore图像中提供。
该模块的代码看起来像这样：
blocks:
- name: Install dependencies
task:
jobs:
- name: npm install and cache
commands:
# Get the latest version of our source code from GitHub:
- checkout
# Restore dependencies from cache. This command will not fail in
# case of a cache miss. In case of a cache hit, npm install will
# run very fast.
# For more info on caching, see https://docs.semaphoreci.com/article/68-caching-dependencies
- cache restore
- npm install
# Store the latest version of node modules in cache to reuse in
# further blocks:
- cache store
- 运行Lint
一般来说，对于所有的应用程序，尤其是大规模的应用程序，随着时间的推移，测试的执行成本会越来越高。因此，最好的办法是计划，这样可以节省时间，并确保没有任何基本问题，如代码中的错别字。
对于RN应用程序，ESLint可以方便地进行这种检查。在这个CI过程中，下面是linting块的样子：
- name: Run linter
task:
prologue:
commands:
- checkout
jobs:
- name: run eslint
commands:
- cache restore # To make it super fast
- npm run lint # These tasks are easier to define at js level
- 执行测试
现在是一些真正的嗡嗡声的时候了。我们为我们的示例应用程序添加了两种测试。
首先，单元和集成测试--用Jest和RNTL编写--需要JS环境来执行。第二，使用Detox的E2E测试，需要模拟器来执行。这两个套件都可以独立运行，所以你可以并行执行。这可以节省相当多的时间。
让我们定义一个有多个作业的块，这两个作业将被并行执行：
- name: Run tests
task:
prologue:
commands:
# Download source code from GitHub:
- checkout
jobs:
# Running JS test
- name: unit and integration tests
commands:
- cache restore
- npm test
- name: e2e tests
commands:
# Install dependencies for detox.js
- brew tap wix/brew
- brew install applesimutils
- cache restore
- cd ios
- pod install
- cd ..
# build and test
- npm run detox-clean-and-build-cache
- npm run detox-ios-build-release
- npm run detox-ios-test-release
# If tests pass, this artifact will be available with pipeline to use later.
- artifact push workflow ios/build/Build/Products/Release-iphonesimulator/ReactNativeSemaphoreNew.app
一切就绪!如果这些块成功通过，你可以保证你的应用程序没有我们已知的错误。而且，它可以在你的发布周期中进行下一步工作。
推广 - CD 🚀
自然，我们也讨厌用Fastlane和Semaphore手动完成繁琐的构建上传任务。幸运的是，很容易实现这一过程的自动化。使用Semaphore，可以通过推广部分进行分发，以便在满足某些条件时将你的管道分支出来。
我们把分发工作分为两部分。对于开发分支，通过Semaphore提供构建。对于主分支，它被上传到App Store Test Flight。
这是你的示例推广块：
promotions:
- name: 'Build App' # Store the build output
task:
jobs:
- name: "Build app"
commands:
- bundle exec fastlane build
auto_promote_on:
- result: passed
branch:
- develop # Job starts auto when tests pass on develop branch
- name: 'Test Flight Deployment'
task:
jobs:
- name: "Publish to App Store TestFlight"
commands:
- bundle exec fastlane beta
auto_promote_on:
- result: passed
branch:
- master # Job starts auto when tests pass on develop branch
对于App Store Test Flight发布，如果你已经通过Fastlane配置了所有的秘密，这将是非常直接的。如果你没有，本帖中的CD部分将为你描述。
下一步是什么？
如果你希望超越学习如何用react native构建应用程序，请随时探索我们丰富的CI/CD内容库及其他。你可以添加更多的内容，使你的工作流程更加顺畅和强大，比如添加Slack通知、使用webhooks、更新CHANGELOG文件，甚至创建GitHub发布。更重要的是，你可以使用许多其他的发布渠道，如Firebase来进行暂存发布。
我希望这个CI/CD集成可以为你节省大量时间，让你做最重要的事情：专注于你正在开发的下一个大事情......或者听我们的播客--Semaphore Uncut。
