実現したいこと

ホストマシンから、Docker内で動く開発サーバへアクセスしたい。

TL;DR

以下のコマンドを実行すると、開発サーバをexposeできる。

npm run dev -- --host

環境

npm  == 10.7.0
vite == 5.2.11

試したこと

とりあえず通常通りサーバを起動してみる。

npm run dev

すると、

VITE v5.2.11  ready in 284 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

このように表示された。このままでは、Dockerコンテナのローカルネットワークからでないと、開発サーバへアクセスできない。

そこで、言われたように--hostを付して様子を見てみる。

npm run dev --host

すると、

VITE v5.2.11  ready in 288 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

あれ? まだexposeできていないみたい。

原因と対処

どうやら、devスクリプトのpositional argumentとして渡されるべき--hostが、npmのオプションとして認識されてしまっているようです。
npmコマンドには--hostというオプションが存在しないので、npm run devと同じ結果が返ってきたと考えられます。

もう少し詳細に見てみましょう。

package.json

"scripts": {
    "dev": "vite",
  }

まず、今呼び出そうとしているdevスクリプトの定義は上の通りです。そして、viteコマンドには、hostのIPアドレスを指定するための--hostというpositional argumentが存在します。

npm run dev --host

一方でこのコマンドは、一見--hostをdevスクリプトに渡しているようですが、実際にはnpmの(存在しない)オプションとして扱われています。そこで、

npm run dev -- --host

このように、devの後ろに--を挿入して、以降の引数がオプションではなく、positional argumentであることを教えてやれば良いのです。
ご存知の方も多いように、--はUNIX標準の引数表現であり、それを利用すれば解決できます。

参考文献

https://stackoverflow.com/questions/71939532/npm-run-dev-host-network-not-exposed
https://zenn.dev/feb19/articles/bf403840fc57e8
https://megu-tech.hatenablog.com/entry/2019/10/09/121432
https://ja.vitejs.dev/config/server-options
https://suzu-mono-gram.com/blog/local-server-access-iphone/