Kundenbereich
NodeJS•15. Dezember 2025• 24 Aufrufe

Wie man eine Node.js-Webanwendung auf OuiPanel bereitstellt

Wie man eine Node.js-Webanwendung auf OuiPanel bereitstellt

Wie man eine Node.js-Webanwendung auf OuiPanel bereitstellt

Geschätzte Zeit: 15 Minuten
Schwierigkeit: Mittel ⭐⭐
Servertyp: Node.js

📋 Einführung

Dieser Leitfaden erklärt, wie man eine Node.js-Webanwendung (Website, REST-API, Dashboard usw.) auf OuiPanel mit einer benutzerdefinierten Domain und automatischem HTTPS hostet.

Was Sie hosten können

Anwendungstyp Beispiele
🌐 Website Showcase-Website, Blog, Portfolio
🔌 REST-API Backend für mobile/web-Anwendungen
📊 Dashboard Verwaltungspanel, Verwaltungsschnittstelle
🛒 Webanwendung E-Commerce, SaaS, Online-Tool

Was Sie benötigen

Voraussetzungen Beschreibung
📁 Node.js-Anwendung Ihr funktionsfähiger Quellcode
💻 Node.js-Server Auf OuiHeberg bestellt
🌐 Domainname (Optional) Für den Zugriff über benutzerdefinierte URL

📁 Schritt 1: Vorbereiten der Anwendungsdateien

Dateistruktur

Ihre Anwendung sollte diese Struktur haben:

📁 MeineApp/
├── 📄 index.js           ← Hauptdatei (oder app.js, server.js...)
├── 📄 package.json       ← npm-Abhängigkeiten
├── 📄 .env               ← Umgebungsvariablen (auf dem Server erstellt)
├── 📁 public/            ← (Optional) Statische Dateien (CSS, JS, Bilder)
├── 📁 views/             ← (Optional) Vorlagen (EJS, Pug, Handlebars)
└── 📁 routes/            ← (Optional) Anwendungswege

Datei package.json

Erstellen Sie eine package.json-Datei mit Ihren Abhängigkeiten:

{
  "name": "meine-webanwendung",
  "version": "1.0.0",
  "description": "Meine Node.js-Webanwendung",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "dotenv": "^16.3.1"
  }
}

💡 Passen Sie "main": "index.js" entsprechend dem Namen Ihrer Hauptdatei an (app.js, server.js usw.).

Hauptdatei (index.js)

Hier ist ein Beispiel für eine für OuiPanel konfigurierte Express.js-Anwendung:

// Umgebungsvariablen aus .env laden
require('dotenv').config();

const express = require('express');
const app = express();

// Port: verwendet SERVER_PORT (OuiPanel) oder PORT (.env) oder standardmäßig 3000
const PORT = process.env.SERVER_PORT || process.env.PORT || 3000;

// Middleware zum Parsen von JSON
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Statische Dateien (CSS, JS, Bilder) bereitstellen
app.use(express.static('public'));

// Hauptweg
app.get('/', (req, res) => {
    res.send(`
        <!DOCTYPE html>
        <html lang="fr">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Meine Anwendung</title>
            <style>
                body { font-family: Arial, sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; }
                h1 { color: #333; }
                .status { background: #d4edda; padding: 15px; border-radius: 5px; color: #155724; }
            </style>
        </head>
        <body>
            <h1>🚀 Meine Node.js-Anwendung</h1>
            <div>
                ✅ Die Anwendung funktioniert einwandfrei!
            </div>
            <p>Server gestartet auf Port ${PORT}</p>
        </body>
        </html>
    `);
});

// Beispiel-API-Weg
app.get('/api/status', (req, res) => {
    res.json({
        status: 'online',
        message: 'API funktioniert',
        timestamp: new Date().toISOString()
    });
});

// API-Weg mit Parameter
app.get('/api/hello/:name', (req, res) => {
    res.json({
        message: `Hallo ${req.params.name}!`
    });
});

// Server auf 0.0.0.0 starten (wichtig für OuiPanel)
app.listen(PORT, '0.0.0.0', () => {
    console.log(`✅ Server gestartet auf http://0.0.0.0:${PORT}`);
    console.log(`📅 ${new Date().toLocaleString('fr-FR')}`);
});

