8. Dev-сервер и HMR

Dev сервер Vite — это не просто HTTP сервер. Это полноценная среда разработки с мгновенным Hot Module Replacement, встроенным прокси для API запросов, поддержкой HTTPS и WebSocket.

Основные опции сервера

vite.config.ts

export default defineConfig({
  server: {
    host: '0.0.0.0',   // Слушать все интерфейсы (не только localhost)
    port: 3000,         // Порт (по умолчанию 5173)
    strictPort: true,   // Падать, если порт занят (не искать другой)
    open: true,         // Открывать браузер при запуске
    open: '/dashboard', // Или открывать конкретный URL

    // HTTPS
    https: true,        // Самоподписанный сертификат
    https: {
      key: './certs/key.pem',
      cert: './certs/cert.pem',
    },
  },
})

Proxy — Проксирование API запросов

Это одна из самых важных функций для разработки. Позволяет избежать CORS ошибок при работе с backend:

server: {
  proxy: {
    // Строковое правило — простое проксирование
    '/api': 'http://localhost:8080',
    // GET /api/users → http://localhost:8080/api/users

    // Объектное правило — с опциями
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,  // Меняет заголовок Host
      rewrite: (path) => path.replace(/^\/api/, ''),
      // /api/users → http://localhost:8080/users
    },

    // WebSocket проксирование
    '/ws': {
      target: 'ws://localhost:8080',
      ws: true,
    },

    // Regex правило
    '^/fallback/.*': {
      target: 'https://external-api.com',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/fallback/, ''),
    },
  },
}

HMR (Hot Module Replacement)

HMR — это механизм замены модулей без перезагрузки страницы:

// Кастомная HMR конфигурация
server: {
  hmr: {
    port: 8080,         // WebSocket порт для HMR (если отличается от server.port)
    host: 'localhost',  // HMR WebSocket host
    overlay: false,     // Отключить overlay с ошибками
    clientPort: 443,    // Порт для клиента (например за nginx)
  },
}

// Программный HMR API в модулях
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // Обработать обновление модуля
  })

  import.meta.hot.dispose((data) => {
    // Cleanup перед заменой модуля
    clearInterval(data.timer)
  })

  import.meta.hot.data.timer = setInterval(...)
}

CORS настройки

server: {
  cors: true,          // Разрешить все origins (для dev)

  // Или с деталями:
  cors: {
    origin: ['http://localhost:3001', 'https://myapp.com'],
    methods: ['GET', 'POST'],
    credentials: true,
  },
}

Headers

server: {
  headers: {
    'Cross-Origin-Embedder-Policy': 'require-corp',
    'Cross-Origin-Opener-Policy': 'same-origin',
    // Нужно для SharedArrayBuffer (WebAssembly, workers)
  },
}

Preview сервер (для production сборки)

// vite.config.ts — настройки preview сервера
preview: {
  port: 8080,
  strictPort: true,
  host: true,
}

// CLI: запуск production preview
// npm run build && vite preview

Полный пример конфига сервера

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig(({ command }) => ({
  plugins: [react()],
  server: {
    port: 3000,
    host: true,
    open: true,
    proxy: {
      '/api': {
        target: process.env.VITE_API_TARGET || 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
    hmr: {
      overlay: true,
    },
  },
}))

Ниже — интерактивный конфигуратор dev сервера: включай параметры и получай готовый конфиг с объяснениями: