DockerでReactを立ち上げる

ファイルの作成

mkdir react_app
cd react_app
touch Dockerfile docker-compose.yml

ファイルの記述

FROM node:16.15.0-alpine
WORKDIR /var/www

version: '3.9'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/var/www # ローカルをコンテナ内にマウント
    command: sh -c "cd my-app && yarn start"
    ports:
      - "3000:3000"
    stdin_open: true 

実行

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

コンテナの起動

docker-compose up -d

localhost:3000にアクセスすると表示される
もし応答がなければ下記コマンド

docker compose logs -f

少し待って、以下のような応答が返ってきたらlocalhost:3000にアクセスできる

react-app_1  | Compiled successfully!
react-app_1  |
react-app_1  | You can now view react-sample in the browser.
react-app_1  |
react-app_1  |   Local:            http://localhost:3000
react-app_1  |   On Your Network:  http://172.19.0.2:3000
react-app_1  |
react-app_1  | Note that the development build is not optimized.
react-app_1  | To create a production build, use npm run build.
react-app_1  |
react-app_1  | webpack compiled successfully
react-app_1  | No issues found.

コンテナ内のシェルを起動

docker-compose exec web /bin/sh

docker-compose exec web ~~とするのは面倒なので、上記コマンドを実行してからコンテナ内で使いたいコマンドを実行する