123 lines
3.0 KiB
Markdown
123 lines
3.0 KiB
Markdown
# Production Deployment Guide
|
|
|
|
## Schritt 1: Environment Variable setzen
|
|
|
|
1. Erstelle `.env.production` Datei:
|
|
```env
|
|
VITE_API_URL=https://dein-produktions-server.com/intern/sofue/php/sofueDB.php
|
|
```
|
|
|
|
2. Oder setze die Environment Variable direkt beim Build:
|
|
```bash
|
|
VITE_API_URL=https://dein-server.com/api npm run build:prod
|
|
```
|
|
|
|
## Schritt 2: Production Build erstellen
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
# 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)
|
|
```apache
|
|
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
|
|
```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
|
|
<?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:
|
|
```bash
|
|
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 |