Node.jsとMySQLをDockerComposeで組みつつ、React(TS),Express(TS),MySQLの環境構築を躓きながらやっていく

初めてのDockerネットワーク
これから先僕が環境構築する際、思い出せるようにするための、です。

##事前準備
まずDockerHubから二つのイメージをpullするところから
それぞれ12系と5.7系を使うのでバージョン指定

$ docker run -it node:12
$ docker run -it mysql:5.7

runはpull,create,startを一気に行ってくれる

control+p+qでコンテナから出る

その後$ docker ps -aで一度止めて、
コンテナが作成されているかを確認する(Upなら一度stopしてExitedにしておく)
これからは$docker start [コンテナID]で起動できる

$ docker rename [古いコンテナ名] [新しいコンテナ名]
しておいた方がわかりやすい

正しいバージョンのものが入っているかの確認は起動後
$ docker exec -it [コンテナ名] bash
attachと違うのはコンテナを起動したまま抜けることができるのかできないのかが違うexecは起動したまま抜けることができる
でコンテナに入り、バージョン確認...

MySQLが起動しない...

先人様がいらっしゃいました。ありがとうございます。↓
https://qiita.com/takepan/items/0cbf13af3a0bb2c243ab

よしこれで確認できた

...でどうやってつなげるん？？

##Docker Composeとは

複数のコンテナを組み合わせてシステムを構成するための仕組みに用いるのがDocker Composeと呼ばれるもので、予めコンテナの起動方法やボリューム、ネットワークの構成などが書かれている

こんなものがあるのか、今まで一つのコンテナを独立させて動かしていたので、全く知りませんでした...

事前知識でDockerネットワークやマウントのことを知らなければならないとのことで書籍を借りて軽く頭に入れておきました。
全然知らないままDockerを使っていたのだなと反省

そしてこれを書いていく...docker-compose.ymlを作ってバージョン決めて、サービスの中身にnode.jsとmysql使いますよってこととかそれぞれの設定など、先人のymlファイルを参考にゴリゴリ書いていく...

書き方を丁寧に載せてる先人様の記事はこちらです。ありがとうございます。↓
https://qiita.com/zembutsu/items/9e9d80e05e36e882caaa

かけたら、docker-compose up で起動
しばし待つ

...しばし待つ

終わらねえ

db  | Version: '5.7.31'  socket: '/var/run/mysqld/mysqld.sock'  port: 3306  MySQL Community Server (GPL)

ここで止まって一向に動かない...

仕方ないので、control+cで一度抜けました

docker-compose psで確認すると動いといて欲しいdb(mysql)が動いてない...

一か八かでdocker start dbを試すと...

stateがExitからUpに
一件落着

ていうかこのやり方だと最初にコンテナは立ち上げなくても、なんならimageもpullしてこなくて急にdocker compose書いてあげた方がよかったのね...

じゃあ他のコンテナもたてます
今回はフロント、バック、dbの三つのコンテナを用意します。

docker-compose start

動かない...

それもそのはず、docker-composeに必要なコマンドを書いてなかったからなんですね
いやymlファイルに書くコマンド全然わからん...ってなった僕はとりあえずdocker-compose run [コンテナ名]　bashで中に潜り込んで、reactの環境を作ることに...

node -v,npm -vでバージョンを確認
npm install -g create-react-appでcreate-react-appをインストール

create-react-app [プロジェクトを入れるディレクトリ名] --typescript
しばしまつ...

Happy hacking!これで完了

（docker-compose run [コンテナ名] bashで中に潜り込んで作ったせいで、docker-compose upでローカルに作られたディレクトリの中に[プロジェクトを入れるディレクトリ名]のディレクトリができてしまったので削除しておく）

では改めて...docker-compose start

ンンンン？

stateがExitから変わらない...
全部docker-composeに書いてるはずなんだけどな...

ダメそうなので、docker-composeでdockerfileを参照することにする
docker-composeでimageを直接引っ張ってきてた部分をbuildで参照し、コマンドを書いたり〜、作業するディレクトリを書いたり〜

よしこれで、わかりやすくなった気がする
docker-compose start

はい、ダメー

どうすればいいのだ...と助けを求めると、
docker-compose upで立たない？
って言われハッとした

そういえば...

かけたら、docker-compose up で起動
しばし待つ
...しばし待つ
終わらねえ

'5.7.31' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server (GPL)

```ここで止まって一向に動かない...
仕方ないので、control+cで一度抜けました

これが原因じゃないの

ってことでもう一度
```docker-compose up```
...
```Compiled successfully!```

**動いた！！！！**

ということで無事コンテナが起動し、localhost:3000にアクセスすると、reactがくるくるしとる！

stopしてからのstartでも起動できることが確認できた
よかったよかったこれでフロント(react)とdb(mysql)が動いた。

styled-componentsを使いたかったので、reactのコンテナに以下二つをインストール
二つ目はTSに対応するためのもの
```yarn add styled-components```,```yarn add -D @types/styled-components```

もちろんルートも分けて使いたかったので、
```yarn add react-router-dom```,```yarn add -D @types/react-router-dom```
をそれぞれインストール

次はバック(express)のコンテナを立てるぞ





とりあえずymlファイルにインストールするコンテナやら何やらを書いて(あとでdockerfileにわけて書く)```docker-compose up```で立てて、
```docker-compose run [コンテナ名]　bash```
で中に入って、
ExpressとTSを組み合わせたいので、以下のサイトを参考にして、
https://github.com/seanpmaxwell/express-generator-typescript#readme
```npx express-generator-typescript```
でインストール(```npm run start:dev```と言うコマンドで起動する)
exitで出てdocekrを止める
dockerfileにコマンドやらなんやらをcomposeファイルから分けたり、参照するportをデフォルトの3000から4000に変更し、
もう一回```docker-compose up```
して、```docker-compose ps```
する。
...全部Upになってるので
成功！！