todo-helden/DEPLOYMENT.md

# 🚀 Deployment Guide für ToDo Kids

Diese Anleitung zeigt dir verschiedene Möglichkeiten, ToDo Kids zu deployen.

## 📋 Voraussetzungen

- Node.js 18+ installiert
- Git installiert
- Firebase-Projekt eingerichtet
- Alle Environment Variables konfiguriert

## 🔧 Vorbereitung

### 1. Production Build erstellen
```bash
# Dependencies installieren
npm install
cd client && npm install && cd ..

# Frontend Build
cd client
npm run build
cd ..

# Backend für Production vorbereiten
npm run build # Falls vorhanden
```

### 2. Environment Variables prüfen
```bash
# Root .env
PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
NODE_ENV=production

# client/.env
REACT_APP_API_URL=https://your-backend-url.com
REACT_APP_FIREBASE_API_KEY=your_firebase_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=your-project-id
# ... weitere Firebase-Konfiguration
```

## 🌐 Deployment-Optionen

### Option 1: Heroku (Empfohlen für Anfänger)

#### Vorbereitung
```bash
# Heroku CLI installieren
# https://devcenter.heroku.com/articles/heroku-cli

# Heroku Login
heroku login

# App erstellen
heroku create todo-kids-app
```

#### Environment Variables setzen
```bash
heroku config:set NODE_ENV=production
heroku config:set JWT_SECRET=your_jwt_secret
heroku config:set MONGODB_URI=your_mongodb_uri

# Firebase-Konfiguration
heroku config:set REACT_APP_FIREBASE_API_KEY=your_api_key
heroku config:set REACT_APP_FIREBASE_AUTH_DOMAIN=your_domain
# ... weitere Firebase-Variablen
```

#### Deployment
```bash
# Git Repository vorbereiten
git add .
git commit -m "Prepare for deployment"

# Zu Heroku deployen
git push heroku main

# App öffnen
heroku open
```

### Option 2: Vercel (Frontend) + Railway/Render (Backend)

#### Frontend auf Vercel
```bash
# Vercel CLI installieren
npm i -g vercel

# Login
vercel login

# Client-Ordner deployen
cd client
vercel

# Environment Variables in Vercel Dashboard setzen
# https://vercel.com/dashboard
```

#### Backend auf Railway
```bash
# Railway CLI installieren
npm install -g @railway/cli

# Login
railway login

# Projekt erstellen
railway new

# Environment Variables setzen
railway variables set NODE_ENV=production
railway variables set JWT_SECRET=your_secret

# Deployen
railway up
```

### Option 3: DigitalOcean App Platform

#### App erstellen
1. DigitalOcean Dashboard öffnen
2. "Apps" → "Create App"
3. GitHub Repository verbinden
4. Build-Einstellungen konfigurieren:

```yaml
# .do/app.yaml
name: todo-kids
services:
- name: api
  source_dir: /
  github:
    repo: your-username/todo-kids
    branch: main
  run_command: npm start
  environment_slug: node-js
  instance_count: 1
  instance_size_slug: basic-xxs
  envs:
  - key: NODE_ENV
    value: production
  - key: JWT_SECRET
    value: your_jwt_secret
    type: SECRET
  - key: MONGODB_URI
    value: your_mongodb_uri
    type: SECRET

- name: web
  source_dir: /client
  github:
    repo: your-username/todo-kids
    branch: main
  build_command: npm run build
  run_command: npx serve -s build
  environment_slug: node-js
  instance_count: 1
  instance_size_slug: basic-xxs
  envs:
  - key: REACT_APP_API_URL
    value: ${api.PUBLIC_URL}
```

### Option 4: Docker Deployment

#### Dockerfile erstellen
```dockerfile
# Root Dockerfile
FROM node:18-alpine

WORKDIR /app

# Backend Dependencies
COPY package*.json ./
RUN npm ci --only=production

# Frontend Build
COPY client/package*.json ./client/
WORKDIR /app/client
RUN npm ci --only=production
COPY client/ .
RUN npm run build

# Backend Setup
WORKDIR /app
COPY . .

EXPOSE 5000

CMD ["npm", "start"]
```

