webpackで react redux の開発環境 切り替え
ローカルの環境と結合の環境でAPIのパスを切り替えたりしたかったので色々まとめ
前提
・ react redux
・webpack webpack-dev-server
・redux-saga
・axios
json-server
・json-server ローカル環境用のサーバー
たった30秒でREST APIのモックが作れる JSON Serverでフロントエンド開発が捗る
json-server コマンドで起動
--watch でサーバーに使用するモックのapiのjsonファイルを指定
json-server --watch api.json
opener
opener コマンドに引数でurlを指定すると開いてくれる
opener http://localhost:3000
初期のnpm script コマンド
"scripts": {
"start": "npm run serve & webpack && opener http://localhost:3000 & webpack-dev-server --hot --inline",
"serve": "json-server --watch api.json"
}
しかし、これだとwindowsのメンバーがうまく動かなかった
json-server と webpack-dev-serverを別々で起動したらうまくいった
なので npm-run-all で並列起動にする
npm-run-all
コマンド npm-run-all
npm-run-all に半角スペースを間に挟んでコマンドを書くことで直列で実行できる
"scripts"{
"test1": "echo \"test1\"",
"test2": "echo \"test2\"",
"test-all": "npm-run-all test1 test2",
}
-------ターミナル---------
$ npm run test-all
> npm-run-all test1 test2
> echo "test1"
test1
> echo "test2"
test2
-----------------------
--parallel オプションで並列に実行できる
"test-all": "npm-run-all test1 test2 --parallel serve",
--parallel は -p に省略可能
-p test:* でtestコマンドで test:sass test:serve などをすべて実行してくれる
"scripts"{
"test:hoge": "echo \"hoge\"",
"test:fuga": "echo \"fuga\"",
"test-all": "npm-run-all --parallel test:*",
}
----------ターミナル----------------
$ npm run test-all
> npm-run-all -p test:*
> echo "fuga"
> echo "hoge"
fuga
hoge
---------------------------------
run-s
直列処理の省略記法
run-s test:hoge test:fuga
run-p
並列処理の省略記法
run-p serve test:hoge test:fuga
npm-run-all を入れた時点でのscripts
"scripts": {
"start": "run-p serve web",
"serve": "json-server --watch api.json",
"web": "webpack && opener http://localhost:3000 & webpack-dev-server --hot --inline"
},
NODE_ENV
実行時にNODE_ENV=production を与えると process.env.NODE_ENV が "production" になるので
これを利用して環境変数を切り替える
"scripts": {
"start": "run-p serve web",
"start:dev": "NODE_ENV=production run-p serve web",
"serve": "json-server --watch api.json",
"web": "webpack && opener http://localhost:3000 & webpack-dev-server --hot --inline",
}
webpack.DefinePlugin で環境変数を設定
webpack.config.js にpluginsの設定を追記
webpack.DefinePlugin 設定すればどこからでも環境変数としてとってこれる
module.exports = {
entry: {
},
output: {
},
devServer: {
contentBase: 'dist',
port: 3000
},
module: {
},
resolve: {
},
plugins: [
new webpack.DefinePlugin({
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
})
]
};
redux-saga 等のmiddleware部分でaxiosの設定
axios.defaults でaxiosの初期設定を行う
//local環境の設定 json-server のportなど
axios.defaults.baseURL = 'http://localhost:3005/';
NODE_ENV で production の場合は localのjson-serverをapi先に指定
それ以外は本番環境を見に行くようにする
//local環境の設定 json-server のportなど
axios.defaults.baseURL = 'http://localhost:3005/';
//結合環境時の設定
if(NODE_ENV !== 'production'){
axios.defaults.baseURL = 'http://hogehoge.com';
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.timeout = 10000;
}
起動
//local環境
npm run start:dev
//結合環境
npm start
とりあえず、以上になります！
おかしな点や改良点があればご指摘宜しくお願い致します！！
宣伝
[株式会社 Y's] (http://ysinc.co.jp/) ではいつでも仲間を募集しております！