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

2021年7月18日2022年6月4日

Reactの開発環境を準備するためにDockerを利用したいと思います。

この記事でDockerさえ知っていれば誰でも簡単にReactの環境を用意できるようになります。

開発用環境情報

今回使用するツール類は以下になります。

webpack
yarn
Docker

なお本手順WindowsでもMac OSでも利用できます。

ディレクトリ構成

ディレクトリ構成は以下になります。

/
├ 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環境ではReactの強みであるホットリロードが使えないのです。以下のページを参考にしてみてください。

参考ページ

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 にアクセス

リポジトリ

今回の作成したリポジトリはGithubに用意しています。