⚠️ WICHTIG: Der Server muss auf 0.0.0.0 (alle Schnittstellen), nicht auf localhost oder 127.0.0.1 hören.

Beispiel mit EJS-Vorlagen

Wenn Sie EJS-Vorlagen verwenden:

package.json:

{
  "name": "meine-webanwendung",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "ejs": "^3.1.9",
    "dotenv": "^16.3.1"
  }
}

index.js:

require('dotenv').config();

const express = require('express');
const app = express();
const PORT = process.env.SERVER_PORT || process.env.PORT || 3000;

// EJS-Konfiguration
app.set('view engine', 'ejs');
app.set('views', './views');

// Statische Dateien
app.use(express.static('public'));

// Hauptweg
app.get('/', (req, res) => {
    res.render('index', { 
        title: 'Meine Anwendung',
        message: 'Willkommen auf meiner Website!'
    });
});

app.listen(PORT, '0.0.0.0', () => {
    console.log(`✅ Server gestartet auf Port ${PORT}`);
});

views/index.ejs:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

📤 Schritt 2: Dateien auf OuiPanel hochladen

Über den Dateimanager

  1. Melden Sie sich bei OuiPanel an
  2. Wählen Sie Ihren Node.js-Server aus
  3. Klicken Sie im Seitenmenü auf Dateimanager

Bild

  1. Löschen Sie die Standarddateien (falls vorhanden)
  2. Klicken Sie auf Hochladen
  3. Laden Sie Ihre Dateien hoch:
    • index.js (oder app.js, server.js...)
    • package.json
    • Ihre Ordner (public/, views/, routes/...) falls erforderlich

Bild

⚠️ Nicht hochladen: Die Datei .env wird direkt auf dem Server erstellt (sicherer).

Über SFTP (Empfohlen für mehrere Dateien)

  1. Melden Sie sich mit FileZilla über SFTP an
  2. Ziehen Sie den gesamten Inhalt Ihres Anwendungsordners per Drag & Drop
  3. Überprüfen Sie, ob alle Dateien erfolgreich hochgeladen wurden

📖 Sehen Sie sich den Leitfaden "SFTP-Zugriff mit FileZilla" für detaillierte Anweisungen an.

🔑 Schritt 3: Erstellen der .env-Datei

Erstellen Sie eine Datei .env, um Ihre Umgebungsvariablen sicher zu speichern.

.env-Datei erstellen

  1. Im Dateimanager auf Neue Datei klicken
  2. Nennen Sie sie .env (mit Punkt davor)
  3. Fügen Sie Ihre Variablen hinzu:
# Anwendungs konfiguration
PORT=3000
NODE_ENV=production

# Datenbank (falls erforderlich)
DATABASE_URL=mysql://user:password@host:3306/database

# API-Schlüssel (Beispiele)
API_KEY=your_api_key
SECRET_KEY=your_secret_key

Bild

  1. Auf Erstellen oder Speichern klicken

💡 Tipp: Die Variable SERVER_PORT wird automatisch von OuiPanel bereitgestellt. Verwenden Sie sie vorrangig in Ihrem Code.

Endstruktur auf dem Server

📁 Serverroot/
├── 📄 .env               ← Umgebungsvariablen
├── 📄 index.js           ← Ihr Code
├── 📄 package.json       ← Abhängigkeiten
├── 📁 public/            ← Statische Dateien
├── 📁 views/             ← Vorlagen
└── 📁 node_modules/      ← (automatisch erstellt)

⚙️ Schritt 4: Konfigurieren der Startdatei

OuiPanel muss wissen, welche Datei beim Start ausgeführt werden soll.

Zugriff auf die Einstellungen

  1. Im Seitenmenü auf Konfiguration klicken
  2. Auf Servereinstellungen klicken

Bild

Datei zur Ausführung konfigurieren

Suchen Sie das Feld Ausführungsdatei (oder Hauptdatei / Startdatei):

Bild

Ihre Hauptdatei Zu verwendender Wert
index.js index.js
app.js app.js
server.js server.js
src/index.js src/index.js

