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で構築してみた