docker-composeでReactの開発環境作る。

アウトプットを兼ねて、dockerを使ってReactAppを実装しようと思います。

まずはDockerfileとdocker-compose.ymlを用意します。

Dockerfile

FROM node:12.18.0-alpine
WORKDIR /usr/src/app

docker-compose.yml

version: '3'
services:
  react:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
     - ./:/usr/src/app
    command: sh -c "cd workplace && yarn start"
    ports:
     - "3000:3000"
    tty: true

docker-compose build

[+] Building 27.4s (6/6) FINISHED
これが表示されたらビルドは成功しています。
続いてcreate-react-appをコンテナ環境で実行できるようにしていきます。
同時にコマンドを実行してReactアプリをworkplaceディレクトリに作成していきます。

docker-compose run --rm react sh -c "npm install -g create-react-app && create-react-app workplace"

docker-compose up -d

Creating docker-react-project_react_1 ... done
これが表示されたらコンテナが立ち上がっているのでブラウザからlocalhost:3000
にアクセスしてみましょう。

Docker-React環境の構築は完了です。