Docker + React + TypeScript お手軽環境構築 〜 npm startまで 〜

# はじめに
筆者もDockerの超初心者です。とりあえずDockerでコンテナ作ってその上でReactを使用して開発したい方向けです。Dockerはこれから勉強しようと思います。
**完全にMacユーザー向けの記事です。**

**本記事の流れ**
1. Dockerfileの作成
2. docker-compose.ymlの作成
3. Dockerコンテナの立ち上げ
4. TypeScriptベースのReact雛形の作成
5. Docker上でReactの起動

以下、どうやってDockerが動いているのかなどの細いか説明は省いてとりあえず手順通りやればイケるでって感じで書いていきます。詳細な説明や仕組まで理解したい方は[こちら](https://code-ship-blog.wemotion.co.jp/technology/react%E3%81%AE%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%82%92docker%E3%81%A7%E6%95%B4%E3%81%88%E3%82%88%E3%81%86/#section2)の記事が参考になるかもしれません。

## 1. Dockerfileの作成
どこでも良いので今回作業するためのディレクトリを作成してください。(本記事では`root`とします。)　作成したディレクトリで`Dockerfile`を作成します。めちゃ簡単にDockerfileはなんぞやを説明すると「どんなコンテナなのか」の情報が書かれたものです。

```Dockerfile:Dockerfile
FROM node:12.16.1-alpine3.9　// 任意のnodeのバージョンを記載してください
```

### 2. docker-compose.ymlの作成
同じく作成したディレクトリで`docker-compose.yml`を作成します。これもめちゃ簡単に？説明すると「複数のコンテナをまとめて管理するためのツール」です。

```yml:docker-compose.yml
version: "3.7"
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./front:/front
    working_dir: /front
    command: node
    tty: true
```

それぞれどんな意味の記述なのかは[こちら](https://code-ship-blog.wemotion.co.jp/technology/react%E3%81%AE%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%82%92docker%E3%81%A7%E6%95%B4%E3%81%88%E3%82%88%E3%81%86/#section2)の記事で確認してください。冒頭でも書きましたがとりあえず動くようにするのが本記事の目的です。

### 3. Dockerコンテナの立ち上げ
１と２を終了した時点でディレクトリは以下のようになっていると思います。

```
root/
 ├ Dockerfile
 └ docker-compose.yml
```

この状態で、

```
root$  docker-compose build
```
を実行してください。これでコンテナの準備が整いました。
次はDockerコンテナを立ち上げます。

```
root$  docker-compose up
```

これでDockerコンテナが起動しました。

### 4. TypeScriptベースのReact雛形の作成
Reactの雛形を作成していきます。先ほどまで使用していたウィンドウはDockerコンテナ起動に使用しているので、新しいターミナルウィンドウを開いてください。
今回のReactプロジェクトは`TypeScript`かつ、`npm`を使用するようにします。
以下のようなディレクトリ構成になるように`root`にいる状態で`mkdir fornt`を実行してください。

```
root/
 ├ Dockerfile
 ├ docker-compose.yml
 └ front/
```
**注意**
**ここで作成するディレクトリ名は必ず`front`にしてください。先ほど作成した`docker-compose.yml`の設定が効かなくなってしまい、うまく動作しなくなります。**

`cd front`で先ほど作成したディレクトリに移動し、以下のコマンドを打ち込んでください。（Mac本体に`node`がインストールされている前提、nodeのインストール方法は[こちら](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)の記事が参考になると思います。）

```
front$ npx create-react-app . --template typescript --use-npm
```

これでReactプロジェクトが完成しました。

### 5. Docker上でReactの起動
先ほどDockerコンテナを起動したターミナルに戻り、一度落とします。
`Command` + `C`でDockerコンテナを落としたら、`Dockerfile`と`docker-compose.yml`を少し編集します。

いろいろ追記していますが、説明は吹っ飛ばします。冒頭でも紹介した参考記事を読んでみてください。

```Dockerfile:Dockerfile
FROM node:12.16.1-alpine3.9
COPY ./front /front
WORKDIR /front
RUN npm install
EXPOSE 3000
CMD npm start
```

```yml:docker-compose.yml
version: "3.7"
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./front:/front
    working_dir: /front
    command: npm start
    tty: true
    ports:
      - 3000:3000

```

編集が完了したら再度

```
root$ docker-compose up
```

を行います。また、新しいターミナルを開いて、`root/front`まで移動します。
この状態で、

```
front$ docker-compose exec front sh
```
一応これでコンテナ内にいる状態になりました。今回はここで作業はしませんがこれでコンテナ内へアクセスすることができます。

実は、`docker-compose up`をした時点で[http://localhost:3000/](http://localhost:3000/)にはアクセスできるようになっています。あとは、ゴリゴリ開発できるようになっています。

## 最後に
筆者自身もDockerを触り始めてから程なくしてこの記事を書いているので正直Dockerの仕組みや偉大なメリットについて詳しく理解していません。これからは当たり前の技術になるようなのでしっかりマスターしたいと思います！