461 lines
14 KiB
Markdown
461 lines
14 KiB
Markdown
# 📝 Развёртывание системы блогов - 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. Подготовка локального окружения
|
||
|
||
```bash
|
||
# В корне проекта
|
||
cd ospabhost/frontend
|
||
npm install # Установка react-quill и зависимостей
|
||
npm run build
|
||
|
||
cd ../backend
|
||
npm install
|
||
```
|
||
|
||
### 2. Создание директории для изображений
|
||
|
||
На сервере создайте директорию:
|
||
|
||
```bash
|
||
mkdir -p /var/www/ospab-host/ospabhost/backend/uploads/blog
|
||
chmod 755 /var/www/ospab-host/ospabhost/backend/uploads/blog
|
||
```
|
||
|
||
### 3. Применение миграции базы данных
|
||
|
||
**На сервере** выполните:
|
||
|
||
```bash
|
||
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
|
||
|
||
```bash
|
||
cd /var/www/ospab-host/ospabhost/backend
|
||
npm run build
|
||
```
|
||
|
||
### 6. Перезапуск backend
|
||
|
||
```bash
|
||
pm2 restart ospab-backend
|
||
pm2 logs ospab-backend # Проверка логов
|
||
```
|
||
|
||
### 7. Сборка и деплой frontend
|
||
|
||
```bash
|
||
cd /var/www/ospab-host/ospabhost/frontend
|
||
npm run build
|
||
|
||
# Копирование в директорию Nginx
|
||
cp -r dist/* /var/www/ospab-host/frontend/
|
||
```
|
||
|
||
### 8. Проверка прав доступа
|
||
|
||
```bash
|
||
# Права на директорию 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 эндпоинтов
|
||
|
||
```bash
|
||
# Проверка публичного списка постов (должно вернуть пустой массив)
|
||
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:
|
||
|
||
```nginx
|
||
location /uploads/blog {
|
||
alias /var/www/ospab-host/ospabhost/backend/uploads/blog;
|
||
access_log off;
|
||
expires 30d;
|
||
add_header Cache-Control "public, immutable";
|
||
}
|
||
```
|
||
|
||
После изменений:
|
||
|
||
```bash
|
||
nginx -t
|
||
systemctl reload nginx
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 Структура базы данных
|
||
|
||
### Модель Post
|
||
|
||
```prisma
|
||
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
|
||
|
||
```prisma
|
||
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"
|
||
|
||
**Решение:**
|
||
```bash
|
||
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
|
||
|
||
**Проверка:**
|
||
```bash
|
||
# Проверка прав
|
||
ls -la /var/www/ospab-host/ospabhost/backend/uploads/blog
|
||
|
||
# Проверка логов
|
||
pm2 logs ospab-backend --lines 50
|
||
```
|
||
|
||
### Проблема: Вкладка "📝 Блог" не появляется в админ-панели
|
||
|
||
**Причины:**
|
||
- Пользователь не является супер-админом (`isAdmin !== true`)
|
||
- Frontend не пересобран после изменений
|
||
|
||
**Решение:**
|
||
```bash
|
||
cd /var/www/ospab-host/ospabhost/frontend
|
||
npm run build
|
||
cp -r dist/* /var/www/ospab-host/frontend/
|
||
```
|
||
|
||
### Проблема: Rich Text редактор не загружается
|
||
|
||
**Причина:** `react-quill` не установлен
|
||
|
||
**Решение:**
|
||
```bash
|
||
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`:
|
||
|
||
```typescript
|
||
const upload = multer({
|
||
storage: storage,
|
||
limits: {
|
||
fileSize: 10 * 1024 * 1024 // Измените на нужное значение (в байтах)
|
||
},
|
||
// ...
|
||
});
|
||
```
|
||
|
||
### Добавление поддержки других форматов
|
||
|
||
В `backend/src/modules/blog/blog.routes.ts`:
|
||
|
||
```typescript
|
||
fileFilter: function (req, file, cb) {
|
||
const allowedTypes = /jpeg|jpg|png|gif|webp|svg/; // Добавьте нужные форматы
|
||
// ...
|
||
}
|
||
```
|
||
|
||
### Настройка панели инструментов Quill
|
||
|
||
В `frontend/src/pages/dashboard/blogadmin.tsx` (переменная `quillModules`):
|
||
|
||
```typescript
|
||
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` - Удалить комментарий
|
||
|
||
---
|
||
|
||
## ✨ Готово!
|
||
|
||
После выполнения всех шагов система блогов будет полностью функциональной. Если возникнут проблемы, проверьте логи:
|
||
|
||
```bash
|
||
# Логи backend
|
||
pm2 logs ospab-backend
|
||
|
||
# Логи Nginx
|
||
tail -f /var/log/nginx/error.log
|
||
```
|
||
|
||
---
|
||
|
||
**Дата создания:** 01.11.2025
|
||
**Версия:** 1.0.0
|
||
**Автор:** GitHub Copilot
|