⚠️ Wichtig: Der Name muss genau mit Ihrer Datei übereinstimmen (Groß- und Kleinschreibung beachten).

🚀 Schritt 5: Anwendung starten

Server starten

  1. Im Seitenmenü auf Konsole klicken
  2. Auf Start klicken

Automatische Installation von Abhängigkeiten

Beim ersten Start führt der Server automatisch npm install aus:

> npm install
added 62 packages in 4s

> node index.js
✅ Server läuft unter http://0.0.0.0:25639
📅 15/12/2025 14:30:00

[Bild

Screenshot erstellt mit der Konfiguration EJS

Anwendung testen

  1. Notieren Sie sich den in der Konsole angezeigten Port (z. B.: 25639)
  2. Holen Sie sich die IP Ihres Servers aus der Globalen Ansicht
  3. Öffnen Sie http://IP:PORT in Ihrem Browser

Beispiel: http://51.77.xxx.xxx:25639

BildBild

💡 Für einen einfacheren Zugriff mit einer Domain und HTTPS, konfigurieren Sie den Proxy Manager (nächster Schritt).

🌐 Schritt 6: Konfigurieren einer Domain (Proxy Manager)

Um auf Ihre Anwendung über eine saubere URL mit HTTPS zuzugreifen (z. B.: https://meineapp.com), verwenden Sie den Proxy Manager.

Voraussetzungen

  • ✅ Eine Domain, die Ihnen gehört
  • ✅ Zugriff auf die DNS-Zone Ihrer Domain

DNS konfigurieren

  1. In OuiPanel → Proxy Manager, notieren Sie sich die IP des Proxys
  2. Bei Ihrem Registrar (OVH, Cloudflare, etc.) erstellen Sie einen DNS-Eintrag:
Typ Name Wert
A @ oder app IP des Proxys

Domain zu OuiPanel hinzufügen

  1. Im Seitenmenü auf Proxy Manager klicken
  2. Auf Hinzufügen klicken
  3. Ausfüllen:
Feld Wert
Domainname meineapp.com oder app.meinedomain.fr
Port Der Port Ihrer Anwendung (z. B.: 25639)
SSL ✅ Aktiviert

Bild


Bild


Bild


Bild

  1. Auf Weiterleitung erstellen klicken

Ergebnis

Ihre Anwendung ist jetzt erreichbar unter:

  • ✅ https://meineapp.com (mit automatischem HTTPS)
  • ✅ Kostenloses SSL-Zertifikat (Let's Encrypt)

📖 Lesen Sie den Leitfaden "Konfigurieren einer Domain mit dem Proxy Manager" für weitere Details.

🔧 Fehlerbehebung

Die Anwendung startet nicht

❌ Fehler ✅ Lösung
Cannot find module 'express' Überprüfen Sie package.json und starten Sie neu
Cannot find module 'dotenv' Fügen Sie dotenv zu package.json hinzu
Error: Cannot find module './index.js' Falsche Startdatei konfiguriert
SyntaxError Fehler in Ihrem JavaScript-Code

Die Anwendung startet, ist aber nicht erreichbar

❌ Ursache ✅ Lösung
Hört auf localhost Ändern Sie auf 0.0.0.0
Falscher Port Verwenden Sie process.env.SERVER_PORT
Firewall Der Port muss dem von OuiPanel zugewiesenen entsprechen

Überprüfen Sie Ihren Code:

// ❌ FALSCH - nur lokal hören
app.listen(3000, 'localhost', () => {});
app.listen(3000, '127.0.0.1', () => {});

// ✅ RICHTIG - auf allen Schnittstellen hören
app.listen(PORT, '0.0.0.0', () => {});

Fehler 502 Bad Gateway (Proxy Manager)

❌ Ursache ✅ Lösung
Anwendung nicht gestartet Starten Sie den Server in OuiPanel
Falscher Port im Proxy Manager Überprüfen Sie den konfigurierten Port
Anwendung abgestürzt Überprüfen Sie die Konsole

Die Anwendung stürzt beim Start ab

❌ Ursache ✅ Lösung
Fehlende Umgebungsvariable Überprüfen Sie die Datei .env
Syntaxfehler Korrigieren Sie den Code
Fehlendes Paket Überprüfen Sie package.json

Fügen Sie eine Fehlerbehandlung hinzu:

// Behandlung von unerfassten Fehlern
process.on('uncaughtException', (error) => {
    console.error('Unerfasster Fehler:', error);
});

process.on('unhandledRejection', (error) => {
    console.error('Abgelehntes Versprechen:', error);
});

npm install fehlgeschlagen

❌ Fehler ✅ Lösung
package.json not found Stellen Sie sicher, dass die Datei im Stammverzeichnis liegt
ERESOLVE unable to resolve Aktualisieren Sie die Versionen in package.json

🔒 Sicherheit

Datei .env

✅ Zu tun ❌ Nicht zu tun
Erstellen Sie die .env auf dem Server Laden Sie die .env von Ihrem PC hoch
Fügen Sie .env zur .gitignore hinzu Commiten Sie die .env auf GitHub
Verwenden Sie Variablen für Geheimnisse Legen Sie API-Schlüssel im Code ab

Empfohlene .gitignore-Datei:

# Umgebungsvariablen
.env
.env.local
.env.production

# Node-Module
node_modules/

Sicherheitsbewusste Best Practices

const helmet = require('helmet');  // HTTP-Sicherheit
const rateLimit = require('express-rate-limit');  // Schutz vor DDoS

// Hinzufügen in package.json: "helmet": "^7.1.0", "express-rate-limit": "^7.1.5"

app.use(helmet());

const limiter = rateLimit({
    windowMs: 15 * 60 * 1000, // 15 Minuten
    max: 100 // Maximal 100 Anfragen pro IP
});
app.use(limiter);

💡 Best Practices

Leistung

  • ✅ Verwenden Sie NODE_ENV=production in der Produktion
  • ✅ Aktivieren Sie die Komprimierung mit compression
  • ✅ Cachen Sie statische Dateien
const compression = require('compression');
app.use(compression());

// Cache für statische Dateien (1 Tag)
app.use(express.static('public', { maxAge: '1d' }));

Fortgeschrittene Struktur

Für eine komplexere Anwendung:

📁 MeineApp/
├── 📄 index.js              ← Einstiegspunkt
├── 📄 package.json
├── 📄 .env
├── 📁 config/
│   └── 📄 database.js       ← DB-Konfiguration
├── 📁 routes/
│   ├── 📄 index.js          ← Haupt-Routen
│   ├── 📄 api.js            ← API-Routen
│   └── 📄 auth.js           ← Authentifizierungs-Routen
├── 📁 controllers/
│   └── 📄 userController.js
├── 📁 models/
│   └── 📄 User.js
├── 📁 middleware/
│   └── 📄 auth.js
├── 📁 public/
│   ├── 📁 css/
│   ├── 📁 js/
│   └── 📁 images/
└── 📁 views/
    ├── 📄 index.ejs
    └── 📄 layout.ejs

📦 Unterstützte Frameworks

OuiPanel unterstützt alle Node.js-Frameworks:

Framework Beschreibung
Express.js Minimalistisches Framework (verwendet in diesem Leitfaden)
Fastify Schnelle Alternative zu Express
Koa Leichtgewichtiges Framework vom Express-Team
NestJS Strukturiertes TypeScript-Framework
Next.js React-Framework mit SSR
Nuxt.js Vue.js-Framework mit SSR

💡 Das Prinzip bleibt dasselbe: Auf 0.0.0.0 mit dem von OuiPanel bereitgestellten Port hören.

📝 Zusammenfassung

1. Dateien vorbereiten (index.js + package.json mit dotenv)
2. Stellen Sie sicher, dass der Server auf 0.0.0.0:PORT hört
3. Laden Sie die Dateien auf OuiPanel hoch (ohne die .env-Datei)
4. Erstellen Sie die .env-Datei auf dem Server
5. Konfigurieren Sie die Startdatei (index.js, app.js...)
6. Starten Sie den Server
7. Testen Sie über http://IP:PORT
8. (Optional) Konfigurieren Sie den Proxy Manager für eine Domain mit HTTPS
Zurück zur Dokumentation