2019年05月15日

React Nativeにfastlaneを導入する手順

こんにちは。graphy事業部の遠藤と申します。

今回はReact Nativeを使ったアプリ開発におけるfastlaneの導入について解説していきたいと思います。

fastlaneについて

fastlaneはiOS/Androidアプリのビルドからリリースまでを簡単に行うことができるツールです。

React Nativeでアプリ開発をするにあたって、以下のような場面でfastlaneが役に立ちます。

iOSアプリ開発に必要なProvisioning Profilesの管理
CI/CDでアプリのビルドからデプロイの実装
CLIでアプリをiTunesConnect/GooglePlayConsoleにアップロード

fastlaneのインストール

fastlaneのインストールを設定していきます。

最初にGemfileの雛形ファイルを作成します。 GemfileはReact Nativeプロジェクトのルートに作成します。

bundle init

作成したGemfileを編集します。

# Gemfile
source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "fastlane" # この行を追加

最後にbundlerでインストールします。

bundle install --path vendor/bundle

fastlaneのコマンドが使えるようになったかどうか確認しましょう。

bundle exec fastlane -v

fastlaneでアプリをビルドする

fastlaneの設定を行っていきます。

fastlaneディレクトリを作成し、その中にFastfileを追加します。

ここまでで、ディレクトリ構成はこのような感じになっていると思います。 Directory

Fastfileの中身を編集します。

プロジェクトファイルのパスやビルドスキーマの名前を設定している部分がサンプル用の設定になっていますので、適宜修正してください。

# Fastfile
platform :ios do
  lane :build_dev do
    gym(
      workspace: "ios/sample.xcworkspace",
      output_directory: "ios",
      scheme: "sample-dev",
      export_options: {
        method: "ad-hoc"
      }
    )
  end
end

platform :android do
  lane :build_dev do
    gradle(
      task: "assembleDevRelease",
      project_dir: "android"
    )
  end
end

編集が完了したら、fastlaneのコマンドでビルドすることができます。

iOSの場合

bundle exec fastlane ios build_dev

Androidの場合

bundle exec fastlane android build_dev

iOSの場合はoutput_directoryで指定したパスに、Androidの場合はandrod/app/build/outputs/apk内に成果物が出力されていると思います。

fastlaneで成果物をVisual Studio App Centerにアップロードする

fastlaneでビルド後に、その成果物がVisual Studio App Centerにアップロードされるようにするための手順について記載していきます。 Visual Studio App Centerは、アプリのCI/CD環境構築に使えるサービスです。

fastlaneには標準でVisual Studio App Centerにアップロードするためのアクションが用意されていません。ですが、fastlane-plugin-appcenterというfastlaneのプラグインを追加することで、アップロードをするための処理を簡単に実装することが出来ます。

fastlaneコマンドを使ってプラグインを簡単に追加することができます。

bundle exec fastlane add_plugin appcenter

fastlaneフォルダにPluginfileが作成されていることが確認できます。

fastlane/
├── Fastfile
└── Pluginfile

# Pluginfile
gem 'fastlane-plugin-appcenter'

Fastfileに成果物をアップロードするためのアクションを追記していきます。 API Tokenなどのプロジェクトによって違う値は、適宜編集してください。

# Fastfile
platform :ios do
  lane :build_dev do
    gym(
      workspace: "ios/sample.xcworkspace",
      output_directory: "ios",
      scheme: "sample-dev",
      export_options: {
        method: "ad-hoc"
      }
    )
    # ここを追加
    appcenter_upload(
      api_token: "<API_TOKEN>",
      owner_name: "<OWNER_NAME>",
      app_name: "<APP_NAME>",
      ipa: "ios/sample-dev.ipa",
      notify_testers: true
    )
  end
end

platform :android do
  lane :build_dev do
    gradle(
      task: "assembleDevRelease",
      project_dir: "android"
    )
    # ここを追加
    appcenter_upload(
      api_token: "<API_TOKEN>",
      owner_name: "<OWNER_NAME>",
      app_name: "<APP_NAME>",
      apk: "android/app/build/outputs/apk/dev/sample-dev-release.apk",
      notify_testers: true
    )
  end
end

ここまで終われば、build_devはビルドからアップロードまでの処理が走るようになると思います。 Visual Studio App Centerの場合、プラグインを追加して対応しましたが、他のサービスでは標準でアクションが用意されているものが多いと思います。

標準で用意されているアクション一覧

他のサービスを使っている場合は、Fastfileのアップロード処理部分を置き換えるだけで対応できると思います。

最後にpackage.jsonにfastlaneコマンドを追記しておくと、使えるコマンド一覧がまとめられて良いかもしれません。

"scripts": {
  "ios:deploy", "bundle exec fastlane ios build_dev",
  "android:deploy", "bundle exec fastlane android build_dev",
  "start": "node node_modules/react-native/local-cli/cli.js start",
  "test": "jest"
}

まとめ

fastlaneの導入とビルドからデプロイを行うまでの手順を説明しました。

アプリ開発で必要になりそうなアクション一覧が他にも載っていますので、自分でスクリプトを組む前にfastlaneで既に用意されていないかを調べると良いかもしれません。