Zenn
🥸

[Flutter] .env から環境変数を呼び出す設定方法

2024/09/28に公開
Flutter
iOS
NativeScript
Dart
tech

はじめに

Flutter プロジェクトで iOS 向けに開発を行っている際に、.env ファイルから環境変数を読み込み、アプリケーションの設定ファイル内に読み込む方法を解説します。
僕が躓いたのは、google_sign_in を使うときに Info.plist 内でそれらの変数を利用するときでした。
アプリケーションの開発において、API キーやエンドポイント URL などの機密情報をコード内にハードコーディングすることはセキュリティ上のリスクとなります。
このあたりの知識をつけて置くと今後他に応用する際に役立つと思い、この記事を執筆しました。

前提条件

  • Flutter SDK がインストールされていること。
  • Xcode がインストールされ、最新バージョンにアップデートされていること。
  • 基本的なFlutterプロジェクトが作成されていること。
  • ターミナルやコマンドラインツールの基本的な操作に慣れていること。

.env ファイルの作成

1. プロジェクトルートに .env ファイルを作成

まず、Flutterプロジェクトのルートディレクトリに.envファイルを作成します。このファイルに環境変数を定義します。

cd /path/to/your/flutter_project/
touch .env

2. 環境変数の定義

.env ファイルに必要な環境変数を KEY=VALUE 形式で追加します。

REVERSED_CLIENT_ID=xxx

3. .gitignore への追加

機密情報を含むため、.env ファイルをバージョン管理システムから除外します。また、ビルドスクリプト ios/Flutter/EnvironmentVariables.sh もバージョン管理から除外します。

echo ".env" >> .gitignore
echo "ios/Flutter/EnvironmentVariables.sh" >> .gitignore

ビルドスクリプトの設定

1. ビルドスクリプトの作成

iOS のビルドプロセス中に .env ファイルを読み込み、環境変数をEnvironmentVariables.xcconfig ファイルに書き出すビルドスクリプトを設定します。

ios/scripts/generate_env.sh を作成し、以下のスクリプトを記述します。

#!/bin/sh

# 出力先のxcconfigファイルパス
OUTPUT_FILE="${SRCROOT}/Flutter/EnvironmentVariables.xcconfig"

# .envファイルのパス（プロジェクトルートに配置）
ENV_FILE="${SRCROOT}/../.env"

# .envファイルが存在するか確認
if [ ! -f "$ENV_FILE" ]; then
    echo "Error: .env file not found at path $ENV_FILE"
    exit 1
fi

# 出力ファイルを空にする
: > "$OUTPUT_FILE"

# .envファイルの内容をxcconfig形式に変換して出力ファイルに書き込む
while IFS= read -r line || [ -n "$line" ]; do
    # 空行やコメント行をスキップ
    if [[ -z "$line" || "$line" == \#* ]]; then
        continue
    fi
    # KEY=VALUE を KEY = VALUE の形式で出力
    echo "$line" >> "$OUTPUT_FILE"
done < "$ENV_FILE"

echo "Environment variables have been written to $OUTPUT_FILE"

2. スクリプトに配置方法

2-1. Xcode でプロジェクトを開く
open ios/Runner.xcworkspace
2-2. Scheme の設定

Pruduct 👉 Scheme 👉 EditScheme を開きます。

  1. Build 👉 Pre-actions を選択
  2. + ボタンから New Run Script Actions を選択
  3. ${SRCROOT}/scripts/generate_env.sh を記述（Runner 指定も忘れ済み）

これでアプリのビルド前に EnvironmentVariables.xcconfig が生成されるようになります。

2-3. xcconfig に設定を追記

Debug.xcconfig、Release.xcconfig に #include "EnvironmentVariables.xcconfig" を追記します。

3. 設定ファイル （e.g. Info.plist） に記載

以下のように環境設定ファイルに記述した値（ここでは REVERSED_CLIENT_ID ）を使用できます。

<array>
	<!-- TODO Replace this value: -->
	<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
	<string>$(REVERSED_CLIENT_ID)</string>
</array>

動作確認

アプリ実行後、Runner の Build Setting から設定が反映されていることを確認することができます。

まとめ

Flutter プロジェクトにおいて、.env ファイルから iOS の Info.plist 内で環境変数を利用する設定方法について解説しました。環境変数を外部化することで、コードのセキュリティと管理の効率を向上させることができます。

Discussion