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]をインストールします。
インストールの手順に関してはこちらのサイトを参考にしました。

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

余談　[Docker Toolbox]のインストール

Docker ToolboxはWindows環境にDocker Toolboxをインストールするが参考になると思います！
私が別端末にインストールしようとした際は、どこにもDownloadボタンがなく困り果てました。

画像の赤線箇所のリンクを押すと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を使ってコンテナの中に入ってます。)
公式の通りReduxをインストールします。

npm ERR! Maximum call stack size exceeded が出たときの対処

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

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

• React Developer Tools
• Redux DevTools

Redux DevToolsの使い方はこちらを参考にしました。

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

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