<span id="deploy-react-with-vite-on-lizard" />

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

Lizard собирает React-приложение, использующее Vite, и раздаёт его каталог `dist/` через nginx на порту `80`. Это руководство охватывает браузерное рендеринг-приложение. Для React-страниц, требующих сервер, следуйте [руководству по Next.js](https://lizard.build/ru/docs/framework-guides/nextjs) или предоставьте продакшн-сервер для выбранного React-фреймворка.

<span id="prepare-the-build" />

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

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

```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` |

<span id="test-locally" />

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

```bash
npm ci
npm run build
npm run preview
```

Откройте локальный URL превью и протестируйте страницу, обращающуюся к вашему API. Команда превью проверяет сборку локально; не устанавливайте `vite preview` в качестве продакшн-команды запуска. См. [развертывание Vite](https://vite.dev/guide/static-deploy.html).

<span id="deploy-the-source" />

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

После [настройки CLI](https://lizard.build/ru/docs/framework-guides#prepare-the-project) выполните из директории, содержащей `package.json`:

```bash
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, хотя серверы разработки и превью используют другие порты.

<span id="connect-an-api" />

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

Используйте публичную переменную, например `VITE_API_URL`, для HTTPS-адреса API, доступного из браузера. Читайте её как `import.meta.env.VITE_API_URL`. Настройте это значение через [переменные и секреты](https://lizard.build/ru/docs/variables) и пересобирайте при изменении. Никогда не раскрывайте URL базы данных, учётные данные API или адрес внутреннего сервиса через переменную `VITE_*`.

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

<span id="verify-routing" />

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

Откройте живое приложение, перейдите по клиентскому маршруту, затем перезагрузите этот URL напрямую. Стандартный статический сервер делает фоллбэк на `index.html`, чтобы клиентский роутер мог отрендерить внутренний маршрут. Добавьте маршрут для неизвестных путей и в самом React-приложении. Этот фоллбэк всё равно возвращает HTTP 200; используйте [статические маршруты и 404](https://lizard.build/ru/docs/framework-guides/static-routing), чтобы выбрать серверную политику для страниц, которым нужны настоящие ответы HTTP 404.

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

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

См. [проверенные версии и результаты в облаке](https://lizard.build/ru/docs/framework-guides/validation) для проверок развертывания от 9 сентября 2026 года и их ограничений.