🗨️

React + Dockerのホットリロード（Vite)

2025/02/15に公開

Docker

3ステップで進めます。
手順

vite.config.tsファイルの修正
Dockerfileの作成
docker-compose.ymlの作成

これで作ったと思われます。

npx create-vite@latest frontend --template react-ts
cd frontend
npm install

ディレクトリ構成

.
├── backend/
│   └── ## Go言語の予定
├── frontend/
│   ├── node_modules
│   ├── public
│   ├── src/
│   │   ├── ## この中に処理ファイルを記述
│   │   └── App.tsx
│   ├── .dockerignore ## dockerのビルドに不要なファイルを記述
│   ├── Dockerfile
│   ├── XXX.json ## json系のファイルもここ
│   └── vite.config.ts
└── docker-compose.yml

ソースツリー作成ツール

vite.config.tsの修正

ホットリロードを行うために下記ファイルは重要です。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    // 下記を追加
    watch: {
      usePolling: true,
    }
  }
})

これでホットリロードができます。

Dockerfileの作成

# Node.js の公式イメージを使用
FROM node:20

# 作業ディレクトリ
WORKDIR /app/frontend

# 依存関係をインストール
COPY package.json package-lock.json ./
RUN npm install

# ソースコードをコピー
COPY . .

# 開発サーバーを起動
CMD ["npm", "run", "dev"]

ディレクトリ構成によって変わるのは、

# 作業ディレクトリ
WORKDIR /app/frontend

この部分なので注意してください。

docker-compose.yml

version: "3.8"

services:
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    volumes:
      - ./backend:/app/backend
    image: backend-go
    command: air
    environment:
      - GIN_MODE=debug
    depends_on:
      - db

  frontend:
    build: ./frontend
    ports:
      - "5173:5173"
    volumes:
      - ./frontend:/app/frontend
      - /app/frontend/node_modules
    image: frontend-react
    command: ["npm", "run", "dev"]
    depends_on:
      - backend

  db:
    image: postgres:16
    restart: always
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: mydb
    ports:
      - "5432:5432"
    volumes:
      - db-data:/var/lib/postgresql/data

volumes:
  db-data:

上記を貼り付けたらできます。
backendはGo言語なので不要なら消してください。

  frontend:
    # どのディレクトリをビルドするか
    build: ./frontend
    # viteのデフォルトポート番号
    ports:
      - "5173:5173"
    volumes:
      # forntendのフォルダを、dockerのapp/frontendに配置する
      - ./frontend:/app/frontend
      # node_modulesを排除できる（ビルドが速くなる）
      - /app/frontend/node_modules
    # 名前をつけることで<none>が増えるのを防げる
    image: frontend-react
    # ビルドコマンド
    command: ["npm", "run", "dev"]
    # backendがビルドされたらfrontendのビルドが始まる
    depends_on:
      - backend

ymlファイルの説明は以上です。
App.tsxファイルを操作して変更が反映されるか確かめてみてください。

ビルドが遅いときの対処

.dockerignoreにdockerビルド時に不要なファイルを記述すると速くなります。

node_modules
.git
.gitignore
Dockerfile
.vscode
dist

node_modulesを入れるとだいぶ速くなりました。
ちなみに、.gitignoreはgit pushで送信しないファイルをまとめるために使います。

バックエンド側のホットリロード

バックエンドはGo言語を使用しています。
Go言語＋Dockerでホットリロード（Air）のやり方を紹介している記事です。