【Docker】Reactアプリを使ってワークフローを勉強する 自分用メモno.34

![パンプキン カフェ (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/f41a0ca5-eab7-911b-2efb-ec6905e0e91b.png)


Reactのアプリをコンテナ化して、

Development ➡　Productionのワークフローを学んでいる自分の備忘録になります。

#Reactのアプリを作る時に必要なコマンド早見表

| コマンド| 何をするか |
|:-:|:-:|
|npm run start | developmentのためのサーバーをスタートさせる  |
|npm run test  | プロジェクトに関するテストを実行する  |
|npm run build |プロダクションバージョンのアプリを構築する  |


#ワークフロー

##developmentのサーバーを立ち上げる

Dockerfile.dev　ファイルからイメージをbuildしてコンテナを実行してみた。

ファイルは以下のように書いている


![2021-07-28_12-11-35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/3ec95756-560d-04fe-c779-9768e69f4f29.png)

コンテナを実行する際に、CMDに書かれているコマンドが実行され無事にサーバーが立ち上がった。


##npm run testで上書きして実行する

```
docker run <ImageID> npm run test
```
で先ほどの、CMDのコマンドを上書きして実行する

![2021-07-28_11-53-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/ccad2705-83af-805b-75b9-62d284c00c1a.png)

下のスクショがnpm run testコマンドの実行結果

![2021-07-28_12-19-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/4c8c778f-509c-1c68-0f47-560dcb96e070.png)

ただ、これだとターミナルの続きにコマンドを打つことができない

```
docker run -it <ImageID> npm run test
```

なので上記のコマンドのように　-itオプションを付けて実行するとよい


![2021-07-28_12-26-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/42e4d764-7340-1b24-432c-b8241cde2e11.png)

ctrl + C でこのテストから抜けることができる

またエンターキーを押すと、テストが再度実行される

##問題点

上記の方法でtestコマンドを実行することができるが、testファイルに変更が加えられた時、その更新が反映されないという問題点がある。

例えば、App.test.jsのソースコードのtestの部分をコピペして2回のテストをさせるように変更しても、その変更は反映されず、相変わらず、1回だけしかテストが実行されなかった。


![2021-07-28_13-18-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/aa088f95-74ce-971b-145a-cef56d7d4840.png)

なぜならば、Containerのイメージを作る時にはその時点でのファイルシステムのスナップショットが撮られ、その時点のイメージを基にContainerが作られるから

では、どのようにしたらtestファイルの更新をイメージをrebuild せずに反映させることができるか？

解決方法を下記に書いていく

##解決方法①

```
docker exec -it <ImageID> npm run test
```

上記のコマンドを使うことで、既存の実行中のContainerを使いながら、testを実行する事ができる

###バインドマウントをさせてContainerを実行

![2021-07-28_13-53-40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/e787d8e2-5c7b-cbbb-edff-b0b6757b5184.png)

上記のように書いたdocker-compose ファイルをupする

バインドマウントしたContainerが実行中になる

既にバインドマウントしているContainerにさらにコマンドを実行させるために

```
docker exec -it <ImageID> npm run test
```

を実行する

![2021-07-28_14-01-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/18a40d6e-d4ba-bc99-a41a-6449c806fd18.png)

イメージをrebuildしなくても、testファイルの更新が反映されるようになった。

![2021-07-28_14-06-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/e38c30ca-223d-8c8a-11fb-659ffb51e504.png)


![2021-07-28_14-07-50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/a357bec5-3968-adfd-3a7a-7de926cfb656.png)

testファイルの更新を即時に反映させることには成功したが、バインドマウントしているContainerを実行して、execコマンドでそのContainerに新たなコマンドを実行させることが少し面倒

ということで、解決方法②により良い解決方法を書いていく

##解決方法②

解決方法②は、docker-composeファイルに、新たにtestを実行するだけのアプリをつけ足す方法だ。

![2021-07-28_15-01-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011305/874aebb5-68aa-c0c3-7969-19533af11ffd.png)

これでバインドマウントしたtestを実行するだけのContainerができるので、App.test.jsファイルに変更が加わった時に、即時にその変更がブラウザーに反映される(ただし、Windowsではこの方法は使えない)

#まとめ

今回の記事では

①developmentのサーバーを立ち上げ
②testを実行する

ところまで書いたので、次は

③production用のサーバーを立ち上げる

ことについて書いていく