Deployment Guide

🚀 Production Deployment

Option 1: Static Hosting (Recommended)

Dashboard — это static SPA, можно развернуть где угодно:

Vercel (fastest)

npm install -g vercel
vercel --prod

Netlify

npm install -g netlify-cli
netlify deploy --prod --dir=dist

GitHub Pages

npm run build
# Скопируй dist/ в gh-pages branch

Option 2: Same Server (srv1321680)

Nginx конфиг

server {
    listen 80;
    server_name dashboard-new.szhub.space;
    
    root /home/app/dashboard-new/dist;
    index index.html;
    
    # SPA routing
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # API proxy (если нужно)
    location /api {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    
    # Gzip compression
    gzip on;
    gzip_types text/css application/javascript application/json;
    gzip_min_length 1000;
}

Шаги установки

# 1. Build
cd /home/app/dashboard-new
npm run build

# 2. Создай nginx конфиг
sudo nano /etc/nginx/sites-available/dashboard-new

# 3. Symlink
sudo ln -s /etc/nginx/sites-available/dashboard-new /etc/nginx/sites-enabled/

# 4. Test & reload
sudo nginx -t
sudo systemctl reload nginx

SSL (Let's Encrypt)

sudo certbot --nginx -d dashboard-new.szhub.space

Option 3: PM2 + serve

npm install -g serve
cd /home/app/dashboard-new

# Create PM2 ecosystem
cat > ecosystem.config.js << 'EOF'
module.exports = {
  apps: [{
    name: 'dashboard-new',
    script: 'serve',
    args: 'dist -l 5174',
    cwd: '/home/app/dashboard-new',
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: '200M',
    env: {
      NODE_ENV: 'production'
    }
  }]
};
EOF

pm2 start ecosystem.config.js
pm2 save

🔧 Environment Variables

Production

Убедись что .env содержит правильный API endpoint:

VITE_API_BASE=https://dashboard.szhub.space/api

Development

.env.local для локальной разработки:

VITE_API_BASE=http://localhost:3000/api

📊 Performance

Current Bundle Size

• JS: ~559 KB (minified) → 169 KB (gzip)
• CSS: ~16 KB → 4 KB (gzip)
• Total: ~173 KB (gzipped)

Optimization Tips

1. Code Splitting (TODO)

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'react-vendor': ['react', 'react-dom'],
        'query': ['@tanstack/react-query'],
        'charts': ['recharts'],
      }
    }
  }
}

2. Lazy Loading

const KpiModal = lazy(() => import('./components/modals/KpiModal'));

3. Image Optimization

• Используй WebP вместо PNG
• Добавь lazy loading для изображений

🧪 Testing Deployment

Local Preview

npm run build
npm run preview
# Open http://localhost:5174

Test API Connection

# Check if API is reachable
curl https://dashboard.szhub.space/api/health

# Expected: {"status":"ok","timestamp":"..."}

🔄 CI/CD (Optional)

GitHub Actions

# .github/workflows/deploy.yml
name: Deploy Dashboard

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 22
      - run: npm ci
      - run: npm run build
      - name: Deploy to Server
        run: |
          rsync -avz dist/ user@srv1321680:/home/app/dashboard-new/dist/

📝 Post-Deployment Checklist

• API endpoints работают
• Dark/Light theme переключается
• Auto-refresh работает (30s)
• Все карточки отображают данные
• Модалки открываются
• Responsive design на mobile
• SSL сертификат установлен
• Gzip compression активен
• Caching headers настроены

🐛 Troubleshooting

Blank Page

1. Проверь console в DevTools
2. Убедись что API доступен: curl https://dashboard.szhub.space/api/health
3. Проверь CORS headers на backend

API Errors

1. Проверь .env — правильный ли VITE_API_BASE
2. Проверь что backend запущен: pm2 status dashboard-backend
3. Проверь logs: pm2 logs dashboard-backend

Build Fails

1. Очисти node_modules: rm -rf node_modules && npm install
2. Проверь версии: node -v (должна быть 22+)
3. Проверь TypeScript: npm run type-check

---

Last Updated: 2026-02-25
Version: 1.0.0