複数のアプリバリアントを設定する

動的な設定のために app.config.js を追加する

app.json はアプリ関連の設定を JSON ファイルに持ちます。これは静的なので、一部のプロパティに動的な値を使いたい 場合には向きません。ここでは 環境変数 に基づいて、すべてのビルドプロファイルごとに異なる Android Application ID と iOS Bundle Identifier を設定します。

• プロジェクトのルートに app.config.js という新しいファイルを作成します。
• app.config.js で、config を引数に取る関数をデフォルトエクスポートします。そして config を分割代入して、app.json の既存プロパティをすべてコピーします。

export default ({ config }) => ({
  ...config,
});

環境に応じて動的な値を更新する

ビルド種別を判別するため、app.config.js に development と preview のビルドプロファイル用として IS_DEV と IS_PREVIEW の 2 つの環境変数を追加しましょう。

const IS_DEV = process.env.APP_VARIANT === 'development';
const IS_PREVIEW = process.env.APP_VARIANT === 'preview';

次に、アプリ名、Android Application ID、iOS Bundle Identifier を動的に切り替える 2 つの関数を追加します。

const getUniqueIdentifier = () => {
  if (IS_DEV) {
    return 'com.yourname.stickersmash.dev';
  }

  if (IS_PREVIEW) {
    return 'com.yourname.stickersmash.preview';
  }

  return 'com.yourname.stickersmash';
};

const getAppName = () => {
  if (IS_DEV) {
    return 'StickerSmash (Dev)';
  }

  if (IS_PREVIEW) {
    return 'StickerSmash (Preview)';
  }

  return 'StickerSmash: Emoji Stickers';
};

アプリの name の値には getAppName() を使い、development と preview のビルドで android.package と ios.bundleIdentifier を区別するために getUniqueIdentifier() を使います。

export default ({ config }) => ({
  ...config,
  name: getAppName(),
  ios: {
    ...config.ios,
    bundleIdentifier: getUniqueIdentifier(),
  },
  android: {
    ...config.android,
    package: getUniqueIdentifier(),
  },
});

eas.json を設定する

eas.json に APP_VARIANT 環境変数を追加します。

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "env": {
        "APP_VARIANT": "development"
      }
    },
    "preview": {
      "distribution": "internal",
      "env": {
        "APP_VARIANT": "preview"
      }
    }
    %%placeholder-start%%... %%placeholder-end%%
  }
}

これで eas build --profile development を実行すると、APP_VARIANT が development に設定されます。

Note: Android Application ID と iOS Bundle Identifier を変更したため、EAS CLI は Android 用の新しい Keystore と iOS 用の新しいプロビジョニングプロファイルの生成を求めてきます。これらのステップの内容については、前の章を参照してください。

ios-simulator ビルドプロファイルは development を継承しているので、この設定は iOS Simulator にも自動的に適用されます。

開発サーバーを実行する

ビルドが完了したら、前の章と同じ手順で実機やエミュレーター/シミュレーターにインストールしてください。

開発ビルドを APP_VARIANT 環境変数で識別しているため、開発サーバーを起動するコマンドにもこの変数を渡す必要があります。そのために、プロジェクトの package.json の "scripts" フィールドに dev スクリプトを追加します。

{
  "scripts": {
    "dev": "APP_VARIANT=development npx expo start"
  }
}

npm run dev コマンドを実行して開発サーバーを起動します。

このスクリプトは app.config.js をローカルで評価し、development プロファイル用の環境変数を読み込みます。

これで開発ビルドは Android と iOS の両方で動き、app.config.js で変更したアプリ名が表示されます。たとえば下の開発ビルドは iOS Simulator で動作しています。アプリ名が StickerSmash (Dev) になっていることに注目してください。

これ以降は、静的な値には app.json を、動的な値には app.config.js を使い分けられます。