Reactの開発環境をDockerで構築(その2)

はじめに

前回、dockerコマンドを使用してreactの開発環境を構築しました。

ko-sho.hatenablog.com

このままでも使うことはできますが、アプリケーションを作成する都度コマンドを打たなくても良いようにdocker-composeで実行できるようにしてみます。

docker-compose.yml

前回の内容を元に、まずはyamlファイルを作成します。

docker-compose.yml

version: '3'
services:
  react:
    image: node:10.15.0-slim
    working_dir: "/work/app"
    command: bash -c "cd react-app && yarn && yarn start"
    ports:
      - "3000:3000"
    volumes:
     - ./react-app:/work/app/react-app

ポイントは、

の2点です。

create-react-app の実行

次に、docker-compose run コマンドを使って create-react-app を実行します。 http://docs.docker.jp/compose/reference/run.html

$ docker-compose run react npx create-react-app react-app

これでカレントディレクトリ内に react-app が出来上がります。

コンテナの起動

最後に docker-compose up でコンテナを立ち上げます。
http://docs.docker.jp/compose/reference/up.html

$ docker-compose up -d

yamlファイルの command でreactの開発用サーバーの起動まで行っているので、ホスト側のブラウザからlocalhost:3000にアクセスするとデフォルトで用意されたreactの画面が表示できます。


以上で環境構築ができました。出来たものをgithubなどに上げておけば clone して docker-compose up -d で、すぐに新しい環境が手に入ります。