Reactの開発環境をDockerで構築(その2)
はじめに
前回、dockerコマンドを使用してreactの開発環境を構築しました。
このままでも使うことはできますが、アプリケーションを作成する都度コマンドを打たなくても良いように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
ポイントは、
volumes で コンテナ内に出来上がる react-app を ホスト上のカレントディレクトリ直下の react-app にマウント
http://docs.docker.jp/compose/compose-file.html#volumes-volume-driverdocker-compose up した時に実行するコマンドを command で指定
http://docs.docker.jp/compose/compose-file.html#command- cd react-app でreactのアプリディレクトリに移動
- yarn で node_modulesにパッケージをインストール
- yarn start で reactの開発用サーバーの起動
の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
で、すぐに新しい環境が手に入ります。