はじめに

1. パッケージをインストール

   npm

   npm i @capgo/capacitor-env

   pnpm

   pnpm add @capgo/capacitor-env

   yarn

   yarn add @capgo/capacitor-env

   bun

   bun add @capgo/capacitor-env

2. ネイティブプラットフォームと同期

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

設定値を宣言

Capacitor設定にキーを追加して、ネイティブビルドに組み込まれるようにします。環境ごとに値を入れ替えるために、複数の設定バリアント(capacitor.config.prod.ts、capacitor.config.dev.tsなど)を作成できます。

capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'Example',
  webDir: 'dist',
  plugins: {
    Env: {
      API_URL: 'https://api.example.com',
      PUBLIC_KEY: 'pk_live_123',
    },
  },
};

export default config;

ネイティブプラットフォームでは、値は生成された設定ファイル(ios/App/App/capacitor.config.jsonとandroid/app/src/main/assets/capacitor.config.json)内に保存されます。テナント固有の値が必要な場合は、フレーバーごとにそれらのファイルを更新してください。

コード内で値を読み取る

import { Env } from '@capgo/capacitor-env';

const apiUrl = await Env.getKey({ key: 'API_URL' }).then((result) => result.value);

if (!apiUrl) {
  throw new Error('Missing API_URL configuration');
}

フォールバックを提供

const loadConfig = async () => {
  const { value: endpoint } = await Env.getKey({ key: 'API_URL' });
  return endpoint || 'https://staging.example.com';
};

ヒント

• 環境ごとに異なるcapacitor.configファイルを使用し、npx cap run ios --configuration=prodでCLIに正しいファイルを指定します。
• Capgo updaterチャンネルと組み合わせて、新しいバイナリを公開せずにテナント固有の値を配信します。
• npx cap syncの前に、CIビルド中に秘密を置換することで、ソース管理から秘密を除外します。