Viteでnpm run dev実行後にdevやstgなどのURLを表示する方法

npm run dev実行後の表示について

Viteで「npm run dev」を実行するとローカル開発サーバーが起動し、下図のような表示になります。

Webサイトを作成する際、ローカル開発サーバーの作業だけでは完結せず、以下のような他のサーバー環境も必要となります。

※ 会社によっては本番サーバーしかない場合もあります

開発サーバー
テストサーバー
ステージングサーバー
本番サーバー

それぞれのサーバーのURLは以下のように本番のURLにサブドメインを付けて以下のようになっていることが多いです。

※ サブドメインの名前などは会社によって異なる

https://dev.example.com/
https://test.example.com/
https://stg.example.com/
https://example.com/

「npm run dev」を実行するとlocalhostのURLしか表示されませんが、前述のdev (開発環境)などのURLも表示されると便利です。

開発環境などのURLを表示させる方法

Viteで「npm run dev」を実行するにはvite.config.jsのpluginsにconsole.logでテキストを表示する処理を追加します。

表示させるテキストは色付けして見やすくするため、chalkを事前にインストールしてください。

npm i -D chalk

vite.config.jsファイルをプロジェクトフォルダのルートディレクトリに作成したら、以下のコードを書いて保存します。

import chalk from 'chalk'

export default {
  plugins: [
    {
      name: 'show-server-url',
      apply: 'serve',
      configureServer() {
        let isFirstRequest = true
        if (isFirstRequest) {
          setTimeout(() => {
            console.log(
              `${chalk.bold.greenBright('  ➜')}  ${chalk.bold(
                'Development:'
              )} ${chalk.bold.cyan('https://dev.example.com/')}
${chalk.bold.greenBright('  ➜')}  ${chalk.bold('Testing:')} ${chalk.bold.cyan(
                'https://test.example.com/'
              )}
${chalk.bold.greenBright('  ➜')}  ${chalk.bold('Staging:')} ${chalk.bold.cyan(
                'https://stg.example.com/'
              )}
${chalk.bold.greenBright('  ➜')}  ${chalk.bold(
                'Production:'
              )} ${chalk.bold.cyan('https://example.com/')}
`
            )
          }, 100)
          isFirstRequest = false
        }
      },
    },
  ],
}

configureServerという開発サーバを設定するためのフックで「npm run dev」を実行後にconsole.logの内容を表示します。

この処理は1回だけ表示させたいので、「let isFirstRequest = true」というフラグの変数を作成しています。

テンプレートリテラルを使用しているので、インデントなどがゴチャゴチャしていますが、この状態で保存して「npm run dev」を実行すれば、下図のように追加したURLを表示できます。