Фреймворки

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

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

Фреймворк	Рантайм	SSR	SSG	ISR	Middleware	Image Opt
Next.js	COMPUTE	✅	✅	✅	✅	✅
Astro	COMPUTE	✅	✅	✅	✅	✅
Nuxt 3	COMPUTE	✅	✅	✅	✅	—
Remix	COMPUTE	✅	—	—	✅	—
Analog	COMPUTE	✅	✅	✅	✅	—
SvelteKit	STATIC	—	✅	—	✅	—
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 20+

Порт сервера

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

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

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

• Требует @sveltejs/adapter-static для статической генерации
• Поддержка prerendering

svelte.config.js

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

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

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 20	LTS	Рекомендуется
Node 22	Current	Для новых фич
Node 24	Latest	Экспериментально

Версию можно изменить в Settings → Build & Deployment → Node Version.

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 — переменные окружения