Vite + Docker環境で無限リロード編に突入してしまうときの対処法

結論

port 24678を割り当てる

経緯

SvelteKit + Dockerで環境構築していたら、ソースコードに何も変更を加えていないのに無限にホットリロードが発生する問題に出くわした。(SvelteKitはバンドルツールにViteを用いている)

環境は以下の通り

• Vite 2.1.5
• @sveltejs/kit 1.0.0-next.71
• @sveltejs/vite-plugin-svelte 1.0.0-next.5

問題が発生したときのdocker-compose.yml

version: '3'
services:
  web:
    image: node:14-alpine
    working_dir: /app
    volumes:
      - ./:/app
    ports:
      - 3000:3000
    command: npm run dev

こちらのissueを参考にした。どうやら、Viteはws://localhost:24678を参照しにいくらしい。このポートを開けていないがために、無限にリクエストが飛び、無限にホットリロードが発生してしまっていた模様。

解決法

version: '3'
services:
  web:
    # (中略)
    ports:
      - 3000:3000
      - 24678:24678 # <--- 追加
    command: npm run dev