MENU
  1. ホーム
  2. Javascript
  3. React + TypeScript + Dockerの開発環境構築方法

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

Javascript

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に用意しています。

参考ページ

Github：react-ts-docker

Javascript
Docker JavaScript React TyepScript
よかったらシェアしてね！
  • URLをコピーしました！
目次