Фронтенд приложение для сайта ФОКа с функционалом онлайн-грамот.
- React 19
- TypeScript
- Vite
- CSS Modules
- Docker
- Nginx
- Node.js 18+
- npm или yarn
# Установка зависимостей
npm install
# или
yarn installnpm start
# или
yarn startПриложение будет доступно по адресу http://localhost:5173
npm run build
# или
yarn buildСобранные файлы будут в папке dist/
- Docker и Docker Compose установлены на сервере
- Git установлен на сервере
- Клонируйте репозиторий на сервер:
git clone <your-repo-url> /path/to/fok-front
cd /path/to/fok-front- Создайте файл
.envна основе.env.example:
cp .env.example .env
# Отредактируйте .env файл при необходимости- Соберите и запустите контейнер:
docker-compose up -d --build- Проверьте, что контейнер запущен:
docker psПриложение будет доступно на порту, указанном в .env (по умолчанию 80).
# Остановите контейнер
docker-compose down
# Обновите код
git pull origin main
# Пересоберите и запустите
docker-compose up -d --build- Установите зависимости для webhook сервера:
# Node.js должен быть уже установлен- Настройте переменные окружения для webhook:
Создайте файл .env в корне проекта:
WEBHOOK_PORT=9000
GITHUB_WEBHOOK_SECRET=your-very-secret-key-here
DEPLOY_SCRIPT=./deploy.sh- Обновите путь в
deploy.sh:
Откройте deploy.sh и измените путь к проекту:
cd /path/to/fok-front # Замените на реальный путь- Сделайте скрипт исполняемым:
chmod +x deploy.sh- Запустите webhook сервер:
# Используя PM2 (рекомендуется)
npm install -g pm2
pm2 start webhook-server.js --name webhook
# Или напрямую
node webhook-server.js- Настройте GitHub Webhook:
- Перейдите в настройки репозитория на GitHub
- Выберите "Webhooks" → "Add webhook"
- Payload URL:
http://your-server-ip:9000/webhook - Content type:
application/json - Secret: значение из
GITHUB_WEBHOOK_SECRETв.env - Events: выберите "Just the push event"
- Active: включено
Теперь при каждом push в ветку main приложение будет автоматически обновляться.
# Сохраните конфигурацию PM2
pm2 save
# Настройте автозапуск при перезагрузке системы
pm2 startup- Установите зависимости:
npm install- Соберите проект:
npm run build- Настройте Nginx:
Скопируйте содержимое dist/ в директорию веб-сервера и настройте Nginx аналогично nginx.conf.
Создайте файл .env в корне проекта:
# Порт для приложения (для Docker)
PORT=80
# Порт для webhook сервера
WEBHOOK_PORT=9000
# Секретный ключ для GitHub webhook
GITHUB_WEBHOOK_SECRET=your-secret-key-here
# Путь к скрипту развертывания
DEPLOY_SCRIPT=./deploy.sh
# Окружение
NODE_ENV=productionВажно: Никогда не коммитьте файл .env в репозиторий! Он уже добавлен в .gitignore.
fok-front/
├── src/ # Исходный код
│ ├── components/ # React компоненты
│ ├── pages/ # Страницы приложения
│ ├── OnlineCertificate/ # Модуль онлайн-грамот
│ ├── images/ # Изображения
│ └── styles/ # Стили
├── public/ # Публичные файлы
├── Dockerfile # Конфигурация Docker
├── docker-compose.yml # Docker Compose конфигурация
├── nginx.conf # Конфигурация Nginx
├── webhook-server.js # Сервер для GitHub webhooks
├── deploy.sh # Скрипт автоматического развертывания
└── .env.example # Пример файла с переменными окружения
Приложение поддерживает отображение онлайн-грамот через специальные зашифрованные URL. Грамоты автоматически масштабируются и сохраняют пропорции на всех устройствах.
При возникновении проблем:
- Проверьте логи Docker контейнера:
docker-compose logs - Проверьте логи webhook сервера (если используется PM2):
pm2 logs webhook - Убедитесь, что все переменные окружения настроены правильно
- Проверьте, что порты не заняты другими приложениями
Приватный проект.