96
64

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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"
  },

この中で、startbuildtestは実行時に、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;
96
64
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
96
64

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?