React + TypeScript + Dockerの開発環境構築

環境

  • Windows
  • Mac

構成

  • webpack
  • yarn
  • Docker

ディレクトリ構成

ディレクトリ構成は以下。
シンプルに作成しました。

/
├ Dockerfile
└ docker-compose.yml

コード

Dockerfileは以下。

FROM node:16-alpine3.11
WORKDIR /usr/src/app

docker-compose.ymlは以下。

version: '3'
services:
  node:
    build:
      context: .
    tty: true
    environment:
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - ./:/usr/src/app
    command: sh -c "cd app && yarn start"
    ports:
      - "3000:3000"

Dockerでホットリロードができない場合の対処方法

利用方法

初回起動

docker-compose build --no-cache
docker-compose run --rm node sh -c "npx create-react-app app --template typescript"

起動

docker-compose up

http://localhost:3000 にアクセス

リポジトリ

react-ts-docker

よかったらシェアしてね!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください