JavaScriptのソース内で環境依存の値を切り替える
JavaScriptのソース内で環境依存の値を切り替える:
Reactのアプリケーションの開発の際、環境ごとに値を切り替える必要があったので、その時採用した方法をまとめたものです。
いくつか方法はありますが、今回は以下の方法を採用しました。
$ npm --version
6.4.1
$ node --version
v10.13.0
使用したライブラリのバージョン
React: 16.6.1
webpack: 4.25.1
Node.jsでは環境変数はprocess.envで使用できます。
ここではAPIサーバのURLを例にしています。
ディレクトリ構造は以下のようになっています。
開発環境向け
ステージング環境向け
設定ファイルを読み込む側。動作確認のために読み込んだ値を表示するだけの単純なコンポーネントにしています。
webpackの設定ファイル内で環境変数(今回はNODE_ENV)を読み込んでいます。
aliasの設定で、AppConfigのパスを環境変数を用いて指定しています。
webpackでビルドします。
ビルド実行時に、環境変数NODE_ENVで環境を指定すればOKです。
開発環境用ビルド
ステージング環境用ビルド
開発環境
ステージング環境
簡単に切り替えることができました。
この方法では、環境毎に切り替える値が多くなっても、環境毎に一つのファイルに集約できるのでわかりやすいです。
その反面、環境毎にファイルを用意する必要があるので、環境が増える場合はファイルのか扱いが煩雑になりそうです。
また、このファイルは全てgitなどのバージョン管理に含める必要があります。
そのため、APIのアクセスキーなど外部に公開できない情報を扱う場合は別の方法を採用する必要があります。
はじめに
Reactのアプリケーションの開発の際、環境ごとに値を切り替える必要があったので、その時採用した方法をまとめたものです。
方法
いくつか方法はありますが、今回は以下の方法を採用しました。- 環境毎に切り替える値をまとめたファイルを各環境毎に作成する
- webpackでビルドする際に、環境変数からどの環境向けのビルドかを取得して、読み込むファイルを切り替える
動作環境
$ npm --version6.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
設定ファイル
開発環境向けdevelopment.js
export default {
API_URL: 'http://development.example.com'
};
staging.js
export default {
API_URL: 'http://staging.example.com'
};
index.js
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'),
);
index.html
<!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のパスを環境変数を用いて指定しています。
webpack.config.js
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でビルドします。package.json
"scripts": {
"build": "webpack --progress --colors --mode production"
},
開発環境用ビルド
NODE_ENV=development npm run buildステージング環境用ビルド
NODE_ENV=staging npm run build
実行結果
開発環境ステージング環境
まとめ
簡単に切り替えることができました。この方法では、環境毎に切り替える値が多くなっても、環境毎に一つのファイルに集約できるのでわかりやすいです。
その反面、環境毎にファイルを用意する必要があるので、環境が増える場合はファイルのか扱いが煩雑になりそうです。
また、このファイルは全てgitなどのバージョン管理に含める必要があります。
そのため、APIのアクセスキーなど外部に公開できない情報を扱う場合は別の方法を採用する必要があります。
コメント
コメントを投稿