Фреймворки

ONREZA автоматически определяет фреймворк вашего проекта и настраивает оптимальные параметры сборки.

Сравнение возможностей

Фреймворк	Рантайм	SSR	SSG	ISR	Middleware	Image Opt
Next.js	COMPUTE	✅	✅	✅	✅	✅
Astro	COMPUTE	✅	✅	✅	✅	✅
Nuxt 3	COMPUTE	✅	✅	✅	✅	—
Remix	COMPUTE	✅	—	—	✅	—
Analog	COMPUTE	✅	✅	✅	✅	—
SvelteKit	STATIC / COMPUTE	✅	✅	—	✅	—
Vite SPA	STATIC	—	✅	—	✅	✅
Angular	STATIC	—	✅	—	✅	—
Astro (static)	STATIC	—	✅	—	✅	✅

Рантайм:

• COMPUTE — полный серверный процесс (Bun / Node.js). Файловая система, WebSocket, native modules.
• ONREZA Functions — короткие HTTP handlers и route pipeline steps с явным ctx.
• STATIC — CDN-раздача. Бесплатно, мгновенно, без серверных ресурсов.

ISR — Incremental Static Regeneration: страницы кэшируются и обновляются в фоне по TTL (revalidate).

Middleware / route pipeline — задаётся в Edge Rules, а динамические шаги выполняются ONREZA Functions. Подходит для auth, redirects, geo-routing и A/B тестов.

Автодетект

При создании проекта ONREZA анализирует:

1. package.json — зависимости и скрипты
2. Конфигурационные файлы — next.config.js, vite.config.ts, и т.д.
3. Структуру проекта — папки src/, pages/, app/

На основе этого анализа определяется фреймворк и настройки по умолчанию.

Поддерживаемые фреймворки

React

Next.js

Настройка	Значение
Build Command	npm run build
Output Directory	.next (SSR) или out (static)
Install Command	npm install

Рантайм: COMPUTE — полный серверный процесс (Bun).

Особенности:

• Поддержка App Router и Pages Router
• Автодетект static export (output: 'export' в конфиге)
• Поддерживается Node 22+

Порт сервера

Next.js standalone автоматически использует process.env.PORT — настройка не требуется. Но если вы используете кастомный сервер (Express, Fastify и т.д.), обязательно слушайте на process.env.PORT, а не на захардкоженном порте:

const PORT = parseInt(process.env.PORT || "3000");
app.listen(PORT, "0.0.0.0");

Платформа назначает порт динамически. Захардкоженный 3000 не сработает — деплой зависнет с ошибкой «startup timeout».

Совет

Для статического экспорта добавьте в next.config.js:

module.exports = {
  output: 'export'
}

Environment Variables:

Переменные окружения задаются в Settings → Environment Variables (подробнее):

# Серверные переменные (доступны только на сервере)
DATABASE_URL=postgres://user:pass@host:5432/db
API_SECRET=your-secret-key

# Клиентские переменные (доступны в браузере)
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_SITE_URL=https://example.com

Доступ к серверным переменным в Compute:

// В API route или Server Component
const dbUrl = process.env.DATABASE_URL;

Заметка

Переменные с префиксом NEXT_PUBLIC_ инлайнятся при сборке и доступны в клиентском коде. Не храните в них секреты.

Vite

Настройка	Значение
Build Command	npm run build
Output Directory	dist (или из vite.config)
Install Command	npm install

Особенности:

• Поддержка React, Vue, Svelte, Solid
• Быстрая сборка благодаря ESBuild
• HMR для разработки
• Автоопределение build.outDir из конфигурации

Совет

Если вы используете кастомный build.outDir в vite.config.ts, ONREZA автоматически определит его и использует правильную папку для деплоя.

Create React App

Настройка	Значение
Build Command	npm run build
Output Directory	build
Install Command	npm install

Заметка

Create React App больше не рекомендуется для новых проектов. Рассмотрите Vite или Next.js.

Gatsby

Настройка	Значение
Build Command	npm run build
Output Directory	public
Install Command	npm install

Preact

Настройка	Значение
Build Command	npm run build
Output Directory	build
Install Command	npm install

Vue

Nuxt

SSR (рекомендуется)

Настройка	Значение
Build Command	npm run build
Output Directory	.output
Install Command	npm install

SSR через Nitro → COMPUTE runtime. Поддержка ISR через routeRules.

Static (SSG)

Настройка	Значение
Build Command	npm run generate
Output Directory	.output/public
Install Command	npm install

Pre-rendered HTML → CDN. Используй когда контент редко меняется.

Особенности:

• Поддержка Nuxt 3, auto-imports компонентов
• ISR через routeRules: { '/blog/**': { isr: 3600 } }

Vue + Vite

Настройка	Значение
Build Command	npm run build
Output Directory	dist
Install Command	npm install

Svelte

SvelteKit

SvelteKit поддерживается в двух режимах. Выберите адаптер по поведению приложения, а не только по имени фреймворка.

SSR (adapter-node)

Настройка	Значение
Build Command	npm run build
Output Directory	build
Install Command	npm install
Entrypoint	index.js (определяется автоматически)

svelte.config.js

import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter()
  }
};

Этот режим создаёт серверный процесс: CLI обозначает его как PROCESS, а в Build Output Manifest он представлен слоем COMPUTE. Маршруты +server, server load-функции и hooks.server требуют этого режима.

