ポート番号変更シリーズ Vite開発サーバー編

開発環境の構築にDockerや開発サーバーは欠かせませんが、言語やツールに合わせていくつも追加していくと、ポート番号が重なってしまい、起動に失敗することとなります。

そこで、ここではポート番号の変更方法を記載していきます。

今回はVite 開発サーバーのポート番号変更方法です。

Viteについて

クリックするとViteについての説明を開きます

Viteは「フロントエンドビルドツール」です。

フロントエンドといえば、ブラウザ上で動作するWebアプリケーションのことを差し、基本的な構造を記載するHTML、デザインを定義するCSS、動的な動きを定義するjavascriptから構成されます。

最近ではCSSやjavascriptを直接書くことは少なく、まずSASSやTypeScriptを作成し、それをコンパイルし、さらにビルドしてCSSファイルやjavascriptを作成することが多いです。

また、作成したWebアプリケーションの動作を確認するには、そのアプリケーションが動作する開発サーバーが必要となります。このような、ビルド環境・開発サーバーを提供するツールの一つがViteとなります。

ViteはVueの開発者であるEvan Yu氏によって開発されました。VueはもちろんReactのビルドにも対応しており、同種のビルドツールの中でも人気の高いツールとなっています。現在ではPHPのフレームワークであるLaravelにも、フロントエンドの開発ツールとして組み込まれています。

Vite 開発サーバーの、デフォルトのポート番号は5173です。つまり、

npm run dev

などとして開発サーバーを起動した場合、開発サーバーへは localhost:5173 でアクセスします。

LaravelにViteが組み込まれている関係で、Laravel Sail で起動するWebサーバー用コンテナはポート番号80と5173でアクセスを受け付けるようになっています。なので、Laravel Sailと同時に、他のVite開発サーバーを起動する際には注意が必要です。

具体的には、5173以外のポート番号でアクセスを受け付けたり、起動に失敗したりします。どちらの動作となるかは後述する設定によります。

プロジェクトルート直下の「vite.config.ts」ファイル(TypeScriptを使用していない場合は「vite.config.js」ファイル)に、以下の設定を追記します。

export default defineConfig({
  // 省略
  server: {
    port: 5273,  // ポート番号5273で受け付ける場合
  },
  // 省略
})

なお、server.portに指定した番号のポートが既に使用されている場合には、他のポート番号を自動で探して使用します。

この動作を避けるには、server.strictPortを設定します。

export default defineConfig({
  server: {
    port: 5273,       // ポート番号5273で受け付ける場合
    strictPort: true, // 上記ポートが使用されている場合には、開発サーバーを起動しない
  },
})

server.portに指定した番号のポートが既に使用されている場合には、エラーを出して起動を停止します。

以下はnpmを使用する例です。package.jsonファイルのscriptで、以下のように設定します。

{
  "scripts": {
    "dev": "vite --port=5273 --strictPort=true",
  }.
}

その後、以下のコマンドで開発サーバーを起動します。

npm run dev

設定ファイルでserver.portとserver.strivtPortを設定したときと同様、portオプションで指定したポートでアクセスを受け付けますが、既に使用されている場合には起動せずに停止します。