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

VPNを使用する際、主な問題は、ブラウザやシステムがローカルトラフィックをVPNトンネル経由で送信しようとするため発生します。これにより、接続エラーやページの更新が正常に行われないといった問題が生じます。

VPNでの例外設定（スプリットトンネリング）

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

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

• スプリットトンネリングまたは除外リストのセクションを探します;

• 以下のアドレスを除外リストに追加します：

  • 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（Hot Module Replacement）の設定

サイトは開くものの、手動で再読み込みを行わないとコードの変更が反映されない場合は、VPNがWebSocket接続をブロックしている可能性があります。その場合は、ホットモジュールリロードのパラメータを明示的に指定する必要があります：

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

セキュアな接続を使用する場合は、プロトコルを wss に変更してください。

ターミナルでのシステムプロキシの無効化

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

Windows (PowerShell) の場合：

$env:HTTP_PROXY=""
$env:HTTPS_PROXY=""

npm run dev

macOS/Linux の場合：

unset HTTP_PROXY
unset HTTPS_PROXY

npm run dev