webpackで react redux の開発環境 切り替え

#webpackで react redux の開発環境 切り替え

ローカルの環境と結合の環境でAPIのパスを切り替えたりしたかったので色々まとめ

前提
・ react redux
・webpack webpack-dev-server
・redux-saga
・axios


## json-server
・json-server ローカル環境用のサーバー
[たった30秒でREST APIのモックが作れる JSON Serverでフロントエンド開発が捗る](https://www.webprofessional.jp/mock-rest-apis-using-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 公式](https://www.npmjs.com/package/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/) ではいつでも仲間を募集しております！