Viteプロキシの真髄：CORSを「物理」で解決し、開発体験（DX）を極限まで高めるアーキテクチャ設計
フロントエンドエンジニアがローカル開発で最も時間を浪費するのは、実はコードを書いている時間ではありません。「APIのCORSエラーと戦っている時間」です。
バックエンドが別ポートで立ち上がっている、あるいはDockerコンテナ越しに通信している。そのたびに「バックエンド側にCORS設定を入れてくれ」と頼むのは、エンジニアとして最も非生産的なコミュニケーションです。
今回は、Viteの `server.proxy` を単なる「APIへの転送口」としてではなく、「開発環境の境界を消し去るための抽象化レイヤー」として使い倒すための、現場で使えるプロの知見を伝授します。
—
1. なぜ「Proxy」は単なる転送設定ではないのか
ViteのProxy設定は、内部で `http-proxy` を利用しています。これは単なるURLの付け替えではありません。フロントエンドのビルドサーバーを「バックエンドへの透過的なゲートウェイ」に変貌させる行為です。
これを正しく設定することで、「フロントエンドは常に `localhost:5173`（Vite）だけを見ていればいい」という、極めてクリーンなネットワーク構成を実現できます。
プロフェッショナルのための設定：`vite.config.ts` のベストプラクティス
単に転送するだけでなく、本番環境と開発環境の差異を吸収し、セッション管理や認証情報を透過させる設定例です。
import { defineConfig, loadEnv } from ‘vite’;
export default defineConfig(({ mode }) => {
// 環境変数をロードして、バックエンドのURLを柔軟に変更可能にする
const env = loadEnv(mode, process.cwd());
return {
server: {
proxy: {
// ‘/api’ で始まるリクエストをバックエンドへ転送
‘/api’: {
target: env.VITE_API_BASE_URL || ‘http://localhost:8080’,
changeOrigin: true, // ホストヘッダーをターゲットURLに書き換える（CORS回避の要）
rewrite: (path) => path.replace(/^\/api/, ”), // ‘/api/users’ -> ‘/users’ に変換
secure: false, // 自己署名証明書を使うローカル環境でもエラーにならないようにする
configure: (proxy) => {
// プロキシのイベントをキャッチしてデバッグを容易に
proxy.on(‘proxyReq’, (proxyReq, req) => {
console.log(`[Proxy] Request sent to: ${proxyReq.path}`);
});
}
}
}
}
};
});
なぜ `changeOrigin: true` が必須なのか？
多くのエンジニアがここで躓きます。バックエンドサーバーはセキュリティのために `Origin` ヘッダーをチェックしています。Viteからリクエストを送る際、このオプションを有効にしないと、`Origin` が `localhost:5173` のままバックエンドに届き、拒否されます。これを `true` にすることで、Viteがリクエストのホストヘッダーを `target` のURLへ書き換え、「あたかもバックエンドと同じオリジンから来たリクエスト」であるかのように偽装します。これがCORSを物理的に解決する仕組みです。
—
2. チーム開発を加速させる「設定共有化」の哲学
個人環境でプロキシ設定をいじり回して「動いた！」で終わらせるのは、チーム開発におけるアンチパターンです。設定ファイルは「環境に依存しない構成」を目指すべきです。
チームへの提言：`.env` を活用した疎結合設計
`vite.config.ts` に直接URLをハードコードしてはいけません。
- `.env.development`: ローカル開発者のデフォルト設定
- `.env.local`: git管理外。個人のDocker環境や、特殊なバックエンド接続先を記述する場所
このように分離することで、チームメンバーは `.env.local` を作成するだけで、各自の環境に最適化されたAPI連携が可能になります。
—
3. 生産性を極限まで高める「神プラグイン」とテクニック
神プラグイン: `vite-plugin-checker`
プロキシ経由でAPIデータを受け取る際、型定義が追いついていないとフロントエンドは壊れます。
npm install -D vite-plugin-checker
このプラグインは、TypeScriptの型チェックをビルドプロセスとは別のプロセスで並行実行します。プロキシでデータ構造が変わった際、即座にエディタ上で型エラーを警告してくれるため、実行時の「undefinedエラー」で時間を溶かすことがなくなります。
開発を高速化する「キーボードショートカット」の活用
Viteの開発サーバーを立ち上げた後、ターミナルで以下のキーを意識してください。
- `r` (Restart): プロキシ設定を変更した際、再起動なしで設定を反映させます。
- `u` (URL): サーバーのURLをクリップボードにコピーします。
- `o` (Open): ブラウザを自動で開きます。
これらを「無意識」に行えるようになると、コンテキストスイッチの回数が劇的に減ります。
—
4. テックリードからのアドバイス：さらなる高みへ
ローカル開発のプロキシ設定が完璧になれば、次は 「Mock Service Worker (MSW)」 の導入を検討してください。
`server.proxy` はバックエンドが稼働していることが前提ですが、MSWを使えば、バックエンドのAPI実装を待たずに、プロキシの設定すら必要としない（あるいはプロキシを切り替える）モック開発が可能になります。
結論として：
1. `vite.config.ts` のプロキシ設定は、`changeOrigin` を駆使してCORSを無効化する。
2. バックエンドURLは `.env` で抽象化し、チーム間で「共有すべき設定」と「個人で完結すべき設定」を明確に分ける。
3. 型安全な開発のために `vite-plugin-checker` を導入し、ランタイムエラーを未然に防ぐ。
これらを徹底すれば、あなたのチームのフロントエンド開発速度は、今日から一段階上のステージへと引き上げられるはずです。さあ、今すぐ `vite.config.ts` を開き、不要なコンフィグを捨てて、洗練されたアーキテクチャへと書き換えましょう。