Zenn
🙆‍♂️

Flutter × Bitriseでappstore＆playストアにまとめてデプロイが快適すぎる件

2022/11/08に公開
Flutter
デプロイ
CI
Bitrise
CD
tech

ちょっと宣伝させて（割愛可）

新しいアプリをリリースしました。

その名も「タコチャート」🐙
アプリの内容は、自己/他己分析サポートサービスみたいな感じで、
近しい人に、自分の他己分析を気軽に依頼できるというものです。

合わせて、最近出会った人との会話メモ帳アプリにも使える、便利な代物です。笑

これを今後、採用面接とか、恋活とか、そういう市場で展開できないかな？
と思いながら作戦を練っているところです　😄

ぜひこの記事を見た方は、IOSかAndroidのアプリをダウンロードして、友人や親御さんなど、
色んな人にレビューをお願いしてみてください🙏
そして、使い心地や改善点など、ここでも、アプリのお問い合わせからでも教えて頂けると嬉しいです。

本題

このアプリをリリースする上で、CI/CDツールをBitriseにしました。
FlutterだとCodeMagicも有名ですが、同じコミュニティにいるやまたつさんの記事が
とてもわかり易く書いていたので、それを参考にして自分もやってみようと思ったのがキッカケです。

https://qiita.com/yamatatsu10969/items/3590cc78c62e92718f28

今回は、CI/CDの構築初心者の方でも、よりわかりやすいように、自分が作ったBitriseの
ワークフローと、設定方法を(secret変数は隠しつつ)公開しようと思います！

もちろん、わたしもCI/CD初心者なので、もっと良い方法や、よりパフォーマンスがいい方法
があったらコメントにて教えて頂けると嬉しいです！
また、もしかしたら個別設定で共有漏れしているかもしれないので、
もしもデプロイがうまくいかないという方も、コメント頂けると、この記事が
より制度の高いものになるかと思うので、教えて欲しいです🙇‍♂️

このワークフローでどこまでできる？

  • Flutterで必要なCIの自動化
    • 特定バージョンでのflutter build、テスト、環境変数ファイルの設定
  • iosアプリをappStoreに上げるまでの処理自動化
    • アーカイブ〜signing~デプロイ
  • androidアプリをgooglePlayに上げるまでの処理自動化
    • keystorefileの設定〜デプロイ
  • テスターに配布するためのアプリデータ生成

最初の設定は少し大変でした。
しかし、今までは利用しているmacでそれぞれコマンドに打ったり、
本番用の書き換えをしたりしてbuildやアーカイブをしていたため、
なかなか大変で毎回ミスしないかヒヤヒヤ😓

それが、赤く囲んだボタンクリックをして、あとはコーヒー飲みながら待つだけ。😋

しかも、一度設定すれば、端末の設定に依存することがなくなるので、新しいMacを買っても
PCに証明書や、buildのための設定や、Xcodeのversionが、、、とか悩む必要なし👍

勝手に各ストアのレビューページないし、リリースページに設定された時の快感は
サウナ→水風呂で整った時と同じくらいの快感をあなたに与えるでしょう😊

アプリの構成

  • Flutter version 3.3.6
  • FlutterFireでFirebaseの設定構築済み
  • 環境変数ファイルを使用
  • ios/androidどちらにもリリースしたい

ワークフローの中身

では実際のワークフローの中身のキャプチャを添付します。

基本的に、上のフローは新規ワークフロー作成の初期状態から

  • androidのデプロイに必要なキーファイルのダウンロード
  • 特定のFlutterバージョンのインストール
  • スクリプトによる.envの生成
  • appstoreのデプロイに必要なファイルのインストール
  • Flutter buildの追加設定
  • xcodeでのアーカイブ
  • appStoreへのデプロイ
  • GooglePlayへのデプロイ

のフローを追加 or 修正をした形になります。

カスタマイズした部分の説明

androidのデプロイに必要なキーファイルのダウンロード

FileDownloaderのセクションでは、以下のように設定しています。

  • 「Download source URL」に$BITRISEIO_ANDROID_KEYSTORE_URL
  • 「Download destination path」に$HOME/keystores/release.jks

keystoreの作成方法等は、色んな方が記事にしてくれているので、
そちらを参考にしてください。

では、このファイルはどこに設定するか？
というのは、以下のキャプチャに貼り付けておきますね。

基本的に、署名をする際に必要なファイルは「Code Signing」のセクションに設定していきます。
iosで必要なファイルもここで設定します。
後で改めて説明します。

特定のFlutterバージョンのインストール

シンプルに、設定したいバージョンを「Flutter SDK git repository version」に記載するだけです。
(※ 自分の場合は最新の3.3.6)

スクリプトによる.envの生成

