【codemagic】FlutterプロジェクトにてビルドからFirebase App Distributeの配布までをcodemagicで自動化する手順【Flutter】

こんばんは。 pregum_foxです。

今回は個人開発毎回ビルドを手元で行うと、時間が溶けてしまうのでcodemagicを利用して

GitHubのレポジトリのdevelopブランチにPRがマージされたタイミングでビルドからFirebase App Distributeで配布を行う処理を自動化する手順を備忘録として残しておきます。

以下目次です。

この記事を読んでわかること

codemagicを用いてFlutterの開発環境のビルド〜Firebase App Distributionの配布までの設定方法

事前に準備が必要なもの

必須

• codemagicのアカウント
• GitHubのアカウント
  • ビルド対象のリポジトリ（Flutterプロジェクト）

iOSでのビルドする場合

• code signing certificate(*.p12 ファイル)
  • p12ファイルの作成方法はこちらやこちら の記事が参考になります。
• プロビジョニングプロファイル(*.mobileprovision)
  • 今回は開発環境なのでiOS App Development でOK

Androidでビルドする場合

• keystore
  • 今回は開発環境なので、~/.android/debug.keystore のkeystoreを使用します。残りの3項目は左記のkeystoreの場合は、いじっていなければ以下の想定です。
• alias
  • androiddebugkey
• storepass`
  • android
• keypass
  • android

Firebase App Distributionで配布する場合

• Firebaseのアカウント

手順

firebase-tools コマンドのインストール

1. こちらのページ を参考に firebase-toolsコマンドを追加
   firebase -V コマンドでバージョンが表示されていればOK
2. Flutterプロジェクトfirebase login コマンドで Firebaseプロジェクトを作成する為にFirebaseアカウントへログインします。
   ログイン後、Success! Logged in as <メールアドレス> と表示されていればOK

firebaseプロジェクトの初期化

1. firebase init コマンドを実行します。
2. Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. には Extensions: Set up an empty Extensions manifest のみチェックを入れてEnter
3. Please select an option には Create a new project を選択してEnter
4. Please specify a unique project id ときかれたので、サンプル例としてsample-for-codemagic と入力して Enter
5. What would you like to call your project? には そのまま Enter
6. あとは自動で生成されるので、待機
7. 最後まで行ったらfirebase関連のファイルが追加されている

firebaseパッケージをFlutterプロジェクトへ追加

1. ビルド対象のリポジトリにfirebase_core パッケージを追加します。

2. flutter pub add firebase_core コマンドを叩いて、firebase_core パッケージを追加します。

1. flutterfire configure コマンドを実行して、google-service.json などのファイルを自動的に設定します。
2. コマンド実行後、サポートするPlatformを聞かれるので、androidとiosを選択して、Enterを叩きます

1. すると自動的にFirebaseのプロジェクト内にAppが生成されて、androidとiosのFirebase App IDが生成されています。
2. あとは実際にcodemagic側で設定を行なっていきます

codemagicの設定

1. 以下のサイトでサインアップを行う。 GitHub上にリポジトリを置いているので、GitHubのアカウントを使用してサインアップを行います。

codemagic.io

1. ログイン後、右上のAdd application ボタンをタップして、GitHub を選択します。

1. そのあと、対象のリポジトリを選択して、Flutter (via Workflow Editor) を選択します。
   もし存在するはずのリポジトリが選択できない場合は、GitHub integration のリンクからインテグレーション対象のリポジトリリストに追加してください。

1. 選択できたら画面下部のFinish Add application ボタンをクリックします。

2. すると下記のような画面が出るので、諸々設定をしていきます。

Build triggers

1. 最初はBuild triggers にて、実行するタイミングを設定します。
2. 今回はdevelopにpushされた時としておくので、Trigger on push にチェックをいれます。
   • これでPRをdevelopにマージしたタイミングで実行されるようになります。
   • 
   • .env の追加が必要な場合はこちら の記事が参考になりました。

Build

1. 次にBuild時のコマンドの設定を行います。
2. 特に操作はありませんが、Androidの配布の場合は、Android build format を Android app bundle and universal apk　を選択しておく必要がありました。

以下の箇所でリリースオプションや--dart-define等のコマンドラインの設定を行います。

Distribution

android code signing

1. まずはEnable Android code signing にチェックをいれます。

2. 冒頭に書いていた通りに~/.android/debug.keystore ファイルをkeystoreにドラッグ&ドロップし、

それぞれ設定します。

• keystore password: android
• Key alias: androiddebugkey
• key password: android

iOS code signing

私はManualで設定しましたが、Automaticで良い方はそちらの方が簡単かもしれません。

1. iOSは証明書からp12ファイルを作成して、Code signing certificate にドラッグ＆ドロップします。

2. keychian にて、p12ファイル作成時にパスワードを聞かれるので、今回は未記入で対応しました。

3. Provisioning profile は実機の端末にて起動時に使用したプロビジョニングプロファイルをドラッグ＆ドロップしました。

Firebase App Distribution

Enable publishing to Firebase App Distribution にチェックを入れて、それぞれ設定していきます。

Firebase service account

1. Firebaseのコンソール上で 「サービスアカウント」タブにある「新しい秘密鍵を生成」ボタンをタップして生成されたjsonファイルを設定します。

Android Firebase app ID

1. Firebaseコンソール上で、プロジェクトの設定 ＞ マイアプリのアプリIDを設定すればOK

iOS Firebase app ID

1. 同様にFirebaseコンソール上で、iOSのアプリIDを設定すればOK

ただ、iOSの場合は、bundle idがプロビジョニングプロファイルの設定とFirebaseの登録情報が異なる場合は、ビルドエラーになる為注意が必要です。

Tester groups for Android app / Tester groups for iOS app

どちらもFirebaseのApp distributionで設定したグループ名を設定すればOK

あとAndroid artifact type をapkにすることを忘れずに

あとは右上のStart new buildボタンから、開始すると手動で実行確認することができます。

雑感

今回は細かく書き出すと、分量が増える為codemagicの箇所に絞って説明しました。

使ってみて実際に一人で使用するだけでも楽なので、今後導入できそうなプロジェクトには活用していきたいなと思いました。

ここまで読んでいただきありがとうございました。