React Vite on Docker [HMR]

React Vite on Docker

目的

仮想環境下でもHMRしたい

前提

• すでにReact Viteの環境がある
• Docker環境がある

用意したもの

• Dockerfile
• docker-compose.yml
• .dockerignore

Dockerfile

Dockerfile

FROM node:20.12.2-alpine

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci

COPY . .

CMD ["npm", "run", "dev"]

docker-compose.yml

docker-compose.yml

version: "3"

services:
  react-app: #サービス名
    build: .
    volumes: #バインドマウント
      - .:/app
      - /app/node_modules
    ports:
      - "3000:3000"

.dockerignore

.dockerignore

node_modules

変更したもの

• vite.config.ts

vite.config.ts

vite.config.ts

export default defineConfig({
  plugins: [react(), vanillaExtractPlugin()],
+  server: {
+    host: '0.0.0.0',
+    port: 3000,
+    hmr: true,
+    watch: {
+     usePolling: true,
+    },
+  },
})

起動

terminal

$ docker compose build
$ docker compose up

立ち上がるので適当にファイルの文字などを変更してHMRの確認
HMRが動いていることを確認できたら完了！