自分のアプリもですが、環境変数で設定したい項目があった場合、
env変数で定義する必要があると思います。
しかし、gitにはコミット対象外。
ではどうやって.envを設定したら良いの？？😂

という問いに1つの方法を提案したいと思います。
それは、

  • 本番用の.envのファイルの中身をbase64エンコードし、EnvVars or Secretsに設定
  • スクリプトのセクションでデコードしてファイルを追加
    という方法です。

エンコードする方法は、コマンドでもできますし、サイトでも可能です。

記載しているデコード＆ファイル設定のスクリプト

おそらく、#がついている箇所はコメントアウトなので消しても問題ないと思います。笑

#!/usr/bin/env bash
# fail if any commands fails
# set -e
# debug log
# set -x


# or run a script from your repository, like:
# bash ./path/to/script.sh
# not just bash, e.g.:
# ruby ./path/to/script.rb

echo $ENV_FILE | base64 -d > .env

appstoreのデプロイに必要なファイルのインストール

「Certificate and profile installer」というセクションを追加
※ 内容はデフォルトのままでいいと思います。

あと、事前に、

  • ダッシュボード > 右上のアカウントメニュー > Profile settingsを押して、
  • Apple Service Connectionをクリック

ここで出てくる認証を済ませておいたほうが良いと思います。

また、必要なファイルに関して「Code Signing」に以下の2箇所にファイルを設定します。

  • PROVISIONING PROFILE
  • CODE SIGNING CERTIFICATES

※ adhoc用のファイルも設定されていますが、appstore配布目的であれば、
export type: app-storeのファイルだけあれば十分だと思います。

Flutter buildの追加設定

自分はビルド時の環境分けの方法として、dart-defineを使ったやり方をしているので、パラメーターを少し追加しています。

以下のキャプチャのように、 「Additional params for flutter build」の部分に
--dart-define=FLAVOR=prodというコードを追加しています。

あと、今回はios/android同時デプロイなので、Platformをbothにしています。
片方のみで良い場合は「ios/android」のいずれかを選択してください。

※androidの個別設定

もしかしたら動くかもしれないですが、自分はうまくいかなかったので、
「Android output artifact type」を「appbundle」に設定しました。

アーカイブ

「Xcode Archive & Export for iOS」というセクションを追加します。
そして、以下のように設定します。

  • 「Project path」に$BITRISE_PROJECT_PATH
  • 「Scheme」に$BITRISE_SCHEME
  • 「Distribution method」にapp-store

また、環境変数に、上で設定する変数を以下のように定義しておきます。

「BITRISE_SCHEME」にRunner
「BITRISE_PROJECT_PATH」にios/Runner.xcworkspace

あわせて、「IPA export configuration」の「Developer Portal team」部分に
自分のapple developer teamのIDを入力してください。

IDはapple developer等で確認できるはずです。

appStoreへのデプロイ

「Deploy to App Store Connect - Application Loader (formerly iTunes Connect)」
というセクションを追加します。
そして、以下のように設定します。

  • 「Bitrise Apple Developer Connection」はautomatic
  • 「Apple ID: Email」は$PUBLISH_EMAIL ※ 自分は通知用のアドレスと兼任しているため
  • 「Apple ID: Password」は$APPLE_ID_PASSWORD
  • 「Apple ID: Application-specific password」は$APPLE_SPECIFIC_PASSWORD

Application-specific passwordは、AppleIdにログインしたあとの画面から作成が可能です。

AppleIdはできればSecretの方に入れておいたほうが無難かなと思います。

ちなみにEmailとPasswordは、デプロイしたいApple developerアカウントのものを利用してください。

Google Playへのデプロイ

「Google Play Deploy」というセクションを追加します。

  • 「Service Account JSON key file path」に$BITRISEIO_SERVICE_ACCOUNT_JSON_URL
  • 「Package name」に自分のパッケージ名(com.example.〇〇的なやつ)
    を設定します。

また、$BITRISEIO_SERVICE_ACCOUNT_JSON_URLに対応するファイルを
「Code Signing > GENERIC FILE STORAGE」に設定します。
※ キャプチャのファイル名が異なりますが、ファイル名を$BITRISEIO_SERVICE_ACCOUNT_JSON_URLで設定しておいてください。

以上で完了です！
もしかしたら、各々のプロジェクトごとに追加で必要な設定があるかもしれないですが、
最低限のアプリ構成ならこれでいけるかなと思います！

追記

もしFlutterについて気になるという方がいたら、
自分も入っている「Flutter大学」というコミュニティがあるので、
よかったら参加してみるのも良いと思います💪
アーキテクチャとか、技術周りの雑談も結構なされてて、結構勉强になります。
https://kboyflutteruniv.com/

それではみなさん、良き開発ライフを〜👋

Discussion