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

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/) ではいつでも仲間を募集しております！