Vite × Railsのnet::ERR_CONNECTION_REFUSEDエラーの解決策

事象

最近、フロントエンドのビルドツールとして人気のあるViteと、バックエンドフレームワークであるRailsを組み合わせて開発を行っていた際、ブラウザのコンソールにnet::ERR_CONNECTION_REFUSEDというエラーが発生しました。この記事ではその対処法を共有いたします。

原因

このエラーは、ViteがデフォルトでローカルホストのIPv6アドレス（::1）を使用するため発生していました。これにより、Railsサーバーとの接続が拒否され、フロントエンドからのリクエストが失敗する状態になっていました。

対処法

問題を解決するためには、Viteの設定ファイル（config/vite.json）でホストをIPv4アドレス（127.0.0.1）に明示的に設定する必要がありました。以下のように変更することで、エラーが解消され、Railsサーバーへの接続が成功しました。

config/vite.json

"development": {
    "autoBuild": true,
    "host": "127.0.0.1",
    "publicOutputDir": "vite-dev",
    "port": 3036,
}

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！