Vite + Rails でホットリロードが機能しないのはなぜですか?

概要

Rails アプリを作成し、vite_rails gem をインストールしました。私のJavaScriptはapp/frontendフォルダーにあります。

ただし、JS ファイルを保存するときのホットリロードが機能しません。

vite-plugin-full-reload NPM パッケージをインストールして試してみました。これは私のviteの設定です:

// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import FullReload from 'vite-plugin-full-reload'
import RubyPlugin from 'vite-plugin-ruby'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    RubyPlugin(),
    vue(),
    FullReload(['config/routes.rb', 'app/views/**/*', 'app/frontend/**/*']),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./app/frontend/internal', import.meta.url)),
    },
  },
})

Docker 構成:

# docker-compose.yml
services:
  db:
    image: postgres
    env_file: .env.development
  web:
    image: rails
    build: .
    volumes:
      - .:/app
    ports:
      - "3000:3000"
    depends_on:
      - db
    env_file: .env.development

FROM ruby:3.3

RUN apt-get update -qq && apt-get install -y build-essential apt-utils libpq-dev nodejs npm

COPY . /app
WORKDIR /app

RUN gem install bundler rails && bundle

CMD rm tmp/pids/server.pid && rails s -b 0.0.0.0

まだリロードされません、なぜですか?

解決策

以下は、vite-dev で動作する docker-compose.yml の例です。

  app:
    build:
      context: .
    depends_on:
      - database
      - redis
      - vite
    entrypoint: ./entrypoints/docker-entrypoint.sh
    command: ["rails", "server", "-b", "0.0.0.0"]
    ports:
      - 3000:3000
    env_file: .env
    environment:
      RAILS_ENV: development
      DOCKER: true
      VITE_RUBY_HOST: vite
      VITE_RUBY_PORT: 5173
    stdin_open: true
    tty: true

  vite:
    build:
      context: .
    entrypoint: ./entrypoints/docker-vite.sh
    environment:
      DEBUG: '*vite*'
      RAILS_ENV: development
      VITE_RUBY_HOST: 0.0.0.0
      VITE_RUBY_PORT: 5173
    ports:
      - 5173:5173

entrypoints/docker-vite.sh は次のとおりです。

#!/bin/sh

yarn install
bin/vite dev