Zenn
🐈

Viteで起動したローカル開発サーバーにIPアドレスで外部からアクセスする方法【Vue3/Typescript編】

2023/01/27に公開
TypeScript
Vue.js
Vue 3
#
開発
Vite
tech

はじめに

Vue.js開発において、Viteは非常に便利な開発サーバーとなります。

Vue.jsのコードを書いてViteを使用することで、簡単にローカル開発サーバーを立ち上げることができ、即座にブラウザで確認することができます。

しかし、Viteを使用したローカル開発サーバーはデフォルトではlocalhost(127.0.0.1)にしかアクセスできないため、他のPCからアクセスすることができません。

この記事では、Viteを使用したローカル開発サーバーに対してIPアドレスでアクセスする方法について説明します。

Network部分にIPアドレスが表示されない

以前は「npm run dev」あるいは「yarn dev」を実施した際に、以下のように結果が表示され、IPアドレスを使ってNetwork経由でアクセスすることが出来ていました。

VITE v2.1.0  ready in 1426 ms

➜  Local:   http://localhost:8080/
➜  Network: http://192.168.0.100:8080/

新しいバージョン(Version2.2より最新)のViteで「npm run dev」あるいは「yarn dev」を実施した場合は、以下のように表示され、Network経由のアクセスは出来ないようになっています。

  VITE v3.2.5  ready in 1525 ms

  ➜  Local:   http://127.0.0.1:8080/
  ➜  Network: use --host to expose

ViteのGithubのディスカッションを確認すると以下のように記載されています。

The default host now listens to 127.0.0.1 so you only get localhost exposure. It was changed because it is a security concern to expose your file system to external addresses by default.

[翻訳]localhostでしか公開されないように、ホストのデフォルトでは127.0.0.1のみをリッスンするようになりました。
デフォルトでファイルシステムを外部のアドレスに公開することは、セキュリティ上の問題があるため変更されました。

セキュリティ上に問題があるとのことで、デフォルトでは外部アドレスでの公開はされなくなったとのことです。

Vite開発サーバーをIPアドレスで公開する方法

以前のバージョンと同様にNetwork経由で開発サーバーにアクセス出来るようにする方法は以下の２つあります。

  • package.jsonの変更
  • vite.config.tsの変更

上記いずれの方法でもIPアドレスでアクセスすることが可能となります。
具体的に２つの方法を説明します。

package.jsonの変更

プロジェクト内に配置しているpackage.jsonの「scripts - dev」の「vite」に「--host」を追加し、「vite --host」に変更してください。

変更前
{
	"name": "test",
	"private": true,
	"version": "0.0.0",
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"preview": "vite preview"
	},
	・・・
}
変更後
{
	"name": "test",
	"private": true,
	"version": "0.0.0",
	"scripts": {
		"dev": "vite --host",
		"build": "vite build",
		"preview": "vite preview"
	},
	・・・
}

ファイルを変更し保存後に「npm run dev」あるいは「yarn dev」を実行することで、Network部分にIPアドレスが表示され、アクセスすることが可能となります。

もし、別のポート番号を使用したい場合は、--port オプションを使用することでポート番号を指定することも可能です。

"dev": "vite --host --port 8080",

vite.config.tsの変更

プロジェクト内に配置しているvite.config.tsの「defineConfig」内に「server - host: true」を追加してください。

変更前
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ]
})
変更後
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: true,
  },
  plugins: [
    vue(),
  ]
})

ファイルを変更し保存後に「npm run dev」あるいは「yarn dev」を実行することで、Network部分にIPアドレスが表示され、アクセスすることが可能となります。

注意点

  • Viteを使用してIPアドレスでアクセス出来るようにしたが、他人からのアクセスを許可したくない場合は、制限をかけるなどの対策を取ってください。
  • 「--host xxx.xxx.xxx.xxx」でIPアドレスを指定する場合は、自分が属しているネットワークで到達可能なIPアドレスである必要があります。
  • Viteを使用する場合は開発サーバーとしてのみ利用することが推奨されています。

まとめ

Viteを使用する際に「--host」オプションを使用することで、ローカルサーバーにアクセスするためにIPアドレスを利用することができます。

本記事では、Viteの設定方法や注意点について説明しました。
Viteを使用する際の参考にしてください。

Discussion