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を追加します。
ここまでで、ディレクトリ構成はこのような感じになっていると思います。
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で既に用意されていないかを調べると良いかもしれません。