Expo Bare Workflowで複数環境に対応する

最近、ExpoのBare Workflowで複数環境に対応することがあったので備忘としてやったことを残しておきます。

ここでいう複数環境とは開発、ステージング、本番などのアレです。

今回は、開発用、ステージング用、本番用それぞれにデバッグとリリースのアプリをビルドできるようにしました。なので全てビルドすると全部で6つのアプリが作られることになります。

あとiOSについてのみです。Androidについてはいずれ。

やったことは以下の通りです。

  1. Bare Workflowで初期化
  2. Configurationを追加する
  3. Schemaを作成する
  4. 複数アプリをビルドできる環境作り
  5. iOS Development TargetとPodfileのバージョンを揃える
  6. Podfileを整える

最後の「Podfile」の調整がどこにも書かれてなくて苦労しました。

ちなみにExpo SDKのバージョンは41です。

Bare Workflowで初期化

$ expo init bare-workflow
? Choose a template: › - Use arrow-keys. Return to submit.
----- Managed workflow -----
blank a minimal app as clean as an empty canvas
blank (TypeScript) same as blank but with TypeScript configuration
tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
----- Bare workflow -----
minimal bare and minimal, just the essentials to get you started
❯ minimal (TypeScript) same as minimal but with TypeScript configuration

今回は minimal (TypeScript) を選択

Configurationを追加する

ios/bareworkflow.xcworkspace を Xcodeで開いて、プロジェクト設定のConfigurationを以下のように増やす。

増やす際にDebug〜はDebugを、Release〜はReleaseを複製。

"Configuration"

  • 開発デバッグ用 → Debug
  • 開発リリース用 → Release
  • ステージングデバッグ用 → DebugStaging
  • ステージングリリース用 → ReleaseStaging
  • 本番デバッグ用 → DebugProduction
  • 本番リリース用 → ReleaseProduction

Schemaを作成する

Schemaの複製

まずはじめに最初からある Schemaをベースにステージング、本番用のSchemaを複製する

"Schemaを複製"

  • ステージング用 → bareworkflowStaging
  • 本番用 → bareworkflowProduction

Build Configurationを変更

Schemaが用意できたら、Build Configurationの項目を事前に作っておいた Configurationに変更していく。

"Schemaを編集"

Run、Test、AnalyzeはDebug → DebugStaging またはDebugProductionに変更。

Profile、ArchiveはRelease → ReleaseStaging またはReleaseProductionに変更すれば OK。

複数アプリをビルドできる環境作り

「Targets」の方で色々設定をしていきます。

Bundle identifierを環境ごとに変える

※ベースになる Bundle identifierは適宜変更しておきます。

「Targets」の「Build Settings」に「+」ボタンがあるので選択。

""

「Add User-Defined Settings」で新しいユーザー定義を作成。

""

BUNDLE_IDENTIFIER_SUFFIX として、Configurationにそれぞれを設定を入れていく。

""

  • Debug → .development.debug
  • DebugProduction → .debug
  • DebugStaging → .staging.debug
  • Release → .development
  • ReleaseProduction → 何も設定しない(Bundle identifierをそのまま使う)
  • ReleaseStaging → .staging

最後に設定した BUNDLE_IDENTIFIER_SUFFIX を使う設定を行う。

""

「Info」の「Custom iOS Target Properties」の「Bundle identifier」を $(PRODUCT_BUNDLE_IDENTIFIER)$(BUNDLE_IDENTIFIER_SUFFIX) に変更する。

Bundle display nameを環境ごとに変える

同じように「Build Settings」に DISPLAY_NAME_PREFIX を追加する。

""

  • Debug → [DD]
  • DebugProduction → [DP]
  • DebugStaging → [DS]
  • Release → [D]
  • ReleaseProduction → 何も設定しない
  • ReleaseStaging → [S]

このあたりは好みで、できる限り短くしておくのが良いと思います。
インストールしたときにアイコンの下に出るテキストにあたるところなので長すぎるとアプリ名が出なくなっちゃいます。

こちらも「Info」で使うように設定します。

""

「Bundle display name」を $(DISPLAY_NAME_PREFIX)アプリ名 に変更する。

ちなみに、この設定をすると「General」の「Display Name」が [DD]アプリ名 になるので一瞬大丈夫か不安になりますが、大丈夫です。

※以降「General」の「Display Name」を変更しないこと

iOS Development TargetとPodfileのバージョンを揃える

"Configuration"

執筆時点ではPodfileでiOS 11が設定されているのでそれに合わせてiOS Development Targetを「11」に変更

Podfileを整える

expo init で生成された Podfileに対して以下の変更を加える。

Podfile
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/react-native-unimodules/cocoapods.rb'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
# projectの設定を追加。
# Configurationに追加したものを設定。
project 'bareworkflow', # プロジェクト名
'Debug' => :debug,
'DebugStaging' => :debug,
'DebugProduction' => :debug,
'Release' => :release,
'ReleaseStaging' => :release,
'ReleaseProduction' => :release
target 'bareworkflow' do
use_unimodules!
config = use_native_modules!
use_react_native!(:path => config["reactNativePath"])
if !ENV['CI']
# configurationsの指定を追加
use_flipper!({ 'Flipper' => '0.80.0', configurations: ['Debug', 'DebugStaging', 'DebugProduction'] })
post_install do |installer|
flipper_post_install(installer)
end
end
end

以上の設定で、Expo Bare Workflowでも複数環境に対応することができました。

deg84

フリーランスでWeb系のエンジニアとスクラムマスターをやっています。

© 2020 deg84