サーバーオプション

特に記載がない限り、このセクションのオプションは開発時のみ適用されます。

server.host

型: string | boolean
デフォルト: 'localhost'

サーバーがリッスンする IP アドレスを指定します。LAN やパブリックアドレスを含むすべてのアドレスでリッスンするには、これを 0.0.0.0 または true に設定します。

これは、CLI で --host 0.0.0.0 または --host を使用して設定できます。

注意

Vite の代わりに他のサーバーが応答する可能性がある場合があります。

1 つ目のケースは、localhost が使用されている場合です。v17 未満の Node.js では、デフォルトで DNS で解決されたアドレスの結果が並べ替えられます。localhost にアクセスすると、ブラウザは DNS を使用してアドレスを解決しますが、そのアドレスは Vite がリッスンしているアドレスとは異なる場合があります。Vite は、異なる場合に解決されたアドレスを出力します。

dns.setDefaultResultOrder('verbatim')を設定して、並べ替え動作を無効にすることができます。そうすると、Vite はアドレスを localhost として出力します。

vite.config.js

import { defineConfig
 } from 'vite'
import dns
 from 'node:dns'

dns
.setDefaultResultOrder
('verbatim')

export default defineConfig
({
  // omit
})

2 つ目のケースは、ワイルドカードホスト (例: 0.0.0.0) が使用されている場合です。これは、ワイルドカードホストでリッスンしているサーバーよりも、非ワイルドカードホストでリッスンしているサーバーが優先されるためです。

LAN から WSL2 上のサーバーにアクセスする

WSL2 で Vite を実行する場合、LAN からサーバーにアクセスするために host: true を設定するだけでは十分ではありません。詳細については、WSL ドキュメントを参照してください。

server.port

型: number
デフォルト: 5173

サーバーポートを指定します。ポートがすでに使用されている場合、Vite は自動的に次の利用可能なポートを試すため、これがサーバーが最終的にリッスンする実際のポートではない可能性があることに注意してください。

server.strictPort

型: boolean

ポートがすでに使用されている場合に、自動的に次の利用可能なポートを試すのではなく、終了するには true に設定します。

server.https

型: https.ServerOptions

TLS + HTTP/2 を有効にします。なお、これはserver.proxy オプションも使用されている場合にのみ TLS にダウングレードします。

値は、https.createServer() に渡されるオプションオブジェクトにすることもできます。

有効な証明書が必要です。基本的な設定では、@vitejs/plugin-basic-sslをプロジェクトプラグインに追加すると、自己署名証明書が自動的に作成およびキャッシュされます。ただし、独自の証明書を作成することをお勧めします。

server.open

型: boolean | string

サーバーの起動時にブラウザでアプリを自動的に開きます。値が文字列の場合、URL のパス名として使用されます。特定のブラウザでサーバーを開きたい場合は、環境変数 process.env.BROWSER (例: firefox) を設定できます。process.env.BROWSER_ARGS を設定して、追加の引数 (例: --incognito) を渡すこともできます。

BROWSER と BROWSER_ARGS は、.env ファイルで設定できる特別な環境変数でもあります。詳細については、open パッケージを参照してください。

例

export default defineConfig({
  server: {
    open: '/docs/index.html',
  },
})

server.proxy

型: Record<string, string | ProxyOptions>

開発サーバーのカスタムプロキシルールを設定します。{ key: options } のペアのオブジェクトが必要です。リクエストパスがそのキーで始まるリクエストは、指定されたターゲットにプロキシされます。キーが ^ で始まる場合は、RegExp として解釈されます。プロキシインスタンスにアクセスするために configure オプションを使用できます。リクエストが構成されたプロキシルールのいずれかに一致する場合、そのリクエストは Vite によって変換されません。

非相対baseを使用している場合は、各キーにその base をプレフィックスとして付ける必要があることに注意してください。

http-proxyを拡張します。追加のオプションはこちらです。

場合によっては、基盤となる開発サーバーを構成する必要がある場合があります (例: 内部のconnectアプリにカスタムミドルウェアを追加するなど)。そのためには、独自のプラグインを作成し、configureServer関数を使用する必要があります。

例

export default defineConfig({
  server: {
    proxy: {
      // string shorthand:
      // http://localhost:5173/foo
      //   -> http://localhost:4567/foo
      '/foo': 'http://localhost:4567',
      // with options:
      // http://localhost:5173/api/bar
      //   -> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      // with RegExp:
      // http://localhost:5173/fallback/
      //   -> http://jsonplaceholder.typicode.com/
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, ''),
      },
      // Using the proxy instance
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy will be an instance of 'http-proxy'
        },
      },
      // Proxying websockets or socket.io:
      // ws://localhost:5173/socket.io
      //   -> ws://localhost:5174/socket.io
      // Exercise caution using `rewriteWsOrigin` as it can leave the
      // proxying open to CSRF attacks.
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true,
        rewriteWsOrigin: true,
      },
    },
  },
})

