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を表示できます。
