React Native(リアクトネイティブ) アプリの CI/CD パイプラインを、CircleCI Orb で効率化しよう

React Native(リアクトネイティブ) とは?

React Native とは、Facebook がオープンソースとしてリリースした、クロスプラットフォームアプリ開発のためのフレームワークです。

React.js という Web UI を構築するための JavaScript ライブラリを活用し、iOS / Android へのネイティブアプリケーションを開発することができます。

そのため、React / JavaScript で フロントエンド開発をしているエンジニアでもネイティブアプリを開発しやすいというメリットがあります。

また、ホットリロードで簡単にデバッグが行えるなど、開発効率が高い点も React Native の特徴の1つです。

React Native は Facebook 社が提供している Facebook、Instagram 以外にも様々なモバイルアプリで導入 されています。

React Native Orb を使う

iOS / Android アプリの CI / CD パイプラインと同様、CircleCI を使って React Native の CI / CD パイプラインを構築することができます。

1からパイプラインを構築してもらうことも可能ですが、React Native の CI/CD パイプラインは iOS/Android それぞれのプラットフォームで下記のことなどを考慮しながら構築しないといけないため、難易度が高くなりがちです。

• 適切なマシン・Docker イメージの選択
• 依存関係のインストール・キャッシュ(npm, CocoaPods, Gradle)
• ビルドキャッシュの利用

また、設定ファイル(.circleci/config.yml)の記述量も多くなってしまいがちです。

この問題を解決するために、CircleCI Orb を活用することをおすすめします。

Orb とは CircleCI の設定ファイルを再利用可能な形でパッケージされたものであり、設定ファイルをよりシンプルにすることができます。

React Native CI / CD パイプラインを構築するにあたって、まず React Native Community が 提供する Orb を試すことをお勧めします。

React Native Orb を使うことによって、React Native のCI/CD パイプラインにおいて難易度が高い部分を簡単にすることができます。

• 依存性のインストール・キャッシュ(yarn, CocoaPods)
• iOS / Android ネイティブアプリへのビルド(cache パラメーターを true にすることによって、ビルドキャッシュを活用してビルドを高速化させることができます)
• iOS シミュレーター・Android エミュレーターの起動

また、React Native Orb では Detox によるテスト実行もサポートしています。

Detox は Wix 社がオープンソースで公開している e2e テストフレームワークです。

JavaScript で iOS/Android のe2eテストを実行させることができるため、React Native ととても相性が良いです。

React Native Orb を使うことによって、この Detox の e2e テストを CircleCI 内の iOS シミュレーター・Android エミュレーターで実行させることが可能です。

他の CircleCI Orb と組み合わせる

React Native Orb を使うことによって、React Native の CI/CD パイプラインを簡単に構築することができます。

しかし、React Native Orb だけでは状況に合った CI/CD パイプラインが構築できない場合もあります。

その場合には、他の CircleCI Orb と組み合わせることも可能です。

ここでは CircleCI が提供している Orb をいくつか紹介します。

• circleci/node
• circleci/ruby
• circleci/android
• circleci/macos

circleci/node

circleci/node Orb は Node.js のインストール・キャッシュなどを簡単に行うことができる Orb です。

React Native の CI/CD パイプラインにおいて、iOS/Android に依存しない下記のような Node.js のタスクの実行に役立ちます。

• ESLint などの Lint / コードフォーマットの実行
• Jest などの UnitTest の実行
• Typescript / Flow などの型チェックの実行

例えば、circleci/node Orb を使うことによって、UnitTest を実行する設定ファイルをここまで簡潔にすることが可能です。

version: 2.1

orbs:
  node: circleci/node@4.7.0

workflows:
  test: 
    jobs:
      - node/test

circleci/ruby

circleci/ruby Orb は Ruby のインストール・キャッシュを簡単に行うことができる Orb です。

React Native の開発においては、ビルド・リリースの自動化のために fastlane という Ruby 製のライブラリを使うことが多いです。

いくつかの CircleCI のマシンではデフォルトで fastlane がインストールされている場合もありますが、ローカル環境と同じバージョンの fastlane を利用することを推奨しており、そのインストールを簡単に行いたい場合にはこちらの Orb を使うことをおすすめします。

version: 2.1

orbs:
  ruby: circleci/ruby@1.2.0
  android: circleci/android@1.0.3

jobs:
  # iOS
  fastlane_ios:
    macos:
      xcode: 12.5.1
    steps: 
      - checkout
      - ruby/install-deps:
          app-dir: ios
      - run:
          command: bundle exec fastlane ios_beta
          working_directory: ios

  # Android
  fastlane_android:
    executor:
      name: android/android-machine
    steps:
      - checkout
      - ruby/install-deps:
          app-dir: android
      - run:
          command: bundle exec fastlane android_beta
          working_directory: android

workflows:
  test: 
    jobs:
      - fastlane_ios
      - fastlane_android

circleci/android

circleci/android Orb は、Android にまつわる下記のような処理を簡単に行うことができる Orb です。

• ビルド
• Gradle, ビルドのキャッシュ処理
• Android エミュレーターの起動 / UIテストの実行

また、Nested Virtualization と x86 エミュレーターをサポートしている Android Machine Executor を簡単に利用することができます。

circleci/macos

circleci/macos Orb は macOS での CI / CD パイプラインで便利な処理がまとめられている Orb です。

特に React Native においては、iOS シミュレーターを事前に起動できる機能が役立つと考えています。

steps:
  - macos/preboot-simulator:
      version: "15.0"
      platform: "iOS"
      device: "iPhone 13 Pro Max"

おわりに

このように CircleCI Orb を利用することで、簡潔に React Native アプリの CI / CD パイプラインを構築することができます。

また Flutter の記事 で詳しく紹介していますが、下記の CircleCI の機能は React Native においても利用してもらうことができます。

• カスタムリソース
• Insights
• iOS シミュレーター / Android エミュレーター

これらを活用して React Native での開発効率を向上していただければと思います。

React Native おすすめ情報一覧

• React Nativeのビルドとテスト