react-native-dotenvとreact-native-configの違い

ReactNativeでモバイルアプリを開発していると、環境変数を管理するためにreact-native-configかreact-native-dotenv、どちらかのライブラリを検討することになると思います。

本記事ではそれぞれの違いや特徴、使い道などについてまとめます。

両者の概要

1. react-native-config

   Module to expose config variables to your javascript code in React Native, supporting iOS, Android, macOS and Windows. - (https://www.npmjs.com/package/react-native-config)

   （iOS、Android、macOS、Windowsをサポートし、React Nativeのjavascriptコードに設定変数を公開するモジュールです。）

   メリット:

   • ネイティブコードと統合しやすい（info.plist や build.gradle で使用可能）
   • クライアントバンドル内のコードに直接含まれないため、環境変数をある程度秘匿可能
   • ビルドターゲットごとに異なる .env ファイルを使用可能（例: 開発・本番環境）

   デメリット:

   • 初期設定が若干複雑
   • 動的に環境変数を切り替えたい場合には不向き
   • Web環境との互換性が低い

2. react-native-dotenv

   This babel plugin lets you inject your environment variables into your Javascript environment using dotenv for multiple environments. It is best suited for use with react native and works with all flavors including web. - (https://www.npmjs.com/package/react-native-dotenv)

   （このBabelプラグインを使用すると、dotenvを利用して複数の環境向けに環境変数をJavaScript環境に注入することができます。React Nativeでの使用に最適であり、Webを含むすべての種類の環境で動作します。）
   メリット:

   • シンプルでセットアップが容易
   • 既存の .env ファイルをそのまま利用できる
   • 環境変数を直接JavaScriptコードで扱える
   • Webと共通の仕組みを利用可能

   デメリット:

   • 全ての変数がクライアント側にバンドルされるため、デコンパイルでキーが露出するリスクがある
   • ネイティブコードにアクセスする用途には不向き
   • ビルド時に環境変数がコードに埋め込まれるため、動的変更ができない

モバイルアプリで使うならどちらか

結論、react-native-configになります。理由は以下の通り。

1. セキュリティ面:

   react-native-dotenv は全ての環境変数がクライアントにバンドルされるため、リバースエンジニアリングで露出するリスクが高い。
   一方、react-native-config はネイティブコードと統合しやすく、環境変数を秘匿する設計が可能。

2. ネイティブコード統合:
   react-native-configは info.plist や build.gradle に環境変数を直接渡すことができ、ネイティブ環境での設定が簡単。

3. ビルド環境ごとの柔軟性:
   ビルドターゲットに応じて異なる .env ファイルを使用可能で、本番環境と開発環境を分けるのが容易。

とはいえ、クライアントアプリに組み込まれる点は変わらず、公式ドキュメントでもアプリコード内に機密なAPIキーを保存しないことが推奨されています。

Never store sensitive API keys in your app code. （・・・） Tools like react-native-dotenv and react-native-config are great for adding environment-specific variables like API endpoints, but they should not be confused with server-side environment variables, which can often contain secrets and API keys.　- （https://reactnative.dev/docs/security#storing-sensitive-info）

よって環境変数に対するベストプラクティスはサーバー管理に落ち着きます。

• 機密な API キーやシークレットは、サーバーサイドで管理し、クライアントアプリから直接アクセスさせないようする
• アプリからのリクエストは、サーバーサイドで認証・検証を行い、必要なデータのみを返すように設計する

まとめ

これまでの内容から、以下が開発方針としてベストな流れかと思います。

• 開発初期はAPIキーを.envファイルにローカル保存し、.gitignoreによってGit追跡対象外にすることでリモートリポジトリに公開されることを防ぎつつ、react-native-cofigやreact-native-dotenvで環境変数を簡単に管理
• React Nativeを用いたアプリ開発をメインに、Webをサブターゲットに見据える場合は、ネイティブ連携のしやすいreact-native-configを採用
• 将来アプリリリースをする時は、react-native-configやreact-native-dotenvを使用せず、APIキーが格納されるファイル（.envファイルなど）はサーバー保存し、アプリビルドに組み込まれることを防ぐ

あくまでも、react-native-dotenv と react-native-config は機密情報のセキュリティ管理を目的としたものではなく、設定値管理に特化しているということですね。