Руководства по фреймворкамReact (Vite)

Развертывание React с Vite на Lizard

Lizard собирает React-приложение, использующее Vite, и раздаёт его каталог dist/ через nginx на порту 80. Это руководство охватывает браузерное рендеринг-приложение. Для React-страниц, требующих сервер, следуйте руководству по Next.js или предоставьте продакшн-сервер для выбранного React-фреймворка.

Подготовка сборки

Используйте существующий проект React и Vite с зафиксированным lockfile. В его package.json нужен скрипт продакшн-сборки:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Если ваш шаблон запускает проверки TypeScript перед vite build, сохраните эти проверки. Оставьте директорию вывода dist по умолчанию у Vite. Пользовательская build.outDir требует соответствующий Dockerfile, так как стандартный путь обнаружения копирует dist.

ПараметрЗначение
Обнаружениеvite в dependencies или dev dependencies
Сборкаnpm run build
Выводdist/
Продакшн-серверnginx; скрипт запуска Node не нужен
Порт сервиса80

Локальное тестирование

npm ci
npm run build
npm run preview

Откройте локальный URL превью и протестируйте страницу, обращающуюся к вашему API. Команда превью проверяет сборку локально; не устанавливайте vite preview в качестве продакшн-команды запуска. См. развертывание Vite.

Развертывание исходного кода

После настройки CLI выполните из директории, содержащей package.json:

lizard init --name react-app
lizard add --service web
lizard up --service web --port 80
lizard logs --build --service web --json
lizard ps --json

Загрузите исходный код и lockfile, исключая node_modules/, dist/ и секреты. Оставьте переопределения сборки/запуска сервиса неустановленными, чтобы использовать путь статического обнаружения. Контейнер nginx слушает порт 80, хотя серверы разработки и превью используют другие порты.

Подключение API

Используйте публичную переменную, например VITE_API_URL, для HTTPS-адреса API, доступного из браузера. Читайте её как import.meta.env.VITE_API_URL. Настройте это значение через переменные и секреты и пересобирайте при изменении. Никогда не раскрывайте URL базы данных, учётные данные API или адрес внутреннего сервиса через переменную VITE_*.

Для API на другом источнике настройте его разрешенные источники (allowed origins), чтобы включить URL фронтенда. Приватное имя хоста сервиса, работающее между бэкенд-сервисами, не разрешится в браузере посетителя.

Проверка маршрутизации

Откройте живое приложение, перейдите по клиентскому маршруту, затем перезагрузите этот URL напрямую. Стандартный статический сервер делает фоллбэк на index.html, чтобы клиентский роутер мог отрендерить внутренний маршрут. Добавьте маршрут для неизвестных путей и в самом React-приложении. Этот фоллбэк всё равно возвращает HTTP 200; используйте статические маршруты и 404, чтобы выбрать серверную политику для страниц, которым нужны настоящие ответы HTTP 404.

Если ассет возвращает HTML или страница остаётся пустой, проверьте base Vite, запрошенный URL ассета и директорию вывода. Если приложение никогда не становится здоровым (healthy), убедитесь, что порт сервиса — 80, и что старое переопределение команды запуска не выбрало другой путь сборки.

Для страниц, предназначенных для поиска, проверьте исходный HTML-ответ. Браузерная оболочка может не содержать текст, который вы ожидаете увидеть у поисковика или answer-движка. Выбирайте prerendering или серверный фреймворк, когда этот текст нужен в ответе.

См. проверенные версии и результаты в облаке для проверок развертывания от 9 сентября 2026 года и их ограничений.

Статический экспортVue (Vite)