React+Redux学習への道のり。～React＋Reduxの環境を構築する～

#はじめに・・・
WindowsでDockerを利用してReact+Reduxの環境を構築するまでための私的なメモです。

※今回はDockerがややメイン。

#環境
Windows10
Docker for Windows

#手順
1. Dockerのインストール
2. React+Redux環境をつくる
    1. nodeコンテナを作る
    2. Reactアプリを作る
    3. Reactアプリを起動させる
    4. Reduxをインストールする
3. デバッグツールの用意


#1.Dockerのインストール
DockerでReact環境をつくるので、まずはDockerをインストールします！
WindowsでDockerを利用する場合は「Docker for Windows」か「Docker Toolbox」をインストールします。

[Docker for Windows]は以下スペックを満たしているPCでないとインストールができません！

  - Windows10 Pro 64bit
  - Intel Core i5-8350U 1.70Ghz/1.90GHz
  - Memory 16GB

スペックを満たしていない場合は[Docker Toolbox]をインストールします。
今回は上記スペックを満たしているので[Docker for Windows]をインストールします。
インストールの手順に関しては[こちらのサイト](https://ops.jig-saw.com/tech-cate/docker-for-windows-install)を参考にしました。

インストールをするとタスクバーにアイコンが表示されます。
※Dockerを止めたい場合はアイコンをクリックして出てくるメニューの「Quit Docker Desktop」をクリックします。(おばちゃんはこんな所で詰まった・・・。)

## 余談　[Docker Toolbox]のインストール
Docker Toolboxは[Windows環境にDocker Toolboxをインストールする](https://qiita.com/KIYS/items/8ac37f6757a6b7f84569)が参考になると思います！
私が別端末にインストールしようとした際は、どこにもDownloadボタンがなく困り果てました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269980/6dca9896-a286-a12b-c800-c853190bbf0c.png)
画像の赤線箇所のリンクを押すとGitHubページに飛びます。GitHubに慣れていないおばちゃんなので諦めかけましたが、若手の子が「大丈夫」と言ってくれたので、ビクつきながらもダウンロードしました。

全然大丈夫でしたｗ

#2.React+Redux環境をつくる
##2-1.nodeコンテナを作る ＋ 2-2.Reactアプリを作る
###Dockerfileを作成する
まずはnodeコンテナの作成手順となるDockerfileを作業場所に作成します。

作業場所は

```
　　C
　　｜-Users
　　　　｜-xxxx
　　　　　　｜-Documents
　　　　　　　　　|-Docker
　　　　　　　　　　　|-react-app ←ここ

```

Dockerfileの内容↓

```
　　　FROM node:xx.xx
　　　# 作業ディレクトリに移動しておく
　　　WORKDIR /usr/src/app
```
※nodeのバージョンに関しては作成するバージョンで。

###docker-compose.ymlを作成する
次にコンテナを起動させる手順をまとめたdocker-compose.ymlをdockerfileと同じ作業場所に作ります！
コンテナは1つだけど、docker-compose.yml作ります。
理由としては、ポートの設定やマウントの設定をまとめれるから。docker-compose.yml作ってないと、起動するたびに指定が必要になってしんどい・・・。

ってことでdocker-compose.ymlの内容↓

```
version: '3'
services:  
    app: 
        build: .
        environment: 
            - CHOKIDAR_USEPOLLING=true　←（1）
        volumes:
            - /c/Users/xxxx/Documents/Docker/react-app/work:/usr/src/app←（2）
        command: sh -c "cd sample && yarn start"　　←（3）
        ports:
           - '3031:3000'　←（4）
```
(1)WATCH機能の設定
Docker Toolboxで作成した際はこれがないとソースを更新しても反映されませんでした。
サイトが見つけれませんでしたがWindowsの場合デフォルトがfalseらしいです。(Dockerなら関係ないと思うんですが・・・。よくわかりません。)
Docker for Windowsで作成した際も念のため付けました。

(2)マウントの設定
コンテナとホストの作業場所を共有してくれる設定。`Docker Toolbox`では相対パスで行けましたが`Docker for Winodws`では絶対パスでないとダメでした・・・。謎

(3)Reactアプリの起動
コンテナの立ち上げと同時にReactのアプリケーションを立ち上げるコード。

※追記：`yarn start`をするとlocalhostが立ち上がるわけですが、これは下記の`npx create-react-app `コマンドで作られるアプリケーションの中に同封されているサーバーを起動しているため。

(4)ポートの指定
今回は`3031`で起動させます。

### コンテナの作成とアプリケーションの作成 
```
cd 作業場所
docker-compose build ←(1)
docker-compose run --rm app sh -c 'npx create-react-app sample' ←(2)
```
(1)Dockerfileをもとにimageが作成される
(2)(1)のイメージを使ってコンテナを作成。同時に`npx create-react-app sample`が実行され、Reactアプリが作られる。

(2)上記コマンドを実行すると、マウントしたフォルダにReactのソースが出来上がる。
またコンテナは`--rm`を指定しているので削除される。

##2-3.Reactアプリを起動させる

```
cd 作業場所
docker-compose up
```
で本来ならコンテナが立ち上がるはずですが、何度やってもコンテナが起動しませんでした・・・。
代わりに

```
cd 作業場所
docker-compose run --service-ports app
```

でコンテナを立ち上げることに・・・。
なおrunの場合`--service-ports`を指定しないとdocker-compose.ymlのポート指定が有効になりません。
コンテナを立ち上げるとdocker-compose.ymlの`command`が起動されるのでReactアプリが起動します。

##2-4.Reduxをインストールする
コンテナの中に入って作業します。(私はVScodeを使ってコンテナの中に入ってます。)
[公式](https://redux.js.org/introduction/installation)の通りReduxをインストールします。

### npm ERR! Maximum call stack size exceeded が出たときの対処
Dockerを利用して環境を作ると`npm ERR! Maximum call stack size exceeded`なんてエラーがでました。
対策としては[こちらのサイト](https://www.koatech.info/blog/npm-vm-stack-size-exceeded/)を参考に
`npm install -no-bin-links xxxx`(xxxxはモジュール)ってした何とかなる場合も・・・
それでもどうにもならないときは`yarn add`で追加。※ちなみにコンテナは再度作り直してまっさらな状態でやり直すのが一番

#3.デバッグツールのインストール
Chromeに以下をインストールします。

- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
- [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja)

Redux DevToolsの使い方は[こちら](https://harkerhack.com/react-redux-devtools/)を参考にしました。

※「Redux DevTools」をいれるとStoreの内容や発行されたActionが見れるので助かったけども、処理の流れを追いにくい・・・。
デバッグツールに関してはまだ調べきれてません。お勧めがあれば知りたい・・・。

#おわりに・・・
Dockerを使えると、何度でもやり直せるので気が楽でいいです！これを機にDockerの知識も深めれたような。
コンテナの起動でかなり苦戦しました・・・。
これでようやっとReactを試せる状態になりました！