ospab.host/BLOG_DEPLOYMENT.md

📝 Развёртывание системы блогов - Ospabhost 8.1

Обзор изменений

Добавлена полная система блогов с:

• Публичными страницами (/blog, /blog/:url)
• Админской панелью управления (/dashboard/blog)
• Rich Text редактором (Quill.js)
• Системой комментариев с модерацией
• Загрузкой изображений

---

🗂 Структура новых файлов

Backend

backend/
├── src/
│   └── modules/
│       └── blog/
│           ├── blog.controller.ts      # API эндпоинты (посты, комментарии)
│           ├── blog.routes.ts          # Маршруты + multer для загрузки
│           └── upload.controller.ts    # Загрузка/удаление изображений
├── uploads/
│   └── blog/                           # Директория для изображений блога
└── prisma/
    └── schema.prisma                   # Обновлено: модели Post, Comment

Frontend

frontend/
├── src/
│   └── pages/
│       ├── blog.tsx                    # Публичная страница списка статей
│       ├── blogpost.tsx                # Публичная страница статьи
│       └── dashboard/
│           ├── blogadmin.tsx           # Админ-панель блога
│           └── mainpage.tsx            # Обновлено: добавлена вкладка "📝 Блог"
└── package.json                        # Обновлено: react-quill, quill

---

🚀 Шаги развёртывания на сервере

1. Подготовка локального окружения

# В корне проекта
cd ospabhost/frontend
npm install  # Установка react-quill и зависимостей
npm run build

cd ../backend
npm install

2. Создание директории для изображений

На сервере создайте директорию:

mkdir -p /var/www/ospab-host/ospabhost/backend/uploads/blog
chmod 755 /var/www/ospab-host/ospabhost/backend/uploads/blog

3. Применение миграции базы данных

На сервере выполните:

cd /var/www/ospab-host/ospabhost/backend

# Применить миграции
npx prisma migrate deploy

# Регенерировать Prisma Client
npx prisma generate

4. Обновление кода на сервере

Загрузите обновленные файлы через Git или SFTP:

Новые файлы:

• backend/src/modules/blog/blog.controller.ts
• backend/src/modules/blog/blog.routes.ts
• backend/src/modules/blog/upload.controller.ts
• frontend/src/pages/blog.tsx
• frontend/src/pages/blogpost.tsx
• frontend/src/pages/dashboard/blogadmin.tsx

Изменённые файлы:

• backend/src/index.ts (добавлены маршруты /api/blog, раздача /uploads/blog)
• backend/prisma/schema.prisma (модели Post, Comment)
• frontend/src/App.tsx (маршруты /blog, /blog/:url)
• frontend/src/pages/dashboard/mainpage.tsx (вкладка "📝 Блог")

5. Сборка backend

cd /var/www/ospab-host/ospabhost/backend
npm run build

6. Перезапуск backend

pm2 restart ospab-backend
pm2 logs ospab-backend  # Проверка логов

7. Сборка и деплой frontend

cd /var/www/ospab-host/ospabhost/frontend
npm run build