Для запуска серверного процесса runtime-артефакт включает build output и установленные Node.js-зависимости. Если после сборки dev dependencies не нужны, для npm можно использовать Build Command:

npm run build && npm prune --omit=dev

Для pnpm, Yarn или Bun используйте эквивалентную команду своего package manager. Состав артефакта виден в build log; рекомендации при превышении лимита файлов приведены в Build Settings.

SSG (adapter-static)

Настройка	Значение
Build Command	npm run build
Output Directory	build
Install Command	npm install

Используйте этот режим, когда все необходимые страницы можно сгенерировать во время сборки и серверный runtime не нужен.

svelte.config.js

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter()
  }
};

Автодетект проверяет адаптер и server-only routes. adapter-static выбирает STATIC, пока проект остаётся совместимым со статической генерацией; наличие +server, +page.server, +layout.server или hooks.server переключает предложение на PROCESS. Для SSR рекомендуется явно установить и настроить @sveltejs/adapter-node.

Svelte + Vite

Настройка	Значение
Build Command	npm run build
Output Directory	dist
Install Command	npm install

Статические генераторы

Astro

Настройка	Значение
Build Command	npm run build
Output Directory	dist
Install Command	npm install

Особенности:

• Island architecture
• Поддержка React, Vue, Svelte компонентов
• Оптимизация изображений

Docusaurus

Настройка	Значение
Build Command	npm run build
Output Directory	build
Install Command	npm install

Eleventy

Настройка	Значение
Build Command	npm run build
Output Directory	_site
Install Command	npm install

VitePress

Настройка	Значение
Build Command	npm run build
Output Directory	.vitepress/dist
Install Command	npm install

Hexo

Настройка	Значение
Build Command	npm run build
Output Directory	public
Install Command	npm install

Другие

Angular

Настройка	Значение
Build Command	npm run build
Output Directory	dist
Install Command	npm install

Stencil

Настройка	Значение
Build Command	npm run build
Output Directory	www
Install Command	npm install

Parcel

Настройка	Значение
Build Command	npm run build
Output Directory	dist
Install Command	npm install

Ручная настройка

Если автодетект не сработал или вам нужны особые настройки:

Build Command

Команда для сборки проекта. Примеры:

npm run build
yarn build
pnpm build
bun run build
npx next build

Совет

Можно использовать && для цепочки команд:

npm run lint && npm run build

Output Directory

Папка с результатом сборки. Зависит от фреймворка:

Фреймворк	Output Directory
Next.js (static)	out
Vite	dist
CRA	build
Nuxt	.output/public
Astro	dist

Install Command

Команда для установки зависимостей:

Package Manager	Команда
npm	npm install или npm ci
yarn	yarn install
pnpm	pnpm install
bun	bun install

Совет

npm ci быстрее чем npm install для CI/CD, так как использует точные версии из package-lock.json.

Node Version

ONREZA поддерживает несколько версий Node.js:

Версия	Статус	Рекомендация
Node 22	LTS	Минимальная поддерживаемая версия
Node 24	LTS	Рекомендуется
Node 26	Current	Для проверки совместимости с новыми возможностями

Версию можно изменить в Настройки → Сборка и развертывание → Версия Node.js.

Monorepo поддержка

Для проектов в монорепозитории:

1. Укажите Root Directory — путь к папке с проектом
2. Build Command будет выполняться относительно этой папки
3. Output Directory также относительно Root Directory

monorepo/
├── apps/
│   ├── web/          ← Root Directory: apps/web
│   │   ├── package.json
│   │   └── dist/     ← Output: dist (относительно root)
│   └── admin/
└── package.json

Troubleshooting

“Build command failed”

1. Проверьте что команда работает локально
2. Убедитесь что все зависимости в package.json
3. Проверьте Node версию

“Output directory is empty”

1. Проверьте что Build Command выполняется успешно
2. Убедитесь что Output Directory указан правильно
3. Проверьте конфигурацию фреймворка

“Cannot find module”

1. Убедитесь что Install Command выполнился
2. Проверьте package.json на наличие зависимости
3. Попробуйте npm ci вместо npm install

“Startup timeout” для серверных приложений (COMPUTE)

Если деплой с рантаймом COMPUTE зависает и показывает ошибку startup timeout:

1. Проверьте порт — приложение должно слушать на process.env.PORT, а не на фиксированном порте (3000, 8080 и т.д.). Платформа назначает порт динамически.

// ✅ Правильно
const PORT = parseInt(process.env.PORT || "3000");
app.listen(PORT, "0.0.0.0");

// ❌ Неправильно
app.listen(3000);

2. Не используйте dev-сервер в production — vite dev, next dev, webpack-dev-server не предназначены для продакшена. Соберите приложение (npm run build) и запускайте production-сервер.

3. Слушайте на 0.0.0.0 — не на 127.0.0.1 или localhost. Платформа проверяет доступность сервера извне контейнера.

Совет

Если платформа обнаружит, что ваше приложение слушает на неправильном порту, ошибка будет содержать подсказку: «Your app is listening on port 3000 but the platform assigned port 30002. Use process.env.PORT».

См. также

• Создание проекта — пошаговое руководство
• Build Settings — расширенные настройки
• Environment Variables — переменные окружения