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