🔍
Expoの環境変数周りの備忘録

Expoの環境変数周りの備忘録

#個人開発#expo

最近、プライベートでExpoを使ってネイティブアプリの開発をしている。Expo使うこと自体は初めてだし、わからないことも多いのだけれど、環境変数の扱いで少々調べる必要があったので備忘録的にまとめておく。

Expoでの環境変数の扱い

公式のドキュメントはこちらを参照してほしい。

基本的にExpoでは、

  • .envファイルを使って環境変数を管理
  • expo.jsonで読み込み

以上の方法で管理でき、どちらも自動読み込みされる。.envに関しては読み込みされるパターンと優先順位が定められている。what-other-env-files-can-i-useを参照。

よくあるパターンで、EXPO_PUBLIC_で始まる環境変数はクライアントサイドでアクセス可能になる。またドキュメントにもある通りこれは平文で保存されるため秘匿情報を絶対にいれてはいけない。EXPO_PUBLIC_に関しては秘匿情報を絶対にいれてはいけない（大事なことなので二回）。

EXPO_PUBLIC_で定義してる時点で丸見えではあるが開発時に平文で持っておきたくない情報は、EAS（Expo Application Services）に可視性（Plan, Sensitive, Secrets）を設定することでビルド時に注入できる。具体的には、こちらの公式ドキュメントを参照。

秘匿情報を使いたいんです…

とはいっても秘匿情報を扱いたいケースはある。これに関してはBackend API側で秘匿情報を扱いそこで利用するしかない。 例外としてクライアントだとGoogleMapのAPIキーを扱いたいというケースもあるが、それはEXPO_PUBLIC_に設定した上でAPI Keyに実行できるアプリの制限をかけることで利用可能になる。

ローカルでの開発

混乱を招かないために、基本的にはesa.jsonだけで管理するのが良さそうにおもう。。どうしても.envファイルを使いたい場合は、.env.localなどでローカル専用の環境変数を定義し、gitignoreに追加する方針でやるべし。

小話

react-native-map というreact-nativeでGoogleMapを扱うライブラリがある。このライブラリの扱いについて、expoの公式ドキュメントに記載がある。

公式ドキュメントによると

   "android": {
      "config": {
        "googleMaps": {
          "apiKey": "process.env.GOOGLE_MAPS_API_KEY",
        },
      },
    }

以上のようなフォーマットで埋め込むことでexpoがprebuildでmanifestのmetaタグにGoogle Map API Keyを埋め込んでくれそうな記述があり、それにそって設定を進めてビルドしていたが全然うまくいかなかった。色々試行錯誤してもAIに聞いてもうまい回答が返ってこなく、react-native-mapのgithubの公式ドキュメントをみたらv1.22以降からplugin方式に代わっていた。 expo

{
  "expo": {
    "plugins": [
      [
        "react-native-maps",
        {
          "iosGoogleMapsApiKey": "YOUR_KEY_HERE",
          "androidGoogleMapsApiKey": "YOUR_KEY_HERE"
        }
      ]
    ]
  }
}

利用しているバージョンをちゃんと見て、公式のリポジトリを見たりソースコードを読んだら気づけることだったが地味にハマった。

最後に

こういうところをAIに頼って曖昧なまま進めると事故ってしまうので、面倒だけど備忘録を通して徐々に学習していきたい。

※もし内容に間違いがあればご指摘いただけると嬉しいです。