Flutter: API_KEYを隠匿し環境を切り替えながらVScodeで開発する

概要

Flutterでのアプリ開発においてproduction/staging/testなどの環境を切り替えたい。

Flutter

Web開発において.envファイルにAPI_KEYやWEB_API_HOSTを格納しておいて読み込むenvファイルを状況に応じて変えることで実行環境を切り替えることができる。Flutterではflutter_dotenvというものが存在する。

# ディレクトリ構造
{document_root}
 |- .vscode
     |- launch.json
 |- .env
 |- env
     |- .env.sample
     |- .env.staging
     |- .env.test
 |- .github/workflows
     |- actions.yaml
 |- lib
     |- main.dart

以上のようなディレクトリ構造だとする。

.env
API_KEY=abcd1234

// marn.dart

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  // $ flutter run --dart-define=BUILD_ENV=prod で引数指定できる
  const env = String.fromEnvironment("BUILD_ENV", defaultValue: "prod");

  // 環境ごとに読み込むenvファイルを切り替える
  final filename = () { 
    switch (env) {
      case "test": return "../env/.env.test";
      case "staging": return "../env/.env.staging";
      default: return "../.env";
    }
  }();
  await dotenv.load(fileName: filename);

  // # 環境変数を取得 "abcd1234"
  print(dotenv.get('GOOGLE_APP_KEY', fallback: '')); 

  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

上記のコードで比較的シンプルに環境変数の読み込みを行うことができる。

VScode

VScode上のデバッグで--dart-defineを指定するためには.vscode/launch.jsonで起動設定を行う必要がある。

# .vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "flutter_mobile",
            "program": "lib/main.dart",
            "request": "launch",
            "type": "dart",
            "args": [
               "--dart-define=BUILD_ENV=prod" # 接続した環境を指定
            ]
        }
    ]
}

上記の設定で実行引数を指定するが、それ以外にも起動するプログラムなどの選択も可能である。

github actions

最後にCI/CDで自動テストもしくは配信を行う場合にはを考える。当然API_KEYのような隠匿すべき情報はgit上で管理することはできない。これらの隠匿したい情報はSecretsに格納するが、それを.envに反映するには

 # actions.yaml
 - name: Create dot env file
 - shell: bash
   run: |
     touch .env
     echo "GOOGLE_APP_KEY=${{ secrets.GOOGLE_APP_KEY }}" >> .env
     echo "AD_UNIT_ID=${{ secrets.AD_UNIT_ID }}" >> .env

上記のようにSecretsからから取り出した情報を.envに書き込むことでgithub actions上でのワークフローを実行することができる。