Viteでローカル以外からアクセスできるコマンドを作成

やりたいこと

Viteで作成したプロジェクトで以下コマンドを実行して、Severを起動するとローカルPCからはブラウザなどからアクセスできます。

npm run dev

出力：

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

しかし他のPCからはアクセスすることはできません。

この記事ではローカルでの試験向けのnpm run devコマンドを保持しつつ、他のPCからもアクセスできる方法を用意する手順を紹介します。

まずは他PCからのアクセスを許可を試します。

Viteで作成したプロジェクトのルートにあるpackage.jsonを開き以下の記載を探します。

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

ここを以下のように修正します。

devの行に –host –port 5173を追加しています。Portあとの数字は作成されるサーバのPort番号です。他のPCからアクセスする際に変動すると面倒くさいので指定することを推奨です。

  "scripts": {
    "dev": "vite --host --port 5173",
    "build": "vite build",
    "preview": "vite preview"
  },

修正が完了したら、以下のコマンドを実行します。

npm run dev

今回は修正前と異なり、Networkにもアドレスが表示され、他PCからもアクセスできるようになりました。（X.X.X.Xにしていますが、実際にはIPが表示されます。）

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://X.X.X.X:5173/
  ➜  press h + enter to show help

上記の方法でほかのPCからもアクセスできるようになりましたが、多くの場合まずはローカルで試験を行いネットワーク試験になると思います。

試験方法を変えるたびにpackage.jsonを編集すると面倒くさい（し間違えそう）なので別のコマンドを用意します。

package.jsonを以下のように修正します。

devnetの行を追加しています。

修正前：

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

修正後：

  "scripts": {
    "dev": "vite",
    "devnet": "vite --host --port 5173",
    "build": "vite build",
    "preview": "vite preview"
  },

修正後に以下のコマンドを実行すると他のPCからのアクセスができません。

npm run dev

出力：

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

以下のコマンドを実行すると他のPCからのアクセスができます。

npm run devnet

出力：

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://X.X.X.X:5173/
  ➜  press h + enter to show help

ローカルでの試験向けのnpm run devコマンドを保持しつつ、他のPCからもアクセスできる方法を用意することができました。