Ryusuke Nomoto

[備忘] expoで環境変数を取り扱う方法

備忘として残しておきます。

やりたいこと

  • プロダクションコードを変更することなく、外部から変数を注入したい
  • 変数は秘匿性の高いものを扱うため、バージョン管理の対象外である必要がある
 

どうするか

app.config.jsのextraフィールドを使うのが良さそう。
Environment variables in Expo - Expo Documentation
Environment variables are key-value pairs configured outside your source code that allow your app to behave differently depending on the environment. For example, you can enable or disable certain features when building a testing version of your app, or you can switch to a different API endpoint when building for production.
Environment variables in Expo - Expo Documentation
https://docs.expo.dev/guides/environment-variables/#using-the--extra--field
Environment variables in Expo - Expo Documentation
 
具体的には以下のとおり。
 
  1. .envファイルを用意し、そこに環境変数を記載する
      2. export HOGEHOGE_TOKEN="kejriasdfjkejafigerfp"
export HOGEHOGE_ID="aksdfjiajweagre"
      • .envファイルはバージョンファイル対象外
  1. app.config.jsのextraフィールドに次のように記載
      2. module.exports = {
  extra: {
    "HOGEHOGE_TOKEN": process.env.HOGEHOGE_TOKEN,
    "HOGEHOGE_ID": process.env.HOGEHOGE_ID,
  },
}
  1. プロダクションコード上で参照する
      2. const hogehoge_token = Constants.expoConfig.extra.HOGEHOGE_TOKEN
const hogehoge_id = Constants.expoConfig.extra.HOGEHOGE_ID
  1. 環境変数を読み込んでから開発サーバを起動
      2. source .env
npx expo start
 
badge