beoanswer_react/DEPLOYMENT.md

Production Deployment Guide

Schritt 1: Environment Variable setzen

1. Erstelle .env.production Datei:

VITE_API_URL=https://dein-produktions-server.com/intern/sofue/php/sofueDB.php

2. Oder setze die Environment Variable direkt beim Build:

VITE_API_URL=https://dein-server.com/api npm run build:prod

Schritt 2: Production Build erstellen

# Mit .env.production Datei
npm run build:prod

# Oder mit direkter Environment Variable
VITE_API_URL=https://dein-server.com/api npm run build

Schritt 3: Build-Output deployen

Die generierten Dateien im dist/ Ordner auf deinen Webserver kopieren:

# Lokaler Build
npm run build:prod

# Upload auf Server (Beispiel mit rsync)
rsync -avz dist/ user@dein-server.com:/var/www/html/beoanswer/

# Oder mit scp
scp -r dist/* user@dein-server.com:/var/www/html/beoanswer/

Schritt 4: Webserver Konfiguration

Apache (.htaccess)

RewriteEngine On
RewriteBase /beoanswer/

# Handle Angular and other front-end routes
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /beoanswer/index.html [L]

# CORS Headers (falls nötig)
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type"

Nginx

location /beoanswer/ {
    try_files $uri $uri/ /beoanswer/index.html;
    
    # CORS Headers (falls nötig)
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'Content-Type';
}

Schritt 5: PHP Backend CORS

Falls nötig, füge in sofueDB.php hinzu:

<?php
// CORS Headers für Production und Development
if (isset($_SERVER['HTTP_ORIGIN'])) {
    $allowed_origins = [
        'https://deine-frontend-domain.com',  // Production
        'http://localhost:5173',              // Vite Development
        'http://localhost:3000',              // Alternative Port
        'http://127.0.0.1:5173'              // Localhost als IP
    ];
    
    if (in_array($_SERVER['HTTP_ORIGIN'], $allowed_origins)) {
        header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
    }
} else {
    // Fallback für direkte Server-zu-Server Anfragen
    header("Access-Control-Allow-Origin: *");
}

header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Access-Control-Allow-Credentials: true");

// Handle preflight requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(200);
    exit();
}

// Rest des PHP Codes...
?>

Schritt 6: Testen

1. Lokaler Test des Production Builds:

npm run preview:prod

2. Live-Test mit echter URL:

https://dein-server.com/beoanswer/?id=123

Troubleshooting

• CORS Fehler: Backend CORS Headers prüfen
• 404 Fehler: Webserver Routing konfigurieren
• API Fehler: Environment Variable und Backend-URL prüfen
• Asset Loading: Base URL in Vite Config setzen falls nötig