10分でReact × Dockerの環境構築

##概要
React×Dockerの環境構築ではまったのでメモとして書きました

##環境構築

#####作業ディレクトリを作成

$ mkdir react-docker

#####Dockerfile作成

Dockerfile

FROM node:8.16.0-alpine
WORKDIR /usr/src/app

#####docker-compose.ymlを作成

docker-compose.yml

version: "3"
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    stdin_open: true
    volumes:
      - ./:/usr/src/app
    command: sh -c "cd react-sample && yarn start"
    ports:
      - "3000:3000"

#####ビルド

$ docker-compose build

#####create-react-appとReactのインストール（数分かかります）

$ docker-compose run --rm web sh -c "npm install -g create-react-app && create-react-app react-sample"

#####コンテナ起動

$ docker-compose up

#####終了！

##ちょっとはまったところ

stdin_open: trueの記述をなしで構築するとコンテナ起動後にすぐコンテナが停止してしまう。
docker run の「-it」オプションに当たるもの。これを指定しないと、コンテナを起動してもすぐ終了してしまう

$ docker-compose up
Creating docker-react_web_1 ... done
Attaching to docker-react_web_1
web_1  | yarn run v1.15.2
web_1  | $ react-scripts start
web_1  | ℹ ｢wds｣: Project is running at http://172.20.0.2/
web_1  | ℹ ｢wds｣: webpack output is served from 
web_1  | ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/react-sample/public
web_1  | ℹ ｢wds｣: 404s will fallback to /
web_1  | Starting the development server...
web_1  | 
web_1  | Done in 12.50s.
docker-react_web_1 exited with code 0

参考:　https://github.com/facebook/create-react-app/issues/8688

docker-compose.yml

version: "3"
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    stdin_open: true
    volumes:
      - ./:/usr/src/app
    command: sh -c "cd react-sample && yarn start"
    ports:
      - "3000:3000"

####参考記事
-Reactの開発環境をDockerで構築してみた