Help us understand the problem. What is going on with this article?

【iOS】FlutterでFlavorを使って環境ごとに切り替えてビルドする(debug/stg/prod)

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 です

プロジェクトが完成したら`lutter runしてみて、初期のカウンターアプリが動くか確認しましょう!

iOS で各環境のビルド構成を設定する

Xcode 上で各環境の Schema を作り、xcconfig で各環境ごとにビルド設定をしましょう。

Xcode プロジェクトを編集する

プロジェクト直下の ios ディレクトリ内のRunner.xcodeproを開いて編集してください。(ios/Runner.xcodeproj)

デフォルトのビルド環境は以下の画像ように、Debug/Release/Profle の 3 つのビルド構成があり、
Debug は Debug.xcconfig、Release と Profile は Release.xcconfig が設定されています。
image-20191127222943687.png

必要なビルド構成を追加する

今回は 以下の4つの構成を作ります。

  • Debug-Develop
    • DevelopのDebugビルド構成
  • Debug-Staging
    • StagingのDebugビルド構成
  • Release-Staging
    • StagingのReleaseビルド構成
  • Release-Production
    • ProductionのReleaseビルド構成

[+]を押して、すでにある構成をコピーして作りましょう。
Duplicate "Release" Configurationをクリックして作ります。
作成後はダブルクリックで名前を変更できるので適切な名前に変更してください。

image-20191127231910372.png

追加が終わったら、不要な Release/Profle を消しましょう!
以下の画像のようになっていたら完璧です。
image-20191128124250258.png

それぞれの環境用のビルド設定(xcconfig)を追加する

ビルド構成ごとに xcconfig を用意しましょう。
プロジェクト直下の ios/Flutter に以下のファイルを追加してください。

Develop.xcconfig
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
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
Production.xcconfig
#include "Generated.xcconfig"
TRACK_WIDGET_CREATION=

FLUTTER_FLAVOR=Production
PRODUCT_BUNDLE_IDENTIFIER=me.skycat.example.flutter.env.prod
DISPLAY_NAME=SAMPLE-prod

追加したものをビルド構成に設定していきます。
image-20191128124620846.png
※ 選択肢に追加したものが出てきていない場合は、Xcode に認識されないので再追加の必要があります。

ビルド設定(xcconfig)に設定した変数を適用

xcconfig で設定した変数を適用させるためにプロジェクトの設定を変更する必要があります。

アプリの表示名(DISPLAY_NAME)を適用させるために、
info.plistCFBundleDisplayName$(DISPLAY_NAME)として定義してください。

​    <key>CFBundleDisplayName</key>
​    <string>$(DISPLAY_NAME)</string>

image-20191128013615851.png

そして BundleID が反映されるように、
TARGETS->Runner->BuildSettings の Product Bundle Identifier を削除(フォーカスした状態でDeleteKeyでOK)して、
info.plistのCFBundleIdentifier(.xcconfigで設定しているPRODUCT_BUNDLE_IDENTIFIER)を読み込むようにします。
image-20191128124620846.png

Flavor に対応した Schema を追加

Flutter の flavor オプションからビルド構成を選択するために Schema を 3 つ追加します。

Product > Schema > Edit Schema
image-20191128001653270.png

Ducplicate Schemaをクリックするとコピーとして作られるので、Schema 名をビルド構成と同じ名前に設定します。
image-20191128001825268.png

そしてRunのinfoタブを開いて、Build Configurationに Schema 名と同じビルド構成を選択してください。

StagingとProductionは*Debug executable*のチェックを外してください
(Debug表示がなくなってログが吐かれなくなります、必要な人は外さなくてもいいです)

↓ の画像は Develop の例
image-20191128130850245.png

ReleaseビルドのあるStagingとProductionは ProfileArchivesBuild Configuration設定してください。
StagingはRelease-StagingProductionはRelease-Productionになります、

Develop/Staging/Production の 3 つ分が作り終わるとこんな感じになります。

Product > Schema > Schema Manager
image-20191128003449536.png

これでビルドの準備ができました!
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

なアプリがインストールされます!
image.png
これで iOS の Flavor 設定はおわりです!

※ 注意 ※
Production は Debug モードの設定いれていないので、Simulation では実行できません!
(本番環境を Simulation で見ることなんてないやろという考え)

おわりに

「うまくいかない」とか「ここってどうなの?」みたいなことがあったらコメントお願いします 🙏
Android はまた別記事で書きます〜。

そのあとくらいに、

  • いろんな CI(Codemagic, Github Actions, Bitrise...etc)での設定

  • Flavor での各種切り替え(Firebase プロジェクト, ランチャーアイコン, API の向き先)

などなどの記事も書いていきます〜。よろしくおねがいします🙏

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away