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

# 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

# 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

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

# Heroku Login
heroku login

# App erstellen
heroku create todo-kids-app

Environment Variables setzen

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

# 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

# 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

# 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:

# .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

# 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

# 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

# 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

# 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

# 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

# /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;
    }
}

# 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)

# 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

# Status anzeigen
pm2 status

# Logs anzeigen
pm2 logs

# Restart
pm2 restart all

# Monitoring Dashboard
pm2 monit

Heroku Logs

# Live-Logs
heroku logs --tail

# Letzte 100 Zeilen
heroku logs -n 100

🔧 Troubleshooting

Häufige Probleme

Build-Fehler

# 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

# Variablen prüfen
echo $NODE_ENV
echo $REACT_APP_API_URL

# Heroku Variablen
heroku config

Database-Verbindung

# 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

# .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.