Vite開発サーバーのポート設定

Viteアプリケーションの開発サーバーはデフォルトでポート3000を使用しますが、異なるポートでアプリケーションを実行する必要がある場合がよくあります。この記事では、Vite開発サーバーのポートを変更するさまざまな方法について解説します。

コマンドライン引数による設定

最も簡単な方法は、開発サーバーを起動する際にコマンドライン引数でポートを指定することです。

npm run dev -- --port 3006

または package.json のスクリプトを直接変更することも可能です：

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

TIP

この方法はシンプルで直感的ですが、環境ごとに異なるポートを使用したい場合やチーム全体で設定を共有したい場合には不向きです。

Vite設定ファイルでの設定

より永続的で柔軟な方法として、vite.config.ts（または vite.config.js）でポートを設定できます。

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3006,  // 開発サーバーのポート
    strictPort: true, // ポートが使用中の場合にエラーを発生させる
  },
  preview: {
    port: 3001,  // プレビューサーバーのポート
    strictPort: true,
  }
})

開発サーバーとプレビューサーバーの違い

• server: npm run dev で起動する開発サーバーの設定
• preview: npm run preview で起動する本番ビルドのプレビューサーバーの設定

環境変数を使用した動的設定

環境ごとに異なるポートを使用したい場合、環境変数を活用する方法が推奨されます。

まず、.env ファイルを作成します：

VITE_PORT=3006

次に、Vite設定ファイルで環境変数を読み込みます：

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  // 環境変数の読み込み
  const env = loadEnv(mode, process.cwd(), 'VITE_')
  const port = Number(env.VITE_PORT) || 3000
  
  return {
    server: {
      port: port,
      strictPort: true,
    },
    preview: {
      port: port + 1, // プレビューは開発ポート+1
      strictPort: true,
    }
  }
})

注意点

環境変数は常に文字列として読み込まれるため、Number() で数値に変換する必要があります。

設定方法の比較

方法	利点	欠点	ユースケース
コマンドライン	簡単、即時適用	一時的、チーム共有が難しい	一時的なポート変更
設定ファイル	永続的、プロジェクト全体で共有	環境ごとの差異に対応不可	基本的な設定
環境変数	環境ごとの設定が可能、柔軟性が高い	設定が複雑	本番/開発環境での異なる設定

よくある問題と解決策

ポートが既に使用されている場合

strictPort: true を設定すると、ポートが使用中の場合にエラーが発生します。false に設定すると、Viteは自動的に次の利用可能なポートを探します。

server: {
  port: 3006,
  strictPort: false, // ポートが使用中の場合、自動で別のポートを探す
}

ホスト設定

localhost以外からアクセスする必要がある場合は、host設定も変更します：

server: {
  port: 3006,
  host: true, // すべてのネットワークインターフェースでリスン
  // または
  host: '0.0.0.0' // 明示的に指定
}

まとめ

Vite開発サーバーのポート設定は、以下のいずれかの方法で行えます：

1. コマンドライン引数 - 一時的な変更に便利
2. 設定ファイル - プロジェクト全体の標準設定に適している
3. 環境変数 - 環境ごとの設定差分管理に最適

プロジェクトの規模やチームのワークフローに合わせて最適な方法を選択してください。一般的には、設定ファイルでの基本設定と環境変数による柔軟なオーバーライドを組み合わせる方法が推奨されます。