create-react-appで独自の環境変数を読み込む

creare-react-app

facebookが提供しているCLIツール。Reactは、開発環境を作るのがそれなりに大変ですが、このCLIツールを使うと雛形、テスト、devサーバ、ビルド、ESLintまで全部用意してくれます。

script毎の変数

create-react-appでプロジェクトを作成するとpackage.jsonには、予めスクリプトが書かれています

package.json

  "scripts": {
    "start": "react-scripts-ts start ",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom --watchAll",
    "eject": "react-scripts-ts eject"
  },

この中で、start、build、testは実行時に、process.env.NODE_ENVに自動で値をセットしてくれます。

script	process.env.NODE_ENV
build	production
test	test
start	development

BABEL_ENVにも同様の値がセットされます。

独自の変数

creare-react-appで作ったプロジェクトはprocess.env.REACT_APP_から始まる変数を読み込みができるようになっています。便利ですね。
変数の読み込み方法も簡単です。
プロジェクト直下に.envファイルを書くだけです。

.env

# development
REACT_APP_DEV_API_KEY="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
REACT_APP_DEV_API_URL="http://localhost:8080"

# test
REACT_APP_TEST_API_KEY="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
REACT_APP_TEST_API_URL="http://localhost:8080"

# production
REACT_APP_PROD_API_KEY=""
REACT_APP_PROD_API_URL=""

内容はこんな感じで記述します。

js側でこれを読み込むのも簡単です。環境変数に入っているので、ただ呼び出すだけで完了です。

config.js

const Config = () => {
  if (process.env.NODE_ENV === 'test') {
    // test
    return {
      restful: {
        apiKey: process.env.REACT_APP_TEST_API_KEY,
        apiURL: process.env.REACT_APP_TEST_API_URL
      }
    }
  } else if (process.env.NODE_ENV === 'production') {
    // production
    return {
      restful: {
        apiKey: process.env.REACT_APP_PROD_API_KEY,
        apiURL: process.env.REACT_APP_PROD_API_URL
      }
    }
  }
  // development
  return {
    restful: {
      apiKey: process.env.REACT_APP_DEV_API_KEY,
      apiURL: process.env.REACT_APP_DEV_API_URL
    }
  }
}
export const restfulApiConfig = Config().restful

これをyarn startしたときに見てみるとこんな感じになります

var Config = function () {
    if (false) {
        // test
        return {
            restful: {
                apiKey: process.env.REACT_APP_TEST_API_KEY,
                apiURL: process.env.REACT_APP_TEST_API_URL
            }
        };
    }
    else if (false) {
        // production
        return {
            restful: {
                apiKey: process.env.REACT_APP_PROD_API_KEY,
                apiURL: process.env.REACT_APP_PROD_API_URL
            }
        };
    }
    // development
    return {
        restful: {
            apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
            apiURL: "http://localhost:8080"
        }
    };
};
var restfulApiConfig = Config().restful;