Serveurs de jeux & OuiPanel•15 décembre 2025• 6 vues

Comment déployer une application web Node.js sur OuiPanel

Comment déployer une application web Node.js sur OuiPanel

Comment déployer une application web Node.js sur OuiPanel

Temps estimé : 15 minutes
Difficulté : Intermédiaire ⭐⭐
Type de serveur : Node.js

📋 Introduction

Ce guide vous explique comment héberger une application web Node.js (site web, API REST, dashboard...) sur OuiPanel avec un nom de domaine personnalisé et HTTPS automatique.

Ce que vous pouvez héberger

Type d'application Exemples
🌐 Site web Site vitrine, blog, portfolio
🔌 API REST Backend pour application mobile/web
📊 Dashboard Panel d'administration, interface de gestion
🛒 Application web E-commerce, SaaS, outil en ligne

Ce dont vous avez besoin

Prérequis Description
📁 Une application Node.js Votre code source fonctionnel
💻 Un serveur Node.js Commandé sur OuiHeberg
🌐 Un nom de domaine (Optionnel) Pour un accès via URL personnalisée

📁 Étape 1 : Préparer les Fichiers de l'Application

Structure des fichiers

Votre application doit avoir cette structure :

📁 MonApp/
├── 📄 index.js           ← Fichier principal (ou app.js, server.js...)
├── 📄 package.json       ← Dépendances npm
├── 📄 .env               ← Variables d'environnement (créé sur le serveur)
├── 📁 public/            ← (Optionnel) Fichiers statiques (CSS, JS, images)
├── 📁 views/             ← (Optionnel) Templates (EJS, Pug, Handlebars)
└── 📁 routes/            ← (Optionnel) Routes de l'application

Fichier package.json

Créez un fichier package.json avec vos dépendances :

{
  "name": "mon-application-web",
  "version": "1.0.0",
  "description": "Mon application web Node.js",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "dotenv": "^16.3.1"
  }
}

💡 Adaptez "main": "index.js" selon le nom de votre fichier principal (app.js, server.js, etc.).

Fichier principal (index.js)

Voici un exemple d'application Express.js configurée pour OuiPanel :

// Charger les variables d'environnement depuis .env
require('dotenv').config();

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

// Port : utilise SERVER_PORT (OuiPanel) ou PORT (.env) ou 3000 par défaut
const PORT = process.env.SERVER_PORT || process.env.PORT || 3000;

// Middleware pour parser le JSON
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Servir les fichiers statiques (CSS, JS, images)
app.use(express.static('public'));

// Route principale
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>Mon Application</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>🚀 Mon Application Node.js</h1>
            <div>
                ✅ L'application fonctionne correctement !
            </div>
            <p>Serveur démarré sur le port ${PORT}</p>
        </body>
        </html>
    `);
});

// Route API exemple
app.get('/api/status', (req, res) => {
    res.json({
        status: 'online',
        message: 'API fonctionnelle',
        timestamp: new Date().toISOString()
    });
});

// Route API avec paramètre
app.get('/api/hello/:name', (req, res) => {
    res.json({
        message: `Bonjour ${req.params.name} !`
    });
});

// Démarrer le serveur sur 0.0.0.0 (important pour OuiPanel)
app.listen(PORT, '0.0.0.0', () => {
    console.log(`✅ Serveur démarré sur http://0.0.0.0:${PORT}`);
    console.log(`📅 ${new Date().toLocaleString('fr-FR')}`);
});

⚠️ IMPORTANT : Le serveur doit écouter sur 0.0.0.0 (toutes les interfaces), pas sur localhost ou 127.0.0.1.

Exemple avec templates EJS

Si vous utilisez des templates EJS :

package.json :