server.cors

型: boolean | CorsOptions

開発サーバーの CORS を構成します。これはデフォルトで有効になっており、すべてのオリジンを許可します。オプションオブジェクトを渡して動作を微調整するか、false にして無効にします。

server.headers

型: OutgoingHttpHeaders

サーバーのレスポンスヘッダーを指定します。

server.hmr

型: boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }

HMR 接続を無効にするか構成します (HMR websocket が http サーバーとは異なるアドレスを使用する必要がある場合)。

サーバーエラーオーバーレイを無効にするには、server.hmr.overlay を false に設定します。

protocol は、HMR 接続に使用される WebSocket プロトコルを設定します: ws (WebSocket) または wss (WebSocket Secure)。

clientPort は、クライアント側でのみポートを上書きする高度なオプションであり、クライアントコードが探しているポートとは異なるポートで websocket を提供できます。

server.hmr.server が定義されている場合、Vite は提供されたサーバーを介して HMR 接続要求を処理します。ミドルウェアモードでない場合、Vite は既存のサーバーを介して HMR 接続要求を処理しようとします。これは、自己署名証明書を使用する場合や、Vite を単一のポートでネットワーク上に公開したい場合に役立ちます。

vite-setup-catalogueでいくつかの例を確認してください。

注意

デフォルトの構成では、Vite の前にあるリバースプロキシは WebSocket のプロキシをサポートすることが期待されます。Vite HMR クライアントが WebSocket に接続できない場合、クライアントはリバースプロキシをバイパスして Vite HMR サーバーに直接 WebSocket を接続します。

Direct websocket connection fallback. Check out https://vite.dokyumento.jp/config/server-options.html#server-hmr to remove the previous connection error.

フォールバックが発生したときにブラウザに表示されるエラーは無視できます。リバースプロキシを直接バイパスしてエラーを回避するには、次のいずれかの方法を試してください。

リバースプロキシが WebSocket もプロキシするように構成する
server.strictPort = true を設定し、server.hmr.clientPort を server.port と同じ値に設定する
server.portとは異なる値に server.hmr.port を設定する

server.warmup

型: { clientFiles?: string[], ssrFiles?: string[] }
関連: 頻繁に使用されるファイルのウォームアップ

ファイルをウォームアップして、結果を事前に変換およびキャッシュします。これにより、サーバー起動時の最初のページ読み込みが改善され、変換ウォーターフォールが防止されます。

clientFiles はクライアントでのみ使用されるファイルであり、ssrFiles は SSR でのみ使用されるファイルです。これらは、ファイルパスまたは root を基準としたtinyglobby パターンの配列を受け入れます。

起動時に Vite 開発サーバーに過負荷をかけないように、頻繁に使用されるファイルのみを追加するようにしてください。

export default defineConfig({
  server: {
    warmup: {
      clientFiles: ['./src/components/*.vue', './src/utils/big-utils.js'],
      ssrFiles: ['./src/server/modules/*.js'],
    },
  },
})

server.watch

型: object | null

chokidarに渡すファイルシステムウォッチャーオプション。

Vite サーバーウォッチャーは root を監視し、デフォルトで .git/、node_modules/、および Vite の cacheDir および build.outDir ディレクトリをスキップします。監視対象のファイルを更新すると、Vite は HMR を適用し、必要に応じてのみページを更新します。

nullに設定した場合、ファイルは監視されません。server.watcherは互換性のあるイベントエミッターを提供しますが、addまたはunwatchを呼び出しても効果はありません。

node_modules内のファイルの監視

現在、node_modules内のファイルやパッケージを監視することはできません。今後の進捗や回避策については、issue #8619を参照してください。

Windows Subsystem for Linux (WSL) 2 で Vite を使用する

WSL2でViteを実行している場合、Windowsアプリケーション（非WSL2プロセス）によってファイルが編集された場合、ファイルシステムの監視は機能しません。これは、WSL2の制限事項によるものです。これは、WSL2バックエンドでDockerで実行する場合にも適用されます。

これを修正するには、次のいずれかを実行できます。

推奨：WSL2アプリケーションを使用してファイルを編集します。
- また、プロジェクトフォルダをWindowsファイルシステムの外部に移動することをお勧めします。WSL2からWindowsファイルシステムにアクセスすると速度が低下します。そのオーバーヘッドを取り除くことで、パフォーマンスが向上します。
{ usePolling: true } を設定します。
- usePollingはCPU使用率が高くなることに注意してください。

server.middlewareMode

型: boolean
デフォルト: false

ミドルウェアモードでViteサーバーを作成します。

関連: appType、SSR - 開発サーバーのセットアップ
例

