viteのdev serverのdefaultで127.0.0.1が使えなく狼狽えた話

vite.config.(js|ts)のhostが設定できる

• defaultはlocalhost
• 127.0.0.1では待ちうけしない(大事なのはここだけ)
• DNS解決は内部でするので /etc/hostsのエントリーしたドメインを記述するか127.0.0.1を設定すれば望み通りに動く
  以上、解散

開発時にドメインをlocalhostにむけたい

開発時に本番でつかうドメインを自分のマシンにむけたい時があります
サーバからのredirectがブラウザにもどってくるときとか、GoogleのAPI Keyにドメイン制限がかかっていたりする時などです

こういう時、よくあるのは /etc/hostsとかにエントリーを書いてDNSの名前解決します

viteのserver.hostのデフォルトはlocalhost

viteのdev serverはデフォルトでhostはlocalhostで待ちます
この設定のとき、127.0.0.1では待ちません(なんと)

vite.config.jsを編集する

server.hostに127.0.0.1を設定します
(抜粋)

  server: {
    port: 8080,
    host: '127.0.0.1',
    },

hostのところはlocalでアクセスしたいドメイン名でも構いません

  server: {
    port: 8080,
    host: 'hogehoge',
    },

その上で /etc/hostsにエントリを書きます

• /etc/hosts

127.0.0.1       localhost
127.0.0.1       hogehoge
255.255.255.255 broadcasthost

これで、hogehogeがたちあがります

/etc/hostsにドメインの記載をしないで立ちあげると、dev server起動時のドメインチェックで失敗するのでサーバはたちあがらないので注意してください

まとめ

viteのdev serverで特定のドメインを使う方法でした
port 80使うならport設定を80にしてrootで起動するとか
SSLは認証鍵を他のところで取得して使うとかすればできますが、それはまたの機会で
最初localhostなんだから、/etc/hosts普通にいじればいけるでしょ、と考えてたら127.0.0.1でアクセスできなくて狼狽えた、ということでした