Dockerでdocker-compose.ymlを使ってReact環境を構築する方法

Node.jsがインストールされていればReact環境を構築することができます。

docker-compose.ymlを次のように設定します。

version: '3'

services:
  react:
    build:
      context: .
      dockerfile: src/Services/React/Dockerfile
    volumes:
      - ./reactapp:/usr/src/app
    command: sh -c "cd my-app && npm start"
    ports:
      - 3000:3000

runコマンドで起動します。

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

localhost:3000にアクセスすると、Reactアプリが立ち上がっているはずです(表示されるまでに少し時間がかかる)。

画面に

Edit src/App.js and save to reload.

と表示されているように、src配下のApp.jsを編集して自分の作りたいものを作っていけばOKです。

downコマンドで停止と削除(--rmオプションをつけて起動したので)ができます。

$ docker-compose down

---

参考サイト
- dockerでReact環境を構築
- Docker React環境簡単構築
- Node.js使ってdocker-composeでReact環境構築
- Reactで誰もがやりたかった10の機能。アプリ構想はあるけど作れない人の壁をぶっ壊す。
- 既存のウェブサイトに React を追加する
- 新しい React アプリを作る
- docker-compose run --rm の rm ってどういう意味なんでしょうか？