React native 持续集成实践

在React Native项目开发中，咱们使用CircleCI + Fastlane搭建了一套持续集成的环境，来自动完成CI CD。

基本需求

• 每次push代码，CI能够自动跑测试，并在线查看测试覆盖率
• 自动打包ios app，发布到TestFlight
• 自动打包android app，发布到Crashlytics

使用到的工具

使用CircleCI搭建持续集成环境

设置基本环境

因为须要打包ios app，而ios app打包要求系统必须是macOS，因此须要选择CircleCI为macOS plan。而且在CircleCI设置的Build Enviroment里开启Build macOS project选项。

首先，在项目根目录上建立circle.yml文件（当时只有CircleCI 1的版本支持macOS plan），设置xcode版本，直接指定所需版本便可，咱们项目中当时使用的xcode版本为8.3.3。

machine:
  enviroment:
    xcode:
      version: 8.3.3

安装依赖

咱们能够先查看一下当前macOS环境中已经安装了哪些软件（macOS -
xcode 8.3.3）。能够看出当前macOS环境没有nvm，不能直接设置node的版本，因此咱们须要手动安装nvm，并安装所需版本的node。因为项目中使用的包管理工具是yarn，因此也须要安装yarn。

dependencies:
  pre:
    # 安装nvm
    - curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
    # 安装所需node版本，咱们项目中使用的是8.9.1
    - nvm install 8.9.1
    # 全局安装yarn
    - npm install yarn --global
  override:
    # 安装项目所需依赖
    - yarn install
  cache_directories:
    # 缓存依赖节省后续build的时间
    - ~/.cache/yarn
    - node_modules

自动运行测试

test:
  pre:
    - yarn lint
  override:
    - yarn test
  post:
    # 保存测试覆盖率文件夹，用于在线查看
    - mkdir $CIRCLE_ARTIFACTS/coverage
    - mv coverage/* $CIRCLE_ARTIFACTS/coverage

在运行测试以前，咱们要先运行lint来检查代码格式是否符合规范。yarn test用来运行测试。在测试运行完以后，要将测试覆盖率的文件夹保存在CircleCI上，用于在线查看测试报告。
在每次build以前，CircleCI会建立一个空白文件夹，并导出一个只读环境变量$CIRCLE_ARTIFACTS。在build结束以后，在这个文件夹里的内容会被保存下来，并连接到这个build。

CircleCI在每一个阶段都有默认的执行命令，咱们可使用下面三个特殊键来指定什么时候运行哪些自定义的命令：

• pre: 在该阶段命令前运行
• override: 自定义该阶段的命令
• post: 在该阶段命令后运行

使用fastlane自动进行IOS APP beta deplopment

fastlane是为iOS和Android app自动化测试部署和发布的最简单方法。 它能够处理全部繁琐的任务，如生成屏幕截图、管理code signing以及发布app。
fastlane提供了一系列的工具来处理这些工做，每个工具用来处理一项工做，能够根据项目来进行组合。如：gym用来打包app。

对于iOS app，会发布到TestFlight。

安装fastlane

确保已经安装最新的xcode命令行工具：

xcode-select --install

在macOS上使用brew安装fastlane

brew cast install fastlane

在系统的shell profile文件（如：~/.bash_profile）中设置环境变量：

export LC_ALL=en_US.UTF-8
export LANG=en_US.UTF-8

在本机上安装好fastlane以后，接下来咱们能够set up fastlane。

Set up fastlane

在React Native项目根目录下运行下面的命令：

cd ios
fastlane init

上面的命令运行完以后，会生成下图中的目录。

Appfile：该文件存储apple_id、app_identifier信息，通常不用修改
Fastfile：该文件包含全部用于发布app的信息

iOS beta deployment

打包 iOS App
fastlane使用gym acttion打包iOS App，将下面代码添加到fastfile文件中：

lane :beta do
  gym(scheme: "MyApp")
end

运行这个lane:

fastlane ios beta

若是运行成功，会获得一个.ipa的文件。但一般咱们会遇到一些问题。

配置xcode

设置bundle identifier同AppFile里的app_identifier
设置Signing - 不选中“Automatically manage signing”，使用手动的方式管理code signing。
设置Signing(Release)为release所用的code signing，咱们这里没有使用fastlane的match来进行管理，而是使用手动管理的方式。

上传到TestFlight

lane :beta do
  # 每次build，先从TestFlight取得最新的build number, 再加1
  increment_build_number(
    build_number: latest_testflight_build_number + 1,
    xcodeproj: "MyApp.xcodeproj"
  )
  # 打包 app
  gym(scheme: "MyApp")
  # 上传至TestFlight
  pilot(skip_waiting_for_build_processing: true)
end

至此，咱们完成了fastlane iOS beta deployment在本地的配置，已经可以正常打包

fastlane进行android app beta deployment

在打包iOS app的时候，咱们须要code signing，而android则须要google json key，以及签名密钥。

生成 release APK

生成签名密钥

可使用keytool命令行工具直接生成一个私有的签名密钥：

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

这条命令会要求你输入密钥库（keystore）和对应密钥的密码，而后设置一些与发行相关的信息。最后会生成一个叫作my-release-key.keystore的密钥库文件，密钥的有效期为10000天（特别注意：密钥的有效期一旦设定，后期没法修改）。

设置gradle变量

将my-release-key.keystore文件，放在项目的android/app目录下；
修改~/.gradle/gradle.properties 或 android/app/gradle.properties（咱们项目修改的是这个）文件，添加下面几句（将*替换为本身实际设置的密码）：

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

添加签名到项目的gradle配置文件
修改项目中的android/app/build.gradle文件并添加签名配置：

android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}

生成 release APK

cd android && ./gradlew assembleRelease

只需运行上面的命令，就能够生成android release APK。生成的APK能够在
android/app/build/outputs/apk/app-release.apk路径找到。
作完上面的这些，咱们就能够来配置fastlane来自动打包android apk并beta deploy到Crashlytics.

Set up fastlane

在React Native项目根目录下运行下面的命令：

cd android
fastlane init

运行fastlane init时，会要求输入google service json文件，能够先不填，后续取得json文件以后更新到android/fastlane/Appfile文件里（参考：collect your google credentials）。
上面的命令运行完以后，会在android目录下生成fastlane文件夹，里面主要有下面两个文件：

Appfile：该文件存储json_key_file（该字段用来设置上面说到的google service json文件目录）、package_name信息
Fastfile：该文件包含全部用于发布app的信息

android beta deployment

因为咱们选择将android app beta deploy到crashlytics，因此须要先给项目配置crashlytics。

• 首先到Fabric官网申请账号并登陆，会提示须要到android studio安装fabric插件。
• 按提示在android studio上安装好fabric插件以后，点击fabric图标，会出现以下图所示界面

• 在fabric界面登陆以后，一直向下选择，直到出现以下界面，先择Crashlytics，按提示进行配置便可（初次配置可能要等好几分钟）

配置 beta lane

lane :beta do
  # 打包android app
  gradle(
    task: "assembleRelease",
  )

上传android app至crashlytics

crashlytics(api_token: "YOUR_FABRIC_CRASHLYTICS_API_TOKEN",
              build_secret: "YOUR_FABRIC_CRASHLYTICS_BUILD_SECRET")
end

上面crashlytics的api_token以及build_secret能够在fabric origanizations里找到。

运行下面的命令，便可打包android app并发布到crashlytics。
cd android && fastlane android beta

在Fabric Crashlytics上查看你的app