BIG_UPDATE deleted vps, added s3 infrastructure.
This commit is contained in:
Georgiy Syralev
460
BLOG_DEPLOYMENT.md
Normal file
460
BLOG_DEPLOYMENT.md
Normal file
@@ -0,0 +1,460 @@
|
||||
# 📝 Развёртывание системы блогов - 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
|
||||
Reference in New Issue
Block a user