{
  "name": "mon-application-web",
  "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;

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

// Fichiers statiques
app.use(express.static('public'));

// Route principale
app.get('/', (req, res) => {
    res.render('index', { 
        title: 'Mon Application',
        message: 'Bienvenue sur mon site !'
    });
});

app.listen(PORT, '0.0.0.0', () => {
    console.log(`✅ Serveur démarré sur le 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>

📤 Étape 2 : Uploader les Fichiers sur OuiPanel

Via le Gestionnaire de Fichiers

  1. Connectez-vous à OuiPanel
  2. Sélectionnez votre serveur Node.js
  3. Dans le menu latéral, cliquez sur Gestionnaire de fichiers

Image

  1. Supprimez les fichiers par défaut (s'il y en a)
  2. Cliquez sur Envoyer (Upload)
  3. Uploadez vos fichiers :
    • index.js (ou app.js, server.js...)
    • package.json
    • Vos dossiers (public/, views/, routes/...) si nécessaire

Image

⚠️ Ne pas uploader : Le fichier .env sera créé directement sur le serveur (plus sécurisé).

Via SFTP (Recommandé pour plusieurs fichiers)

  1. Connectez-vous en SFTP avec FileZilla
  2. Glissez-déposez tout le contenu de votre dossier application
  3. Vérifiez que tous les fichiers sont bien uploadés

📖 Consultez le guide "Accès SFTP avec FileZilla" pour les instructions détaillées.

🔑 Étape 3 : Créer le Fichier .env

Créez un fichier .env pour stocker vos variables d'environnement de manière sécurisée.

Créer le fichier .env

  1. Dans le Gestionnaire de fichiers, cliquez sur Nouveau fichier
  2. Nommez-le .env (avec le point devant)
  3. Ajoutez vos variables :
# Configuration de l'application
PORT=3000
NODE_ENV=production

# Base de données (si nécessaire)
DATABASE_URL=mysql://user:password@host:3306/database

# Clés API (exemples)
API_KEY=votre_cle_api
SECRET_KEY=votre_cle_secrete

Image

  1. Cliquez sur Créer ou Enregistrer

💡 Astuce : La variable SERVER_PORT est automatiquement fournie par OuiPanel. Utilisez-la en priorité dans votre code.

Structure finale sur le serveur

📁 Racine du serveur/
├── 📄 .env               ← Variables d'environnement
├── 📄 index.js           ← Votre code
├── 📄 package.json       ← Dépendances
├── 📁 public/            ← Fichiers statiques
├── 📁 views/             ← Templates
└── 📁 node_modules/      ← (créé automatiquement)

⚙️ Étape 4 : Configurer le Fichier de Démarrage

OuiPanel doit savoir quel fichier exécuter au démarrage.

Accéder aux paramètres

  1. Dans le menu latéral, cliquez sur Configuration
  2. Cliquez sur Paramètres du serveur

Image

Configurer le fichier à exécuter

Repérez le champ Fichier à exécuter (ou Main File / Startup File) :

Image

Votre fichier principal Valeur à mettre
index.js index.js
app.js app.js
server.js server.js
src/index.js src/index.js

⚠️ Important : Le nom doit correspondre exactement à votre fichier (sensible à la casse).

🚀 Étape 5 : Démarrer l'Application

Lancer le serveur

  1. Dans le menu latéral, cliquez sur Console
  2. Cliquez sur Démarrer

Installation automatique des dépendances

Au premier démarrage, le serveur exécute automatiquement npm install :

> npm install
added 62 packages in 4s

> node index.js
✅ Serveur démarré sur http://0.0.0.0:25639
📅 15/12/2025 14:30:00

[Image

Capture d'écran réalisé avec la configuration EJS

Tester l'application

  1. Notez le port affiché dans la console (ex: 25639)
  2. Récupérez l'IP de votre serveur dans la Vue Globale
  3. Accédez à http://IP:PORT dans votre navigateur

Exemple : http://51.77.xxx.xxx:25639

ImageImage

💡 Pour un accès plus simple avec un nom de domaine et HTTPS, configurez le Proxy Manager (étape suivante).

🌐 Étape 6 : Configurer un Nom de Domaine (Proxy Manager)

Pour accéder à votre application via une URL propre avec HTTPS (ex: https://monapp.com), utilisez le Proxy Manager.

Prérequis

  • ✅ Un nom de domaine que vous possédez
  • ✅ Accès à la zone DNS de votre domaine

Configurer le DNS

  1. Dans OuiPanel → Proxy Manager, notez l'IP du Proxy
  2. Chez votre registrar (OVH, Cloudflare, etc.), créez un enregistrement DNS :
Type Nom Valeur
A @ ou app IP du Proxy

Ajouter le domaine dans OuiPanel

  1. Dans le menu latéral, cliquez sur Proxy Manager
  2. Cliquez sur Ajouter
  3. Remplissez :
Champ Valeur
Nom de domaine monapp.com ou app.mondomaine.fr
Port Le port de votre application (ex: 25639)
SSL ✅ Activé

Image


Image


Image


Image

  1. Cliquez sur Créer la redirection

Résultat

Votre application est maintenant accessible via :

  • ✅ https://monapp.com (avec HTTPS automatique)
  • ✅ Certificat SSL gratuit (Let's Encrypt)

📖 Consultez le guide "Configurer un Nom de Domaine avec le Proxy Manager" pour plus de détails.

🔧 Dépannage

L'application ne démarre pas

❌ Erreur ✅ Solution
Cannot find module 'express' Vérifiez package.json et redémarrez
Cannot find module 'dotenv' Ajoutez dotenv dans package.json
Error: Cannot find module './index.js' Mauvais fichier de démarrage configuré
SyntaxError Erreur dans votre code JavaScript

L'application démarre mais n'est pas accessible

❌ Cause ✅ Solution
Écoute sur localhost Changez pour 0.0.0.0
Mauvais port Utilisez process.env.SERVER_PORT
Firewall Le port doit être celui assigné par OuiPanel

Vérifiez votre code :

// ❌ MAUVAIS - écoute uniquement en local
app.listen(3000, 'localhost', () => {});
app.listen(3000, '127.0.0.1', () => {});

// ✅ BON - écoute sur toutes les interfaces
app.listen(PORT, '0.0.0.0', () => {});

Erreur 502 Bad Gateway (Proxy Manager)

❌ Cause ✅ Solution
Application non démarrée Démarrez le serveur dans OuiPanel
Mauvais port dans Proxy Manager Vérifiez le port configuré
Application crashée Consultez la Console

L'application crash au démarrage

❌ Cause ✅ Solution
Variable d'environnement manquante Vérifiez le fichier .env
Erreur de syntaxe Corrigez le code
Package manquant Vérifiez package.json

Ajoutez une gestion d'erreurs :

// Gestion des erreurs non capturées
process.on('uncaughtException', (error) => {
    console.error('Erreur non capturée:', error);
});

process.on('unhandledRejection', (error) => {
    console.error('Promesse rejetée:', error);
});

npm install échoue

❌ Erreur ✅ Solution
package.json not found Vérifiez que le fichier est à la racine
ERESOLVE unable to resolve Mettez à jour les versions dans package.json

🔒 Sécurité

Fichier .env

✅ À faire ❌ À ne pas faire
Créer le .env sur le serveur Uploader le .env depuis votre PC
Ajouter .env au .gitignore Commit le .env sur GitHub
Utiliser des variables pour les secrets Mettre les clés API dans le code

Fichier .gitignore recommandé :

# Variables d'environnement
.env
.env.local
.env.production

# Node modules
node_modules/

Bonnes pratiques de sécurité

const helmet = require('helmet');  // Sécurité HTTP
const rateLimit = require('express-rate-limit');  // Anti-DDoS

// Ajouter dans package.json : "helmet": "^7.1.0", "express-rate-limit": "^7.1.5"

app.use(helmet());

const limiter = rateLimit({
    windowMs: 15 * 60 * 1000, // 15 minutes
    max: 100 // 100 requêtes max par IP
});
app.use(limiter);

💡 Bonnes Pratiques

Performance

  • ✅ Utilisez NODE_ENV=production en production
  • ✅ Activez la compression avec compression
  • ✅ Mettez en cache les fichiers statiques
const compression = require('compression');
app.use(compression());

// Cache des fichiers statiques (1 jour)
app.use(express.static('public', { maxAge: '1d' }));

Structure avancée

Pour une application plus complexe :

📁 MonApp/
├── 📄 index.js              ← Point d'entrée
├── 📄 package.json
├── 📄 .env
├── 📁 config/
│   └── 📄 database.js       ← Configuration BDD
├── 📁 routes/
│   ├── 📄 index.js          ← Routes principales
│   ├── 📄 api.js            ← Routes API
│   └── 📄 auth.js           ← Routes authentification
├── 📁 controllers/
│   └── 📄 userController.js
├── 📁 models/
│   └── 📄 User.js
├── 📁 middleware/
│   └── 📄 auth.js
├── 📁 public/
│   ├── 📁 css/
│   ├── 📁 js/
│   └── 📁 images/
└── 📁 views/
    ├── 📄 index.ejs
    └── 📄 layout.ejs

📦 Frameworks Supportés

OuiPanel supporte tous les frameworks Node.js :

Framework Description
Express.js Framework minimaliste (utilisé dans ce guide)
Fastify Alternative rapide à Express
Koa Framework léger par l'équipe d'Express
NestJS Framework TypeScript structuré
Next.js Framework React avec SSR
Nuxt.js Framework Vue.js avec SSR

💡 Le principe reste le même : écouter sur 0.0.0.0 avec le port fourni par OuiPanel.

📝 Récapitulatif

1. Préparer les fichiers (index.js + package.json avec dotenv)
2. S'assurer que le serveur écoute sur 0.0.0.0:PORT
3. Uploader les fichiers sur OuiPanel (sans le .env)
4. Créer le fichier .env sur le serveur
5. Configurer le fichier de démarrage (index.js, app.js...)
6. Démarrer le serveur
7. Tester via http://IP:PORT
8. (Optionnel) Configurer le Proxy Manager pour un domaine avec HTTPS
Retour à la documentation