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;