Vite Rubyを使っていたDockerで立ち上げた環境でHMRをしようと思いvite.config.ts
でserver.host
をtrue
にしてみたが、なぜかhostが変わらずハマったので解決方法をメモ📝
server.host サーバーがリッスンすべき IP アドレスを指定します。 0.0.0.0 もしくは true に設定すると、LAN やパブリックアドレスを含むすべてのアドレスをリッスンします。 https://ja.vitejs.dev/config/server-options#server-host
vite.config.ts
でhost
を指定しても変わらなかったのは、vite-plugin-rails
でserver.host
をデフォルトでlocalhost
にしており、上書きされてしまいvite.config.ts
の設定が反映されなかったっぽい😭
"host": "localhost",
const server: ServerOptions = { fs, host: config.host, https, port, strictPort: true }
公式ガイドでVITE_RUBY_HOST
を設定する必要があると書かれていた・・・!
Making HMR work in Docker Compose# Using Vite.js with Docker Compose requires configuring VITE_RUBY_HOST in the services. https://vite-ruby.netlify.app/guide/troubleshooting.html#making-hmr-work-in-docker-compose
サンプルも載っていたので見てみたところdocker-composeで別のサービスとして立ち上げるサンプルになっていたが、
個人的には、docker-composeで管理するサービスを増やさずjsbundling-railsみたいにforemanで同時に立ち上げたかったので、
docker-compose.yml
でRailsアプリケーションのサービスでVITE_RAILS_HOST
を0.0.0.0
に設定し、port
を3036
をhostにforwardするようにして解決した🆗
ports: - "3000:3000" + - "3036:3036" environment: + VITE_RUBY_HOST: "0.0.0.0"