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

ディレクトリ構成

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

ファイル

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

server/react-app/Dockerfile

FROM node:8.4.0

RUN npm i -g create-react-app

WORKDIR /home/workdir

RUN create-react-app app

server/serve/Dockerfile

FROM node:8.4.0
RUN npm i -g serve

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
                

bin/up.sh

#!/bin/bash

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

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

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ディレクトリを作成してから実行。

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

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

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

参考

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