- Server: resize uploads to max 1200px + generate 600px _thumb.jpg - Server: cache /uploads with max-age=1y immutable headers - Client: CatCard uses _thumb.jpg in feed (fallback to full on error) - Client: first 3 feed cards load eagerly (LCP), rest lazy + decoding=async - Client: loading placeholder bg while image fetches - Migration: server/src/scripts/gen-thumbs.ts for existing images Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Котограм
Сайт для публикации фотографий котов. React + Vite (фронт), Express + TypeScript (бэк), SQLite.
Первый запуск на сервере
cd /var/www/cats
# 1. Установить зависимости и собрать фронт
npm install --prefix server
npm install --prefix client
npm run build
# 2. Создать файл переменных окружения
cp server/.env.example server/.env
# Отредактировать server/.env: задать JWT_SECRET и ALLOWED_ORIGIN
nano server/.env
# 3. Запустить через PM2
sudo pm2 start npm --name cats -- start
# 4. Зарегистрировать автостарт (один раз на машине)
sudo pm2 startup
# Скопировать и выполнить команду, которую выведет pm2 startup
sudo pm2 save
Переменные окружения (server/.env)
PORT=3040
JWT_SECRET=замените_на_случайную_строку_32_символа
ALLOWED_ORIGIN=http://cats.heagbokat-server.ru
Сгенерировать JWT_SECRET:
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
Деплой обновлений
cd /var/www/cats
chmod +x deploy.sh # только первый раз
./deploy.sh
Скрипт делает: git pull → сборка фронта → перезапуск PM2.
Управление PM2
sudo pm2 ps # статус процессов
sudo pm2 logs cats # логи сервера
sudo pm2 restart cats # перезапустить
sudo pm2 stop cats # остановить
Данные (не трогать!)
server/data.db— база данных (пользователи, лайки, коты)server/uploads/— загруженные изображения
Оба пути в .gitignore — git pull их не перезапишет.
Первый администратор
При первом запуске автоматически создаётся пользователь admin / admin123.
Обязательно смените пароль через интерфейс или напрямую в БД.
Description
Languages
TypeScript
91.8%
CSS
6.8%
Shell
0.9%
HTML
0.5%