import express
 from 'express'
import { createServer
 as createViteServer
 } from 'vite'

async function createServer
() {
  const app
 = express
()

  // Create Vite server in middleware mode
  const vite
 = await createViteServer
({
    server
: { middlewareMode
: true },
    // don't include Vite's default HTML handling middlewares
    appType
: 'custom',
  })
  // Use vite's connect instance as middleware
  app
.use
(vite
.middlewares
)

  app
.use
('*', async (req
, res
) => {
    // Since `appType` is `'custom'`, should serve response here.
    // Note: if `appType` is `'spa'` or `'mpa'`, Vite includes middlewares
    // to handle HTML requests and 404s so user middlewares should be added
    // before Vite's middlewares to take effect instead
  })
}

createServer
()

server.fs.strict

型: boolean
デフォルト: true (Vite 2.7 以降デフォルトで有効)

ワークスペースルートの外にあるファイルの提供を制限します。

server.fs.allow

型: string[]

/@fs/ 経由で提供できるファイルを制限します。server.fs.strict が true に設定されている場合、許可されたファイルからインポートされていないこのディレクトリリスト外のファイルにアクセスすると、403 エラーが発生します。

ディレクトリとファイルの両方を指定できます。

Viteは潜在的なワークスペースのルートを検索し、それをデフォルトとして使用します。有効なワークスペースは以下の条件を満たします。それ以外の場合は、プロジェクトルートに戻ります。

package.json に workspaces フィールドが含まれている
次のいずれかのファイルが含まれている
- lerna.json
- pnpm-workspace.yaml

カスタムワークスペースルートを指定するパスを受け入れます。絶対パスまたはプロジェクトルートからの相対パスを指定できます。例：

export default defineConfig({
  server: {
    fs: {
      // Allow serving files from one level up to the project root
      allow: ['..'],
    },
  },
})

server.fs.allow を指定すると、ワークスペースルートの自動検出が無効になります。元の動作を拡張するために、ユーティリティ searchForWorkspaceRoot が公開されています。

import { defineConfig, searchForWorkspaceRoot } from 'vite'

export default defineConfig({
  server: {
    fs: {
      allow: [
        // search up for workspace root
        searchForWorkspaceRoot(process.cwd()),
        // your custom rules
        '/path/to/custom/allow_directory',
        '/path/to/custom/allow_file.demo',
      ],
    },
  },
})

server.fs.deny

型: string[]
デフォルト: ['.env', '.env.*', '*.{crt,pem}', '**/.git/**']

Vite開発サーバーによって提供されることを制限される機密ファイルのブロックリスト。これは、server.fs.allowよりも高い優先度を持ちます。picomatchパターンがサポートされています。

server.origin

型: string

開発中に生成されたアセットURLのオリジンを定義します。

export default defineConfig({
  server: {
    origin: 'http://127.0.0.1:8080',
  },
})

server.sourcemapIgnoreList

型: false | (sourcePath: string, sourcemapPath: string) => boolean
デフォルト: (sourcePath) => sourcePath.includes('node_modules')

x_google_ignoreListソースマップ拡張機能を設定するために使用される、サーバーのソースマップでソースファイルを無視するかどうか。

server.sourcemapIgnoreList は、開発サーバーの build.rollupOptions.output.sourcemapIgnoreList と同等です。2つの設定オプションの違いは、rollup関数がsourcePathの相対パスで呼び出されるのに対し、server.sourcemapIgnoreListは絶対パスで呼び出されることです。開発中、ほとんどのモジュールはマップとソースが同じフォルダにあるため、sourcePathの相対パスはファイル名自体です。これらの場合、絶対パスの方が代わりに便利に使用できます。

デフォルトでは、node_modulesを含むすべてのパスを除外します。この動作を無効にするには false を渡すか、完全な制御のために、ソースパスとソースマップパスを受け取り、ソースパスを無視するかどうかを返す関数を渡すことができます。

export default defineConfig({
  server: {
    // This is the default value, and will add all files with node_modules
    // in their paths to the ignore list.
    sourcemapIgnoreList(sourcePath, sourcemapPath) {
      return sourcePath.includes('node_modules')
    },
  },
})

注意

server.sourcemapIgnoreList と build.rollupOptions.output.sourcemapIgnoreList は個別に設定する必要があります。server.sourcemapIgnoreList はサーバーのみの設定であり、定義されたrollupオプションからデフォルト値を取得しません。

サーバーオプション ​

server.host ​

server.port ​

server.strictPort ​

server.https ​

server.open ​

server.proxy ​

server.cors ​

server.headers ​

server.hmr ​

server.warmup ​

server.watch ​

server.middlewareMode ​

server.fs.strict ​

server.fs.allow ​

server.fs.deny ​

server.origin ​

server.sourcemapIgnoreList ​