102 lines
4.9 KiB
Markdown
102 lines
4.9 KiB
Markdown
# LabNetHub — сайт компании
|
||
|
||
Сайт на Next.js 14 (App Router) + TypeScript + Tailwind CSS для компании
|
||
LabNetHub: разработка сайтов, ботов для соцсетей, настройка CRM, хостинг
|
||
и IT-поддержка.
|
||
|
||
## Быстрый старт
|
||
|
||
```bash
|
||
npm install
|
||
cp .env.local.example .env.local # заполните реальными значениями
|
||
npm run dev
|
||
```
|
||
|
||
Сайт откроется на http://localhost:3000
|
||
|
||
Сборка для продакшена:
|
||
|
||
```bash
|
||
npm run build
|
||
npm run start
|
||
```
|
||
|
||
## Структура проекта
|
||
|
||
```
|
||
app/ — страницы (App Router)
|
||
page.tsx — Главная
|
||
websites/ — Сайты
|
||
bots/ — Боты
|
||
crm/ — CRM
|
||
hosting/ — Хостинг и серверы
|
||
support/ — IT-поддержка
|
||
contacts/ — Контакты
|
||
api/contact/ — API-роут формы обратной связи (→ Telegram)
|
||
components/ — переиспользуемые компоненты (Header, Footer, карточки и т.д.)
|
||
config/
|
||
contacts.ts — все контакты и ссылки на соцсети в одном месте
|
||
services.ts — данные для карточек услуг и навигации
|
||
```
|
||
|
||
## Что нужно заполнить перед публикацией
|
||
|
||
1. **Контакты** — откройте `config/contacts.ts` и замените placeholder-ссылки
|
||
на реальные: Telegram, VK, WhatsApp, email, город.
|
||
|
||
2. **Telegram-уведомления формы** — в `.env.local` укажите:
|
||
- `TELEGRAM_BOT_TOKEN` — токен бота, полученный у [@BotFather](https://t.me/BotFather)
|
||
- `TELEGRAM_CHAT_ID` — ID чата/канала для приёма заявок.
|
||
Узнать свой ID можно, написав боту [@userinfobot](https://t.me/userinfobot),
|
||
либо через метод `getUpdates` вашего бота.
|
||
|
||
3. **Домен** — в `app/layout.tsx` поле `metadataBase` укажите на ваш реальный домен.
|
||
|
||
## Форма обратной связи
|
||
|
||
Форма на странице `/contacts` отправляет данные на `POST /api/contact`.
|
||
Роут проверяет обязательные поля, убирает HTML-теги (защита от инъекций),
|
||
экранирует спецсимволы Markdown и пересылает сообщение в Telegram через
|
||
Bot API. В форме также есть скрытое honeypot-поле для защиты от простых ботов.
|
||
|
||
## Безопасность
|
||
|
||
В `next.config.mjs` включены базовые защитные HTTP-заголовки:
|
||
`Strict-Transport-Security`, `X-Frame-Options`, `X-Content-Type-Options`,
|
||
`Referrer-Policy`, `Permissions-Policy`.
|
||
|
||
Рекомендации для сервера при деплое:
|
||
|
||
- Раздавайте сайт только по HTTPS (например, сертификат Let's Encrypt через certbot).
|
||
- На уровне nginx настройте `limit_req` для `/api/contact`, чтобы ограничить
|
||
количество запросов от одного адреса в минуту.
|
||
- Храните `.env.local` вне репозитория — файл уже добавлен в `.gitignore`.
|
||
- Регулярно обновляйте зависимости (`npm outdated` / `npm audit`).
|
||
|
||
## Деплой на свой сервер (LabNetHub VDS/VPS)
|
||
|
||
Пример запуска через PM2 за nginx как обратным прокси:
|
||
|
||
```bash
|
||
npm run build
|
||
pm2 start npm --name labnethub -- start
|
||
```
|
||
|
||
В конфиге nginx проксируйте запросы на `http://127.0.0.1:3000` и подключите
|
||
SSL-сертификат. При желании сайт также можно собрать в статику
|
||
(`output: "export"` в `next.config.mjs`) — тогда `/api/contact` работать не будет,
|
||
и форму нужно будет переключить на внешний сервис отправки писем.
|
||
|
||
## Цветовая тема
|
||
|
||
Токены дизайна заданы в `tailwind.config.ts`:
|
||
|
||
- `base` — тёмно-синий фон (`base.950` — основной фон страницы)
|
||
- `blue` — основной акцент бренда
|
||
- `green` — акцент раздела «Хостинг и серверы»
|
||
- `ink` — оттенки текста
|
||
|
||
Шрифты (`Unbounded`, `Manrope`, `JetBrains Mono`) подключены через
|
||
`next/font/google` в `app/layout.tsx` — при сборке скачиваются один раз
|
||
и дальше работают без обращений к Google Fonts во время выполнения.
|