Сборка и развёртывание

Сервер разработки npm run dev не подходит для настоящих посетителей: он медленнее и пересобирает код на лету. Перед публикацией проект собирают в оптимизированные файлы, а затем запускают их обычным Node.js-сервером. Развёртывание — это перенос собранного приложения на сервер или хостинг.

Сборка

npm run build

Скрипт вызывает react-router build. Появится папка build/:

build/
├── client/           файлы для браузера: JS, CSS, картинки, пререндеренные HTML
└── server/
    └── index.js      серверная часть: загрузчики, действия, отрисовка

Запуск

npm start

Скрипт выполняет react-router-serve ./build/server/index.js. Это готовый сервер из пакета @react-router/serve: он раздаёт файлы из build/client и передаёт остальные запросы приложению. Сайт откроется по адресу http://localhost:3000; другой порт задают переменной окружения PORT.

На своём сервере

На сервере нужны Node.js 20+ и переменные окружения из урока про них. Порядок действий:

npm ci
npm run build
SESSION_SECRET=... NODE_ENV=production npm start

Обычно процесс держат запущенным через systemd или pm2, а впереди ставят Nginx с HTTPS. Не забудьте, что файл базы blog.db должен лежать там, где его не сотрёт следующее развёртывание.

Docker

Шаблон проекта уже содержит Dockerfile, который собирает и запускает приложение:

docker build -t blog .
docker run -p 3000:3000 -e SESSION_SECRET=long-secret blog

Сайт будет доступен на http://localhost:3000. Такой образ можно запустить на любом хостинге с поддержкой контейнеров.

Адаптеры

react-router-serve подходит для простых случаев. Когда приложение нужно встроить в свой сервер или запустить на особой платформе, используют адаптер — пакет, который связывает фреймворк с этой средой:

Например, с Express приложение подключается как обычный обработчик:

// server.js
import express from "express";
import { createRequestHandler } from "@react-router/express";
 
const app = express();
app.use(express.static("build/client"));
app.use(createRequestHandler({ build: await import("./build/server/index.js") }));
app.listen(3000);

У Vercel и Netlify свои способы подключения; для разных платформ у create-react-router есть готовые шаблоны (параметр --template), их список — в документации React Router.

Частая ошибка

Загрузить на сервер только папку build/ и запустить npm start. Собранный код по-прежнему импортирует пакеты из node_modules — react, react-router, драйвер базы. На сервер копируют также package.json и lock-файл и выполняют npm ci --omit=dev, чтобы установить зависимости для продакшена.