app.json にAPI キーを書かねばならぬときに環境変数を利用して安全にgit pushしたい

はじめに

調べてもなかなか答えに辿り着かなかったので書き残すことにしました。同じような悩みを持った誰かの一助になればと思います。

以下のようにGoogle Maps API （react-native-maps公式ドキュメント）のAPIキーは「app.json」に書かなければなりません。

app.json

{
  "expo": {
    "ios": {
      "config": {
        "googleMapsApiKey": [MY_API_KEY],
      },
}

でもこれじゃ怖くて、、、

$ git push

できない！
が事の発端です。

react-native-dotenvを使って環境変数を設定

react-native-dotenv公式ドキュメント
まずはインストール。

$ npm install react-native-dotenv

ルート直下に「.env」を作成。環境変数を設定。

.env

GOOGLE_API_KEY = [MY_API_KEY]

使い方は簡単。ただし、注意ポイントがあります。

Screen.tsx

//react-native-dotenvから読み取るとエラーになるので注意！
import { GOOGLE_API_KEY } from "@env";

  <GooglePlacesAutocomplete
    query={{
          key: GOOGLE_API_KEY,
        }}
  />
    

環境変数の使用方法は分かりました。
ただ「app.json」はjsonファイルだから環境変数って使えなくない？
ここを乗り越えるために次の知識が必要になりました。

app.jsonとapp.config.jsはマージされる！

Expo公式ドキュメントに記載があります。
つまり「app.json」にこだわる必要はない！

app.config.jsなら環境変数を呼び出せる

ルート直下に「app.config.js」を作成。

app.config.js

//注意！ こちらは「react-native-dotenv」から読み込む。
import { GOOGLE_API_KEY } from "react-native-dotenv";

export default ({ config }) => {
  return {
    ios: {
      config: {
        googleMapsApiKey: GOOGLE_API_KEY,
      },
    },
    ...config,
  };
};    

これで無事にマージされました。

もちろん「.gitignore」に以下を追加することを忘れずに。

.gitignore

//追加
.env

おまけ

もしもエラーが出た場合はキャッシュをクリアしてみてください。

.gitignore

$ npx expo start -c