はじめに
Reactのアプリケーションの開発の際、環境ごとに値を切り替える必要があったので、その時採用した方法をまとめたものです。
方法
いくつか方法はありますが、今回は以下の方法を採用しました。
- 環境毎に切り替える値をまとめたファイルを各環境毎に作成する
- webpackでビルドする際に、環境変数からどの環境向けのビルドかを取得して、読み込むファイルを切り替える
切り替える方法はwebpackのarias機能を利用しています。
動作環境
$ npm --version
6.4.1
$ node --version
v10.13.0
使用したライブラリのバージョン
React: 16.6.1
webpack: 4.25.1
Node.jsでの環境変数
Node.jsでは環境変数はprocess.envで使用できます。
実装例
ここではAPIサーバのURLを例にしています。
ディレクトリ構造は以下のようになっています。
example
├─index.html
├─package.json
├─webpack.config.js
│
└─src
├─index.js
│
└─config
├─development.js
└─staging.js
設定ファイル
開発環境向け
export default {
API_URL: 'http://development.example.com'
};
ステージング環境向け
export default {
API_URL: 'http://staging.example.com'
};
設定ファイルを読み込む側。動作確認のために読み込んだ値を表示するだけの単純なコンポーネントにしています。
import React from 'react';
import { render } from 'react-dom';
import config from 'AppConfig';
const App = () => (
<div>
<p>URL: {config.API_URL}</p>
</div>
);
render(
<App />,
document.getElementById('app'),
);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
webpack
webpackの設定ファイル内で環境変数(今回はNODE_ENV)を読み込んでいます。
aliasの設定で、AppConfigのパスを環境変数を用いて指定しています。
const path = require('path');
const webpack = require('webpack');
const environment = process.env.NODE_ENV || 'development';
module.exports = {
// 中略
resolve: {
extensions: ['.js', '.jsx'],
alias: {
AppConfig: path.join(__dirname, `/src/config/${environment}.js`)
}
},
// 中略
}
ビルド
webpackでビルドします。
"scripts": {
"build": "webpack --progress --colors --mode production"
},
ビルド実行時に、環境変数NODE_ENVで環境を指定すればOKです。
開発環境用ビルド
NODE_ENV=development npm run build
ステージング環境用ビルド
NODE_ENV=staging npm run build
実行結果
開発環境
ステージング環境
まとめ
簡単に切り替えることができました。
この方法では、環境毎に切り替える値が多くなっても、環境毎に一つのファイルに集約できるのでわかりやすいです。
その反面、環境毎にファイルを用意する必要があるので、環境が増える場合はファイルのか扱いが煩雑になりそうです。
また、このファイルは全てgitなどのバージョン管理に含める必要があります。
そのため、APIのアクセスキーなど外部に公開できない情報を扱う場合は別の方法を採用する必要があります。