docker-composeでReact環境構築

概要

Dockerを使用した開発や学習することが多くなってきたため、React(create react app使用)学習用の環境をdocker-composeで構築しようと思い、その時の備忘になります。
Dockerはインストールしてある状態から進めます。

※↓はnodeバージョン更新版になってます(追記:20200614)
docker-composeでreact環境構築(更新版)

環境

Docker version 18.09.2
docker-compose version 1.23.2

構築作業

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
    volumes:
     - ./:/usr/src/app
    command: sh -c "cd react-sample && yarn start"
    ports:
     - "3000:3000"

イメージをビルド

$ docker-compose build

React と create-react-app をインストール + アプリ作成

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

↓作成ディレクトリ

- Dockerfile
- docker-compose.yml
- react-sample
    |- node_module
    |- public
    |- src

起動

$ docker-compose up -d

Dockerfileに記載したport番号(今回は"localhost:3000")にアクセスすると、「Reactファイルを編集してみよう！」的な画面になります。

止める場合は

$ docker-compose stop

でコンテナが停止します。

最後に

これで簡単な構築は完了です。Reactの学習をしたい方はReactチュートリアルをやってみるといいかもしれません。

参考

• Dockerfileリファレンス
• Composeファイルリファレンス
• Reactの開発環境をDockerで構築してみた