315 lines
9.1 KiB
Markdown
315 lines
9.1 KiB
Markdown
|
||
# Global-IT24 Landing Page
|
||
|
||
Лендинг для компании Global-IT24 - профессиональный монтаж систем видеонаблюдения в Москве.
|
||
|
||
## 🌐 Веб-сайт
|
||
|
||
**Production:** https://video.mscsrv.ru
|
||
|
||
## 📦 Технологии
|
||
|
||
- **Framework:** Next.js 14.2.28
|
||
- **UI:** React 18.2, Tailwind CSS
|
||
- **UI Components:** Radix UI, Shadcn/ui, Lucide Icons
|
||
- **Database:** PostgreSQL + Prisma ORM
|
||
- **Email:** Nodemailer (SMTP Mail.ru)
|
||
- **Notifications:** Telegram Bot API
|
||
- **Deployment:** Docker + Traefik
|
||
- **Language:** TypeScript
|
||
|
||
## ✨ Возможности
|
||
|
||
- 🎨 Адаптивный дизайн (Desktop, Tablet, Mobile)
|
||
- 📱 Оптимизирован для мобильных устройств
|
||
- 📧 Email уведомления о новых заявках
|
||
- 💬 Telegram уведомления в реальном времени
|
||
- 💾 Сохранение заявок в базу данных PostgreSQL
|
||
- 🔒 SSL сертификаты через Let's Encrypt (Traefik)
|
||
- 🚀 Оптимизация производительности Next.js
|
||
- 🐳 Docker контейнеризация
|
||
|
||
## 📋 Структура проекта
|
||
|
||
```
|
||
global_it24_landing/
|
||
├── nextjs_space/ # Next.js приложение
|
||
│ ├── app/ # App Router
|
||
│ │ ├── api/ # API Routes
|
||
│ │ │ └── contact/ # Endpoint для обработки заявок
|
||
│ │ ├── layout.tsx # Корневой layout
|
||
│ │ └── page.tsx # Главная страница
|
||
│ ├── components/ # React компоненты
|
||
│ │ ├── ui/ # UI компоненты (Shadcn/ui)
|
||
│ │ ├── contact-form.tsx # Форма контакта
|
||
│ │ └── ...
|
||
│ ├── lib/ # Утилиты и библиотеки
|
||
│ │ ├── email.ts # Email уведомления
|
||
│ │ ├── telegram.ts # Telegram уведомления
|
||
│ │ ├── db.ts # Prisma client
|
||
│ │ └── utils.ts # Вспомогательные функции
|
||
│ ├── prisma/ # Database schema
|
||
│ │ └── schema.prisma # Prisma схема
|
||
│ ├── public/ # Статические файлы
|
||
│ └── package.json # Зависимости
|
||
├── Dockerfile # Docker образ
|
||
├── docker-compose.yml # Docker Compose конфигурация
|
||
├── traefik-config-example.yml # Traefik конфигурация
|
||
├── deploy.sh # Скрипт развертывания
|
||
├── update.sh # Скрипт обновления
|
||
├── logs.sh # Просмотр логов
|
||
├── status.sh # Проверка статуса
|
||
├── stop.sh # Остановка контейнера
|
||
├── backup.sh # Резервное копирование
|
||
├── check-network.sh # Проверка сетевой связности
|
||
└── README.deployment.md # Инструкция по развертыванию
|
||
```
|
||
|
||
## 🚀 Быстрый старт
|
||
|
||
### Разработка (локально)
|
||
|
||
```bash
|
||
# Клонировать репозиторий
|
||
git clone https://git.mscsrv.ru/sa/global_it24_landing.git
|
||
cd global_it24_landing/nextjs_space
|
||
|
||
# Установить зависимости
|
||
yarn install
|
||
|
||
# Настроить переменные окружения
|
||
cp .env.example .env
|
||
nano .env
|
||
|
||
# Запустить dev сервер
|
||
yarn dev
|
||
```
|
||
|
||
Откройте http://localhost:3000 в браузере.
|
||
|
||
### Production развертывание
|
||
|
||
Подробная инструкция по развертыванию находится в [README.deployment.md](./README.deployment.md)
|
||
|
||
**Краткая версия:**
|
||
|
||
```bash
|
||
# На вашем Ubuntu сервере
|
||
cd /path/to/global_it24_landing
|
||
|
||
# Настроить .env
|
||
cp .env.example .env
|
||
nano .env
|
||
|
||
# Запустить развертывание
|
||
./deploy.sh
|
||
```
|
||
|
||
## ⚙️ Конфигурация
|
||
|
||
### Переменные окружения (.env)
|
||
|
||
```env
|
||
# Database
|
||
DATABASE_URL="postgresql://user:password@host:5432/database"
|
||
|
||
# SMTP Configuration
|
||
SMTP_HOST=smtp.mail.ru
|
||
SMTP_USER=your-email@mail.ru
|
||
SMTP_PASSWORD=your-smtp-password
|
||
NOTIFICATION_EMAIL=your-email@mail.ru
|
||
|
||
# Telegram Bot
|
||
TELEGRAM_BOT_TOKEN=your-bot-token
|
||
TELEGRAM_CHAT_ID=your-chat-id
|
||
|
||
# Application
|
||
NEXT_PUBLIC_SITE_URL=https://video.mscsrv.ru
|
||
NODE_ENV=production
|
||
```
|
||
|
||
### Архитектура развертывания
|
||
|
||
```
|
||
Internet
|
||
↓
|
||
[DNS: video.mscsrv.ru] → 192.168.50.59
|
||
↓
|
||
[Traefik: 192.168.50.59] (SSL, Reverse Proxy)
|
||
↓ проксирует на порт 3000
|
||
[App Server: Ubuntu Docker Container]
|
||
↓
|
||
[Next.js App + PostgreSQL]
|
||
```
|
||
|
||
## 📧 Система уведомлений
|
||
|
||
При каждой новой заявке через форму на сайте:
|
||
|
||
1. ✅ Данные сохраняются в базу данных PostgreSQL
|
||
2. 📧 Отправляется Email уведомление на info@global-it24.ru
|
||
3. 💬 Отправляется сообщение в Telegram бот
|
||
|
||
**Формат уведомлений:**
|
||
- Имя клиента
|
||
- Телефон (кликабельная ссылка)
|
||
- Email (если указан)
|
||
- Тип услуги
|
||
- Сообщение (если есть)
|
||
|
||
## 🛠 Команды управления
|
||
|
||
```bash
|
||
# Развертывание
|
||
./deploy.sh
|
||
|
||
# Обновление (рестарт контейнера)
|
||
./update.sh
|
||
|
||
# Просмотр логов
|
||
./logs.sh
|
||
|
||
# Проверка статуса
|
||
./status.sh
|
||
|
||
# Остановка контейнера
|
||
./stop.sh
|
||
|
||
# Резервное копирование
|
||
./backup.sh
|
||
|
||
# Проверка сетевой связности с Traefik
|
||
./check-network.sh
|
||
```
|
||
|
||
## 🗄 База данных
|
||
|
||
**Schema (Prisma):**
|
||
|
||
```prisma
|
||
model ContactSubmission {
|
||
id String @id @default(cuid())
|
||
name String
|
||
phone String
|
||
email String?
|
||
serviceType String?
|
||
message String?
|
||
createdAt DateTime @default(now())
|
||
|
||
@@map("contact_submissions")
|
||
}
|
||
```
|
||
|
||
**Миграции:**
|
||
|
||
```bash
|
||
cd nextjs_space
|
||
yarn prisma migrate dev
|
||
yarn prisma generate
|
||
```
|
||
|
||
## 📱 Секции лендинга
|
||
|
||
1. **Hero** - Главный экран с призывом к действию
|
||
2. **Преимущества** - Ключевые преимущества компании
|
||
3. **Услуги** - Типы систем видеонаблюдения (дома, офисы, промышленность)
|
||
4. **Процесс работы** - Этапы установки системы
|
||
5. **Прайс** - Ценовые пакеты
|
||
6. **Контакты** - Форма обратной связи
|
||
7. **Footer** - Контактная информация и соцсети
|
||
|
||
## 🔐 Безопасность
|
||
|
||
- SSL сертификаты через Let's Encrypt (Traefik)
|
||
- Security headers (X-Frame-Options, CSP, etc.)
|
||
- SMTP пароли и токены в переменных окружения
|
||
- .env файл в .gitignore
|
||
- Валидация данных форм
|
||
- Rate limiting на API endpoints (можно добавить)
|
||
|
||
## 📈 Производительность
|
||
|
||
- Next.js Standalone build для минимального размера образа
|
||
- Статическая генерация страниц где возможно
|
||
- Оптимизация изображений (Next.js Image)
|
||
- Сжатие (Traefik compress middleware)
|
||
- CDN ready (статические файлы могут быть вынесены)
|
||
|
||
## 🐳 Docker
|
||
|
||
**Сборка:**
|
||
```bash
|
||
docker build -t global-it24-landing .
|
||
```
|
||
|
||
**Запуск:**
|
||
```bash
|
||
docker compose up -d
|
||
```
|
||
|
||
**Остановка:**
|
||
```bash
|
||
docker compose down
|
||
```
|
||
|
||
## 📝 Логи
|
||
|
||
```bash
|
||
# Docker logs
|
||
docker compose logs -f
|
||
|
||
# Или через скрипт
|
||
./logs.sh
|
||
|
||
# Логи находятся в
|
||
.logs/
|
||
```
|
||
|
||
## 🔄 Обновление кода
|
||
|
||
```bash
|
||
# Остановка текущего контейнера
|
||
docker compose down
|
||
|
||
# Получение обновлений из git
|
||
git pull origin master
|
||
|
||
# Пересборка и запуск
|
||
./deploy.sh
|
||
```
|
||
|
||
## 📞 Контакты
|
||
|
||
**Global-IT24**
|
||
- 📱 Телефон: 8(985)489-16-19
|
||
- 📧 Email: info@global-it24.ru
|
||
- 🌐 Сайт: https://video.mscsrv.ru
|
||
- 📍 Москва
|
||
|
||
## 📄 Лицензия
|
||
|
||
Proprietary - Global-IT24 © 2025
|
||
|
||
## 🔗 Ссылки
|
||
|
||
- [Документация Next.js](https://nextjs.org/docs)
|
||
- [Документация Prisma](https://www.prisma.io/docs)
|
||
- [Документация Traefik](https://doc.traefik.io/traefik/)
|
||
- [Документация Docker](https://docs.docker.com/)
|
||
- [Shadcn/ui Components](https://ui.shadcn.com/)
|
||
|
||
## 👨💻 Разработка
|
||
|
||
**Разработано с использованием:**
|
||
- Next.js App Router
|
||
- TypeScript
|
||
- Tailwind CSS
|
||
- Docker
|
||
- PostgreSQL
|
||
|
||
**Repository:** https://git.mscsrv.ru/sa/global_it24_landing
|
||
|
||
---
|
||
|
||
**Сделано с ❤️ для Global-IT24**
|