2019/11/28 13:12
AndroidのFlavorと合わせるために一部Flavor名を修正しました(Debug→Develop)[
その他、細かい修正
プロダクトで開発をしていると、検証等で環境ごとにビルドしたくなる事があると思います。
今回は Flutter の flavor というオプションを使って、
- Develop → 開発環境(Debug ビルド)
- Staging → ステージング環境(Debug ビルド, Release ビルド)
- Production → 本番環境(Release ビルド)
の 3 つの環境(ビルド構成は 4 つ)に分けてビルドする方法をまとめていきます。
下準備
環境構築
※Flutter の環境構築がまだだよって方がこちらをどうぞ
Flutter の Stable チャンネルを利用してます。
※ 2019/11/28 現在で 1.9.1+hotfix.6
チャンネル切り替えは flutter channelでできます。
$ flutter channel stable
flutter --versionを実行してみて以下と同じ感じになれば OK です！
$ flutter --version
Flutter 1.9.1+hotfix.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 68587a0916 (2 months ago) • 2019-09-13 19:46:58 -0700
Engine • revision b863200c37
Tools • Dart 2.5.0
※ もし実行時の Stable チャンネルではうまく行かないよという場合は flutter versionで version を指定できるので試してみてください。
プロジェクト生成
flutter createで Flutter プロジェクトを生成します。
$ flutter create \
--org me.skycat.example.flutter.env \
--with-driver-test \
flutter_env_build
※IDE で FlutterProject を作成しても OK です
プロジェクトが完成したら`flutter runしてみて、初期のカウンターアプリが動くか確認しましょう！
iOS で各環境のビルド構成を設定する
Xcode 上で各環境の Schema を作り、xcconfig で各環境ごとにビルド設定をしましょう。
Xcode プロジェクトを編集する
プロジェクト直下の ios ディレクトリ内のRunner.xcodeproを開いて編集してください。(ios/Runner.xcodeproj)
デフォルトのビルド環境は以下の画像ように、Debug/Release/Profle の 3 つのビルド構成があり、
Debug は Debug.xcconfig、Release と Profile は Release.xcconfig が設定されています。
必要なビルド構成を追加する
今回は 以下の４つの構成を作ります。
- Debug-Develop
- DevelopのDebugビルド構成
- Debug-Staging
- StagingのDebugビルド構成
- Release-Staging
- StagingのReleaseビルド構成
- Release-Production
- ProductionのReleaseビルド構成
[+]を押して、すでにある構成をコピーして作りましょう。
Duplicate "Release" Configurationをクリックして作ります。
作成後はダブルクリックで名前を変更できるので適切な名前に変更してください。
追加が終わったら、不要な Release/Profle を消しましょう！
以下の画像のようになっていたら完璧です。
それぞれの環境用のビルド設定(xcconfig)を追加する
ビルド構成ごとに xcconfig を用意しましょう。
プロジェクト直下の ios/Flutter に以下のファイルを追加してください。
Develop.xcconfig
#include "Generated.xcconfig"
TRACK_WIDGET_CREATION=
FLUTTER_FLAVOR=Develop
PRODUCT_BUNDLE_IDENTIFIER=me.skycat.example.flutter.env.dev
DISPLAY_NAME=SAMPLE-dev
Staging.xcconfig
#include "Generated.xcconfig"
TRACK_WIDGET_CREATION=
FLUTTER_FLAVOR=Staging
PRODUCT_BUNDLE_IDENTIFIER=me.skycat.example.flutter.env.stg
DISPLAY_NAME=SAMPLE-stg
Production.xcconfig
#include "Generated.xcconfig"
TRACK_WIDGET_CREATION=
FLUTTER_FLAVOR=Production
PRODUCT_BUNDLE_IDENTIFIER=me.skycat.example.flutter.env.prod
DISPLAY_NAME=SAMPLE-prod
追加したものをビルド構成に設定していきます。
※ 選択肢に追加したものが出てきていない場合は、Xcode に認識されないので再追加の必要があります。
ビルド設定(xcconfig)に設定した変数を適用
xcconfig で設定した変数を適用させるためにプロジェクトの設定を変更する必要があります。
アプリの表示名(DISPLAY_NAME)を適用させるために、
info.plistにCFBundleDisplayNameを$(DISPLAY_NAME)として定義してください。
<key>CFBundleDisplayName</key>
<string>$(DISPLAY_NAME)</string>
そして BundleID が反映されるように、
TARGETS->Runner->BuildSettings の Product Bundle Identifier を削除(フォーカスした状態でDeleteKeyでOK)して、
info.plistのCFBundleIdentifier(.xcconfigで設定しているPRODUCT_BUNDLE_IDENTIFIER)を読み込むようにします。
Flavor に対応した Schema を追加
Flutter の flavor オプションからビルド構成を選択するために Schema を 3 つ追加します。
Product > Schema > Edit Schema
Ducplicate Schemaをクリックするとコピーとして作られるので、Schema 名をビルド構成と同じ名前に設定します。
そしてRunのinfoタブを開いて、Build Configurationに Schema 名と同じビルド構成を選択してください。
StagingとProductionは*Debug executable*のチェックを外してください
(Debug表示がなくなってログが吐かれなくなります、必要な人は外さなくてもいいです)
↓ の画像は Develop の例
ReleaseビルドのあるStagingとProductionは ProfileとArchivesもBuild Configuration設定してください。
StagingはRelease-Staging、ProductionはRelease-Productionになります、
Develop/Staging/Production の 3 つ分が作り終わるとこんな感じになります。
Product > Schema > Manage Schemes...
これでビルドの準備ができました！
Flavor を指定してビルドしてみましょう！
Flavor が Staging(flutter run --flavor Develop)だと
表示名が SAMPLE-dev
BundleIDが me.skycat.example.flutter.env.dev
Flavor が Staging(flutter run --flavor Staging)だと
表示名が SAMPLE-stg
BundleIDが me.skycat.example.flutter.env.stg
なアプリがインストールされます！
これで iOS の Flavor 設定はおわりです！
※ 注意 ※
Production は Debug モードの設定いれていないので、Simulation では実行できません！
（本番環境を Simulation で見ることなんてないやろという考え）
おわりに
「うまくいかない」とか「ここってどうなの？」みたいなことがあったらコメントお願いします 🙏
Android はまた別記事で書きます〜。
そのあとくらいに、
いろんな CI(Codemagic, Github Actions, Bitrise...etc)での設定
Flavor での各種切り替え(Firebase プロジェクト, ランチャーアイコン, API の向き先)
などなどの記事も書いていきます〜。よろしくおねがいします🙏