"feat: Implement SSL configuration for frontend and backend"

frontend/configure_ssl.js

@@ -17,12 +17,29 @@ const NEXT_CONFIG_PATH = path.join(__dirname, 'next.config.js');
 
 console.log('=== Frontend-SSL-Konfiguration ===');
 
-// Prüfen, ob SSL-Verzeichnis und Zertifikate existieren
-if (!fs.existsSync(SSL_DIR) || 
-    !fs.existsSync(path.join(SSL_DIR, 'myp.crt')) || 
-    !fs.existsSync(path.join(SSL_DIR, 'myp.key'))) {
-    console.error('SSL-Zertifikate nicht gefunden. Bitte zuerst das Backend-Skript ausführen.');
-    process.exit(1);
+// Verzeichnis erstellen, falls es nicht existiert
+if (!fs.existsSync(SSL_DIR)) {
+    console.log(`SSL-Verzeichnis wird erstellt: ${SSL_DIR}`);
+    fs.mkdirSync(SSL_DIR, { recursive: true });
+}
+
+// Prüfen, ob SSL-Zertifikate existieren
+if (!fs.existsSync(path.join(SSL_DIR, 'myp.crt')) || !fs.existsSync(path.join(SSL_DIR, 'myp.key'))) {
+    console.log('SSL-Zertifikate nicht gefunden. Prüfe Backend-Verzeichnis...');
+    
+    // Versuche, die Zertifikate aus dem Backend zu kopieren
+    const backendCertPath = path.join('..', 'backend', 'app', 'instance', 'ssl', 'myp.crt');
+    const backendKeyPath = path.join('..', 'backend', 'app', 'instance', 'ssl', 'myp.key');
+    
+    if (fs.existsSync(backendCertPath) && fs.existsSync(backendKeyPath)) {
+        console.log('Zertifikate im Backend-Verzeichnis gefunden. Kopiere...');
+        fs.copyFileSync(backendCertPath, path.join(SSL_DIR, 'myp.crt'));
+        fs.copyFileSync(backendKeyPath, path.join(SSL_DIR, 'myp.key'));
+        console.log('Zertifikate erfolgreich in das Frontend-Verzeichnis kopiert.');
+    } else {
+        console.error('SSL-Zertifikate nicht gefunden. Bitte zuerst das Backend-Skript ausführen.');
+        process.exit(1);
+    }
 }
 
 console.log('SSL-Zertifikate gefunden. Konfiguriere Frontend...');

frontend/next.config.js

@@ -0,0 +1,36 @@
+
+/** @type {import('next').NextConfig} */
+const fs = require('fs');
+const path = require('path');
+
+const nextConfig = {
+  reactStrictMode: true,
+  webpack: (config) => {
+    return config;
+  },
+  // HTTPS-Konfiguration für die Entwicklung
+  devServer: {
+    https: {
+      key: fs.readFileSync(path.resolve(__dirname, 'ssl/myp.key')),
+      cert: fs.readFileSync(path.resolve(__dirname, 'ssl/myp.crt')),
+    },
+  },
+  // Konfiguration für selbstsignierte Zertifikate
+  serverOptions: {
+    https: {
+      key: fs.readFileSync(path.resolve(__dirname, 'ssl/myp.key')),
+      cert: fs.readFileSync(path.resolve(__dirname, 'ssl/myp.crt')),
+    },
+  },
+  // Zusätzliche Konfigurationen
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'https://raspberrypi:443/api/:path*',
+      },
+    ]
+  }
+};
+
+module.exports = nextConfig;

frontend/package.json

@@ -75,6 +75,7 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "drizzle-kit": "^0.21.4",
+    "https-localhost": "^4.7.1",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13",
     "ts-node": "^10.9.2",

frontend/src/utils/api-config.ts

@@ -1,3 +1,6 @@
+// SSL-Verbindungen akzeptieren (selbstsignierte Zertifikate)
+process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
+
 // Basis-URL für Backend-API
 // Versucht verschiedene Verbindungsoptionen mit Fallbacks
 const getApiBaseUrl = () => {