【2026年版】WSLでDockerを使ってReact開発環境を作る(ざっくりメモ)

前提となるディレクトリ構造：

project_root（フロントフォルダ＋docker-compose.yml）
　　・docker-compose.yml
　　frontend-react（フロントフォルダ）
　　　src（諸々）
　　　・package.json
　　　　......(index.htmlなど、、)

１、Dockerなしで、React環境を作る。

cd project_root
mkdir frontend-react
cd frontend-react
yarn create vite .

２、エラー回避のため、frontend-react内に.yarnrc.ymlを作成
（最新のPnP方式ではなく、node_modules方式を強制するらしい。Dockerでは必要らしい。）

.yarnrc.yml

nodeLinker: node-modules

３、yarnを実行し改めてinstall

yarn

４、./frontend-react/package.jsonのdevを、"dev": "vite --host"にする

package.json

{
  "name": "frontend-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host", ←ここを変更

５、./frontend-react/Dockerfileを作成して、以下を書き込む

Dockerfile

FROM node:20-alpine

WORKDIR /frontend-react

COPY package.json yarn.lock .yarnrc.yml ./
RUN yarn install

COPY . .

EXPOSE 5173
CMD ["yarn", "dev"]

６、/project_root/docker-compose.ymlを作成して、以下を書き込む

docker-compose.yml

services:
frontend-react:
    build:
    context: ./frontend-react
    volumes:
    - ./frontend-react:/frontend-react
    - /frontend-react/node_modules
    ports:
    - "5173:5173"
    stdin_open: true
    tty: true

７、

docker compose up frontend-react

ホットリロード対応の開発環境の出来上がり。

おつかれさまでした。