Информационная платформа закрытых культурных трансляций:
концертов, театральных событий, встреч об искусстве, научных эфиров и лекций.
Для публикации достаточно сервера с Docker и Docker Compose:
git clone https://github.com/flake92/sfera.git
cd sfera
docker compose up -d --buildСайт откроется по адресу http://адрес-сервера:8080.
Проверить состояние:
docker compose ps
docker compose logs -f sferaОстановить проект:
docker compose downСкопируйте пример настроек и укажите свободный порт:
cp .env.example .envSFERA_PORT=8080Примените изменение:
docker compose up -d --buildДля обычного Apache-хостинга подготовлен готовый архив:
Он содержит статические страницы, локальные изображения и PHP-обработчик служебного статуса. Node.js и Docker на сервере не требуются.
Безопасная установка рядом с существующей конфигурацией:
- сохраните резервную копию каталога домена;
- не удаляйте и не перезаписывайте существующую папку
media; - переименуйте стандартный
index.htmlвindex.reg-backup.html; - распакуйте содержимое ZIP прямо в корень домена;
- убедитесь, что ISPmanager извлёк скрытый корневой файл
.htaccess; - убедитесь, что появились каталоги
assets,apiиlogin; - проверьте
/,/login/,/api/live-statusи существующий/media/.
Папка media намеренно не включена в архив. Корневой .htaccess также явно
исключает /media, поэтому его собственная прокси-настройка продолжает
работать.
Пересобрать PHP-пакет из актуальной Docker-версии:
npm run package:php
СФЕРА — EDGE CONNECT выглядит как действующая редакционная афиша и подробно показывает, что происходит до, во время и после культурного эфира.
- адаптивная русскоязычная главная страница;
- 32 уникальные локальные фотографии в WebP;
- расписание закрытых эфиров с фильтрами по тематике;
- шесть развёрнутых статей о производстве трансляций;
- карточки форматов, качества, доступности, прав и архива;
- отдельная страница входа
/login; - личный кабинет выдаёт менеджер после приобретения подписки;
- все онлайн-мероприятия обозначены как закрытые и непубличные;
- фокусный материал стабильно меняется раз в 12 часов;
- демонстрационная аудитория обновляется раз в 5 минут;
- живой статус страницы передаётся через Server-Sent Events;
- напоминания сохраняются локально в браузере;
- интерфейс поддерживает клавиатуру и
prefers-reduced-motion; - изображения загружаются лениво и не зависят от внешнего фотосервиса.
Счётчик аудитории имеет явную пометку «Демо-аудитория» и не выдаётся за
фактическую посещаемость. Для рабочего сервиса значение viewers нужно получать
из собственной аналитики или медиаплатформы, а audienceMode переключить в
"live".
| Маршрут | Назначение |
|---|---|
/ |
афиша, программа, статьи и информация о трансляциях |
/login |
демонстрационная форма входа в закрытую программу |
/api/live-status |
поток служебного статуса в формате SSE |
Форма входа — оформленная заглушка. Она проверяет заполнение полей, но не отправляет логин и пароль на сервер. Настоящую авторизацию следует подключать только к доверенному backend/API.
cd sfera
git pull --ff-only
docker compose up -d --build
docker image prune -fПоследняя команда удаляет только неиспользуемые слои старых Docker-образов.
Требуется Node.js 22.13 или новее.
git clone https://github.com/flake92/sfera.git
cd sfera
npm ci
npm run devАдрес разработки обычно выводится как http://localhost:3000.
Проверка production-сборки:
npm run build
npm run testДоступные команды:
| Команда | Назначение |
|---|---|
npm run dev |
сервер разработки |
npm run build |
production-сборка в dist |
npm run start |
запуск собранного приложения |
npm run test |
сборка и автоматические проверки HTML/SSE |
npm run lint |
статическая проверка исходников |
Для публичного домена разместите перед контейнером Nginx, Caddy, Traefik или панель хостинга с поддержкой reverse proxy:
https://example.org → http://127.0.0.1:8080
Включите TLS-сертификат и не буферизуйте ответы маршрута
/api/live-status, иначе браузер не будет сразу получать SSE-события.
Проверка после публикации:
curl -I https://example.org/
curl -I https://example.org/login
curl -N https://example.org/api/live-statusСайт отвечает за редакционную витрину, расписание, доступ и служебные статусы. Большой видеопоток не следует пропускать через контейнер приложения.
Браузер
├─ HTTPS / Fetch ───────→ сайт и каталог
├─ EventSource / SSE ←── служебный статус
└─ HLS / DASH ←───────── объектное хранилище + CDN
Для высокой нагрузки рекомендуется:
- кодировать видео в HLS/DASH;
- хранить сегменты в объектном хранилище;
- раздавать видео и изображения через CDN;
- масштабировать SSE через edge fan-out или управляемый realtime-сервис;
- кэшировать каталог и метаданные;
- добавить rate limiting, мониторинг и резервный периодический Fetch.
XHTTP из Xray-core не является браузерным Web API. Обычная страница не может выбрать этот транспорт напрямую. В проекте браузер использует стандартные HTTPS, Fetch и SSE.
Если XHTTP требуется для совместимости внутри принадлежащей вам инфраструктуры, его можно разместить отдельным закрытым серверным адаптером за аутентифицированным API. В публичную часть сайта не входят VLESS, прокси, средства обхода блокировок, маскировка трафика или инструкции по уклонению от контроля.
Официальные материалы:
- React 19;
- TypeScript;
- vinext и Next-compatible App Router;
- Vite;
- Server-Sent Events;
- Docker Compose;
- CSS с адаптивной вёрсткой.
app/
api/live-status/route.ts SSE-маршрут
login/page.tsx страница входа
page.tsx главная страница
globals.css оформление
public/ локальные изображения
tests/ проверки сборки и маршрутов
docs/screenshots/ скриншоты для README
Dockerfile production-образ
compose.yaml запуск на сервере
DEPLOY.md расширенная памятка по публикации
Демонстрационные фотографии сохранены локально и оптимизированы в WebP. Исходные материалы получены с Unsplash и используются согласно условиям сервиса. Перед коммерческой публикацией сохраните сведения об авторах выбранных фотографий в редакционной системе проекта.