【Vite】ローカル開発で任意のドメインを使う

こんにちは、フリーランスエンジニアの太田雅昭です。

開発環境でのドメイン

Webサイトを作る際に、開発環境で任意のドメインを使いたいことがあります。たとえばschedule関連のWebツールなら、

http://local.schedule-tool.com

と言った具合です。こうすることで、クッキー管理が別プロジェクトと分離されたり、IDやパスワードも別扱いになるなど、良いことだらけです。なおプロジェクトごとに、hostsファイルを編集するなどが必要です。

Viteでは設定が必要

Viteでは以下の設定が必要になります。

// vite.config.js
server: {
  allowedHosts: ["local.schedule-tool.com", "localhost", "127.0.0.1"],
},

起動時にはオプションをつけます。

vite --hosts