# Копирование в директорию Nginx
cp -r dist/* /var/www/ospab-host/frontend/

8. Проверка прав доступа

# Права на директорию uploads
chown -R www-data:www-data /var/www/ospab-host/ospabhost/backend/uploads/blog
chmod -R 755 /var/www/ospab-host/ospabhost/backend/uploads/blog

# Права на frontend
chown -R www-data:www-data /var/www/ospab-host/frontend/

---

✅ Проверка работоспособности

1. Проверка API эндпоинтов

# Проверка публичного списка постов (должно вернуть пустой массив)
curl https://ospab.host:5000/api/blog/posts

# Проверка админского доступа (требуется токен)
curl -H "Authorization: Bearer YOUR_TOKEN" \
     https://ospab.host:5000/api/blog/admin/posts

2. Проверка frontend

Откройте в браузере:

• https://ospab.host/blog - список статей
• https://ospab.host/dashboard/blog - админ-панель (требуется вход как админ)

3. Проверка загрузки изображений

1. Войдите как супер-админ
2. Откройте /dashboard/blog
3. Нажмите "➕ Создать статью"
4. В редакторе нажмите кнопку изображения
5. Загрузите изображение
6. Проверьте, что изображение вставилось в редактор

---

🔧 Настройка Nginx (если требуется)

Если раздача изображений не работает, добавьте в конфиг Nginx:

location /uploads/blog {
    alias /var/www/ospab-host/ospabhost/backend/uploads/blog;
    access_log off;
    expires 30d;
    add_header Cache-Control "public, immutable";
}

После изменений:

nginx -t
systemctl reload nginx

---

📊 Структура базы данных

Модель Post

model Post {
  id          Int       @id @default(autoincrement())
  title       String
  content     String    @db.Text
  excerpt     String?   @db.Text
  coverImage  String?
  url         String    @unique
  status      String    @default("draft")
  views       Int       @default(0)
  authorId    Int
  author      User      @relation(fields: [authorId], references: [id])
  comments    Comment[]
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
  publishedAt DateTime?
}

Модель Comment

model Comment {
  id         Int      @id @default(autoincrement())
  postId     Int
  post       Post     @relation(fields: [postId], references: [id], onDelete: Cascade)
  userId     Int?
  user       User?    @relation(fields: [userId], references: [id])
  authorName String?
  content    String   @db.Text
  status     String   @default("pending")
  createdAt  DateTime @default(now())
}

---

🎯 Функциональность

Публичная часть

• /blog - Список опубликованных статей с превью
• /blog/:url - Полная статья с комментариями
• Отправка комментариев (авторизованные и гости)
• Счётчик просмотров

Админ-панель (/dashboard/blog)

Вкладка "Статьи"

• Список всех статей (черновики, опубликованные, архив)
• Создание новой статьи
• Редактирование существующих
• Удаление с подтверждением
• Rich Text редактор с:
  • Форматирование текста (жирный, курсив, подчёркнутый, зачёркнутый)
  • Заголовки (H1-H6)
  • Выбор шрифта и размера
  • Цвет текста и фона
  • Списки (маркированные, нумерованные)
  • Выравнивание
  • Ссылки, изображения, видео
• Загрузка обложки (URL)
• Загрузка изображений в контент (через кнопку в редакторе)
• Выбор кастомного URL (не автоматический slug)
• Управление статусом (черновик/опубликовано/архив)

Вкладка "Комментарии"

• Список всех комментариев
• Модерация (одобрение/отклонение)
• Удаление спама
• Показ связанной статьи
• Отображение автора (зарегистрированный или гость)

---

🔒 Права доступа

• Публичные страницы - доступны всем
• Отправка комментариев - доступна всем (гости вводят имя)
• Админ-панель блога - только для user.isAdmin === true
• Модерация комментариев - только для админов
• Создание/редактирование постов - только для админов

---

📝 Использование

Создание первой статьи

1. Войдите как супер-админ
2. Откройте /dashboard/blog
3. Нажмите "➕ Создать статью"
4. Заполните:
   • Заголовок: "Добро пожаловать в наш блог!"
   • URL: welcome (статья будет доступна по /blog/welcome)
   • Краткое описание: "Первая статья нашего блога"
   • Обложка: https://images.unsplash.com/photo-1499750310107-5fef28a66643
   • Содержание: Напишите текст, используя Rich Text редактор
   • Статус: "Опубликовано"
5. Нажмите "Создать статью"

Модерация комментариев

1. Откройте /dashboard/blog
2. Перейдите на вкладку "Комментарии"
3. Комментарии со статусом "На модерации" можно:
   • ✅ Одобрить (появятся на сайте)
   • ❌ Отклонить (скрыты, но не удалены)
   • 🗑️ Удалить (полное удаление)

---

🐛 Возможные проблемы

Проблема: "post and comment are not properties of PrismaClient"

Решение:

cd /var/www/ospab-host/ospabhost/backend
npx prisma generate
npm run build
pm2 restart ospab-backend

Проблема: Изображения не загружаются

Проверьте:

1. Права на директорию backend/uploads/blog (должно быть 755)
2. Nginx раздаёт /uploads/blog (см. конфиг выше)
3. В логах backend нет ошибок multer

Проверка:

# Проверка прав
ls -la /var/www/ospab-host/ospabhost/backend/uploads/blog

# Проверка логов
pm2 logs ospab-backend --lines 50

Проблема: Вкладка "📝 Блог" не появляется в админ-панели

Причины:

• Пользователь не является супер-админом (isAdmin !== true)
• Frontend не пересобран после изменений

Решение:

cd /var/www/ospab-host/ospabhost/frontend
npm run build
cp -r dist/* /var/www/ospab-host/frontend/

Проблема: Rich Text редактор не загружается

Причина: react-quill не установлен

Решение:

cd /var/www/ospab-host/ospabhost/frontend
npm install react-quill quill --legacy-peer-deps
npm run build

---

📦 Зависимости

Backend

• multer (уже установлен)
• express (уже установлен)
• prisma (уже установлен)

Frontend

• react-quill@2.0.0 ✅ УСТАНОВЛЕНО
• quill ✅ УСТАНОВЛЕНО

---

🎨 Кастомизация

Изменение лимита размера изображений

В backend/src/modules/blog/blog.routes.ts:

const upload = multer({
  storage: storage,
  limits: {
    fileSize: 10 * 1024 * 1024 // Измените на нужное значение (в байтах)
  },
  // ...
});

Добавление поддержки других форматов

В backend/src/modules/blog/blog.routes.ts:

fileFilter: function (req, file, cb) {
  const allowedTypes = /jpeg|jpg|png|gif|webp|svg/; // Добавьте нужные форматы
  // ...
}

Настройка панели инструментов Quill

В frontend/src/pages/dashboard/blogadmin.tsx (переменная quillModules):

const quillModules = {
  toolbar: {
    container: [
      // Добавьте/удалите нужные кнопки
      [{ 'header': [1, 2, 3, false] }],
      ['bold', 'italic', 'underline'],
      // ...
    ],
    // ...
  }
};

---

📚 API эндпоинты

Публичные

• GET /api/blog/posts - Список опубликованных постов
• GET /api/blog/posts/:url - Пост по URL
• POST /api/blog/posts/:postId/comments - Добавить комментарий

Админские (требуется токен + isAdmin)

• GET /api/blog/admin/posts - Все посты
• POST /api/blog/admin/posts - Создать пост
• PUT /api/blog/admin/posts/:id - Обновить пост
• DELETE /api/blog/admin/posts/:id - Удалить пост
• POST /api/blog/admin/upload-image - Загрузить изображение
• DELETE /api/blog/admin/images/:filename - Удалить изображение
• GET /api/blog/admin/comments - Все комментарии
• PATCH /api/blog/admin/comments/:id - Модерировать комментарий
• DELETE /api/blog/admin/comments/:id - Удалить комментарий

---

✨ Готово!

После выполнения всех шагов система блогов будет полностью функциональной. Если возникнут проблемы, проверьте логи:

# Логи backend
pm2 logs ospab-backend

# Логи Nginx
tail -f /var/log/nginx/error.log

---

Дата создания: 01.11.2025
Версия: 1.0.0
Автор: GitHub Copilot