VPNを有効にした状態でViteを使用する方法、迅速な解決策

VPNを利用して開発を行う際、主な競合の原因は、ブラウザやシステムがローカルプロキシを介さず、ローカルのトラフィックをVPNトンネルにルーティングしようとすることにあります。これにより、接続エラーやページの更新（HMR）が動作しない問題が発生します。

VPNの除外設定 (スプリットトンネリング)

最も確実な方法は、VPNクライアントがローカルアドレスを無視するように設定することです。

• VPNクライアントの設定を開きます。

• Split Tunneling または Exclusion List（除外リスト）のセクションを探します。

• 以下のリストを除外対象に追加してください：

  • localhost
  • 127.0.0.1
  • 0.0.0.0

IPアドレスとポートの強制バインド

Viteをすべてのネットワークインターフェースで利用可能にし、特定のポートを使用するようにするには、vite.config.js を編集します。ホストを 0.0.0.0 に設定することで、VPNのルーティング制限を回避できる場合が多くあります。

export default {
  server: {
    host: '0.0.0.0', 
    port: 3000,
  }
}

HMR (ホットモジュールリプレイスメント) の設定

サイト自体は開けるものの、コードの変更が手動リロードなしで反映されない場合、VPNがWebSocket接続をブロックしている可能性があります。その場合は、HMRのパラメータを明示的に指定する必要があります。

export default {
  server: {
    host: '0.0.0.0',
    port: 3000,
    hmr: {
      protocol: 'ws',
      host: 'localhost',
    },
  },
}

注意: HTTPS接続を使用している場合は、プロトコルを wss に変更してください。

ターミナルのシステムプロキシ設定を解除する

VPNによって設定された環境変数がViteと競合する場合、サーバーを起動する前にターミナルで一時的にプロキシ設定をリセットできます。

Windows (PowerShell):

$env:HTTP_PROXY=""
$env:HTTPS_PROXY=""
npm run dev

macOS/Linux:

unset HTTP_PROXY
unset HTTPS_PROXY
npm run dev