Docker-ComposeでReactをやってみる

はじめに

今回はDocker-ComposeでReact用のコンテナを作ってみました。
※Reactのインストールについては別途、解説予定

まずは作業ディレクトリを作成する

mkdir react
cd react

Dockerfileを作成する

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

docker-compose.ymlを作成する

あらかじめ、Dockerのビルドコンテキスト内に
create-react-appで作成したReactアプリ「react-sample」をおいておく。

version: '3'
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app # ローカルとコンテナ内の同期
    command: sh -c "cd react-sample && yarn start"
    ports:
      - "3000:3000"
    stdin_open: true

これでコンテナ実行時に参照するカレントディレクトリには
Reactアプリ「react-sample」が存在するよう調整できる。
今回はボリュームマウントである為、イメージにアプリは含まれていない。

イメージを作成する

docker-compose build

ここでポイント
docker-composeはイメージに変更がないときにbuildをしても
イメージを再度作成するということはしない。これは2回ビルドしたときに
ハッシュ文字列が同じであることからわかる。

コンテナを起動する - パターン1

ベーシックに起動

docker-compose up

コンテナを起動する - パターン2

引数を渡して起動

docker-compose run -d -p 3000:3000 --name react_node node

サンプルのアプリの作成も含めてコンテナを起動する場合は以下

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

ローカルホスト3000 にアクセス

無事にコンテナを起動できました。8888888

おまけ

これだけだとなんだかさみしいので
App.jsを書き換えて実行してみる。
普段はローカルで実行して書き換えた内容を即反映しているが、Dockerではどうなるか検証してみた。

結論：おそらく、書き換えたらDockerを再起動する必要がある。