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