create-react-appをdockerを使って試したメモ

# はじめに

Reactの開発元がReactの開発環境を手軽に構築できるツールをだしているとのこと。
Dockerを使って試してみる。

## 動作環境

* windows10
* vagrant1.9.7
* virtual box 5.1.24
* ubuntu 16.0.4
* docker 17.06.0-ce
* docker-compose 1.15.0
* create-react-app 1.4.0

## ディレクトリ構成

```yaml
- project
  + app
  + build 
  - docker-compose.yml
  - bin
    - create-react-app.sh
    - up.sh
    - build-reatct-app.sh
  - server
    - react-app
      - Dockerfile
    - serve
      - Dockerfile
```

## ファイル

```yaml:docker-compose.yml
version: '3'
services:

  # React雛形取り出し
  create-react-app:
    build: ./server/react-app
    container_name: create-react-app

  # React開発サーバ
  react-app:
    build: ./server/react-app
    ports:
      - 3000:3000
    volumes:
      - ./app/src:/home/workdir/app/src
      - ./app/public:/home/workdir/app/public
      - ./app/package.json:/home/workdir/app/package.json
      - ./build:/home/workdir/app/build
    working_dir: /home/workdir/app
    # Docker用にpollingの設定。ファイルを書き換えた時のブラウザ自動更新を有効化
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: npm start
  
  # ビルド結果確認用サーバー
  serve:
    build: ./server/serve
    ports:
      - 3001:3001
    volumes:
      - ./build:/home/workdir/build
    command: serve -s /home/workdir/build -p 3001
```

```Docker:server/react-app/Dockerfile
FROM node:8.4.0

RUN npm i -g create-react-app

WORKDIR /home/workdir

RUN create-react-app app
```

```Docker:server/serve/Dockerfile
FROM node:8.4.0
RUN npm i -g serve
```

```bash:bin/create-react-app.sh
#!/bin/bash

bin_dir=$(cd $(dirname $0) && pwd)

# コピー先ディレクトリの作成
cd $bin_dir/../ && mkdir -p app

# コンテナから必要なファイルのコピー
cd $bin_dir/../ && docker-compose up create-react-app \
                && docker cp create-react-app:/home/workdir/app/README.md app/README.md \
                && docker cp create-react-app:/home/workdir/app/package.json app/package.json \
                && docker cp create-react-app:/home/workdir/app/yarn.lock app/yarn.lock \
                && docker cp create-react-app:/home/workdir/app/src app/src \
                && docker cp create-react-app:/home/workdir/app/public app/public
                
```

```bash:bin/up.sh
#!/bin/bash

bin_dir=$(cd $(dirname $0) && pwd)

cd $bin_dir/../ && docker-compose up
```

```bash:bin/build-react-app.sh
#!/bin/bash

bin_dir=$(cd $(dirname $0) && pwd)

cd $bin_dir/../ && docker-compose run react-app npm run build
```

appディレクトリを作成してから実行。

```bash
./bin/create-react-app.sh
./bin/up.sh
```

ポートに3000を指定してブラウザでアクセスすると確認できる。

`app/src/App.js`を編集するとブラウザがリロードされることが確認できた。

## 参考

[いまどきのJSプログラマのためのNode.jsとReactアプリケーション][*1]
[Docker cpコマンドでホスト・コンテナ間のファイルのコピーをする][*2]

[*1]:https://www.amazon.co.jp/%E3%81%84%E3%81%BE%E3%81%A9%E3%81%8D%E3%81%AEJS%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE-Node-js%E3%81%A8React%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-%E3%82%AF%E3%82%B8%E3%83%A9%E9%A3%9B%E8%A1%8C%E6%9C%BA/dp/4802611145
[*2]:http://unskilled.site/docker-cp%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E3%83%9B%E3%82%B9%E3%83%88%E3%83%BB%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E9%96%93%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%82%B3/