#### Docker Compose
```yaml
# docker-compose.yml
version: '3.8'
services:
  app:
    build: .
    ports:
      - "5000:5000"
    environment:
      - NODE_ENV=production
      - JWT_SECRET=${JWT_SECRET}
      - MONGODB_URI=${MONGODB_URI}
    depends_on:
      - mongo
  
  mongo:
    image: mongo:5
    volumes:
      - mongo_data:/data/db
    environment:
      - MONGO_INITDB_ROOT_USERNAME=admin
      - MONGO_INITDB_ROOT_PASSWORD=password

volumes:
  mongo_data:
```

#### Deployment
```bash
# Image bauen
docker build -t todo-kids .

# Container starten
docker-compose up -d

# Oder einzeln
docker run -p 5000:5000 -e NODE_ENV=production todo-kids
```

### Option 5: VPS (Ubuntu/Debian)

#### Server vorbereiten
```bash
# Server Updates
sudo apt update && sudo apt upgrade -y

# Node.js installieren
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# PM2 installieren (Process Manager)
sudo npm install -g pm2

# Nginx installieren
sudo apt install nginx -y
```

#### App deployen
```bash
# Repository klonen
git clone https://github.com/your-username/todo-kids.git
cd todo-kids

# Dependencies installieren
npm install
cd client && npm install && npm run build && cd ..

# Environment Variables setzen
cp .env.example .env
# .env bearbeiten

# PM2 starten
pm2 start ecosystem.config.js
pm2 save
pm2 startup
```

#### Nginx konfigurieren
```nginx
# /etc/nginx/sites-available/todo-kids
server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /path/to/todo-kids/client/build;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:5000;
        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;
    }
}
```

```bash
# Nginx-Konfiguration aktivieren
sudo ln -s /etc/nginx/sites-available/todo-kids /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx
```

## 🔒 SSL/HTTPS einrichten

### Let's Encrypt (Kostenlos)
```bash
# Certbot installieren
sudo apt install certbot python3-certbot-nginx -y

# SSL-Zertifikat erstellen
sudo certbot --nginx -d your-domain.com

# Auto-Renewal testen
sudo certbot renew --dry-run
```

## 📊 Monitoring & Logs

### PM2 Monitoring
```bash
# Status anzeigen
pm2 status

# Logs anzeigen
pm2 logs

# Restart
pm2 restart all

# Monitoring Dashboard
pm2 monit
```

### Heroku Logs
```bash
# Live-Logs
heroku logs --tail

# Letzte 100 Zeilen
heroku logs -n 100
```

## 🔧 Troubleshooting

### Häufige Probleme

#### Build-Fehler
```bash
# Node-Version prüfen
node --version
npm --version

# Cache leeren
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
```

#### Environment Variables
```bash
# Variablen prüfen
echo $NODE_ENV
echo $REACT_APP_API_URL

# Heroku Variablen
heroku config
```

#### Database-Verbindung
```bash
# MongoDB-Verbindung testen
mongo "your_connection_string"

# Logs prüfen
tail -f /var/log/mongodb/mongod.log
```

### Performance-Optimierung

#### Frontend
- Code-Splitting aktivieren
- Images optimieren
- Bundle-Größe analysieren: `npm run build -- --analyze`

#### Backend
- Database-Indizes erstellen
- Caching implementieren
- Compression aktivieren

## 📈 Skalierung

### Horizontal Scaling
- Load Balancer einrichten
- Multiple App-Instanzen
- Database-Clustering

### Vertical Scaling
- Server-Ressourcen erhöhen
- Database-Performance optimieren
- CDN für statische Assets

## 🔄 CI/CD Pipeline

### GitHub Actions
```yaml
# .github/workflows/deploy.yml
name: Deploy to Production

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '18'
        
    - name: Install dependencies
      run: |
        npm install
        cd client && npm install
        
    - name: Run tests
      run: |
        npm test
        cd client && npm test -- --coverage --watchAll=false
        
    - name: Build
      run: |
        cd client && npm run build
        
    - name: Deploy to Heroku
      uses: akhileshns/heroku-deploy@v3.12.12
      with:
        heroku_api_key: ${{secrets.HEROKU_API_KEY}}
        heroku_app_name: "todo-kids-app"
        heroku_email: "your-email@example.com"
```

---

**Viel Erfolg beim Deployment! 🚀**

Bei Fragen oder Problemen, erstelle gerne ein Issue im Repository.