secubox-openwrt/luci-app-secubox-bonus/htdocs/luci-static/secubox/blog/bandwidth-manager-guide.html
CyberMind-FR 086e62584e feat: add luci-app-secubox-bonus package with website content
Created new independent package to integrate SecuBox marketing and
documentation website. Includes demo pages, tutorials, and multi-language
content previously deployed separately.

Package contents:
- 36 static files (HTML, JS, JSON)
- 16 module demo pages (auth, bandwidth, cdn-cache, client-guardian, etc.)
- 3 blog tutorials (setup guides)
- 13 language translations (en, fr, de, es, pt, it, nl, ru, ar, zh, ja, ko, hi)
- Campaign and landing pages

Files accessible at: /luci-static/secubox/
Main URL: http://router-ip/luci-static/secubox/index.html

Package info:
- Version: 0.1.0-1
- Size: ~500KB
- Dependencies: luci-base only
- No RPCD/backend components

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-31 12:12:55 +01:00

346 lines
15 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optimiser sa bande passante avec Bandwidth Manager | CyberMind Blog</title>
<meta name="description" content="Guide complet pour configurer QoS, quotas et détection automatique des médias sur OpenWrt avec le module SecuBox Bandwidth Manager.">
<style>
:root { --primary: #6366f1; --dark: #0f172a; --darker: #020617; --card: #1e293b; --text: #f1f5f9; --text-muted: #94a3b8; --border: #334155; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Georgia', serif; background: var(--darker); color: var(--text); line-height: 1.8; }
.header { background: var(--dark); border-bottom: 1px solid var(--border); padding: 20px 0; }
.header-inner { max-width: 800px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: system-ui, sans-serif; font-weight: 700; font-size: 20px; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.nav a { color: var(--text-muted); text-decoration: none; margin-left: 24px; font-family: system-ui, sans-serif; font-size: 14px; }
.nav a:hover { color: var(--primary); }
.hero { background: linear-gradient(135deg, #7c3aed, #a855f7); padding: 80px 24px; text-align: center; }
.hero-inner { max-width: 800px; margin: 0 auto; }
.hero-tag { display: inline-block; background: rgba(255,255,255,0.2); padding: 6px 16px; border-radius: 50px; font-size: 14px; margin-bottom: 20px; font-family: system-ui, sans-serif; }
.hero h1 { font-size: 42px; line-height: 1.2; margin-bottom: 16px; }
.hero-meta { opacity: 0.9; font-size: 16px; font-family: system-ui, sans-serif; }
.content { max-width: 800px; margin: 0 auto; padding: 60px 24px; }
h2 { font-size: 28px; margin: 48px 0 24px; color: var(--text); font-family: system-ui, sans-serif; }
h3 { font-size: 22px; margin: 32px 0 16px; color: var(--text); font-family: system-ui, sans-serif; }
p { margin-bottom: 24px; color: var(--text-muted); }
.lead { font-size: 20px; color: var(--text); margin-bottom: 32px; }
ul, ol { margin: 0 0 24px 24px; color: var(--text-muted); }
li { margin-bottom: 12px; }
code { background: var(--card); padding: 2px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 14px; color: #a855f7; }
pre { background: var(--card); padding: 24px; border-radius: 12px; overflow-x: auto; margin: 24px 0; border: 1px solid var(--border); }
pre code { background: none; padding: 0; color: var(--text); }
.info-box { background: rgba(99, 102, 241, 0.1); border-left: 4px solid var(--primary); padding: 20px 24px; border-radius: 0 12px 12px 0; margin: 32px 0; }
.info-box p { margin: 0; color: var(--text); }
.warning-box { background: rgba(245, 158, 11, 0.1); border-left: 4px solid #f59e0b; padding: 20px 24px; border-radius: 0 12px 12px 0; margin: 32px 0; }
.warning-box p { margin: 0; color: var(--text); }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 32px 0; }
.feature-card { background: var(--card); padding: 24px; border-radius: 12px; border: 1px solid var(--border); }
.feature-card h4 { font-family: system-ui, sans-serif; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.feature-card p { margin: 0; font-size: 14px; }
.cta-box { background: linear-gradient(135deg, #7c3aed, #a855f7); padding: 40px; border-radius: 16px; text-align: center; margin: 48px 0; }
.cta-box h3 { color: white; margin-bottom: 16px; font-family: system-ui, sans-serif; }
.cta-box p { color: rgba(255,255,255,0.9); margin-bottom: 24px; }
.cta-btn { display: inline-block; background: white; color: #7c3aed; padding: 14px 32px; border-radius: 10px; text-decoration: none; font-family: system-ui, sans-serif; font-weight: 600; }
.toc { background: var(--card); padding: 24px; border-radius: 12px; margin: 32px 0; }
.toc h4 { font-family: system-ui, sans-serif; margin-bottom: 16px; }
.toc ul { list-style: none; margin: 0; }
.toc li { margin-bottom: 8px; }
.toc a { color: var(--primary); text-decoration: none; font-family: system-ui, sans-serif; font-size: 14px; }
img { max-width: 100%; border-radius: 12px; margin: 24px 0; }
.footer { background: var(--dark); border-top: 1px solid var(--border); padding: 40px 24px; text-align: center; }
.footer p { color: var(--text-muted); font-family: system-ui, sans-serif; font-size: 14px; margin: 0; }
@media (max-width: 768px) { .feature-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 32px; } }
</style>
</head>
<body>
<header class="header">
<div class="header-inner">
<a href="https://cybermind.fr" class="logo">🧠 CyberMind</a>
<nav class="nav">
<a href="https://cybermind.fr/blog">Blog</a>
<a href="../index.html" class="back-link" data-i18n="demo.backToMain">← Retour à l'accueil</a>
<a href="https://github.com/cybermind-fr">GitHub</a>
</nav>
</div>
</header>
<div class="hero">
<div class="hero-inner">
<span class="hero-tag">📚 Tutorial</span>
<h1>Optimiser sa bande passante avec Bandwidth Manager</h1>
<p class="hero-meta">Par Gandalf • 22 décembre 2024 • 12 min de lecture</p>
</div>
</div>
<article class="content">
<p class="lead">
Votre connexion rame pendant que quelqu'un regarde Netflix ? Les jeux en ligne lag quand un téléchargement est en cours ?
Le module <strong>Bandwidth Manager</strong> de SecuBox résout ces problèmes avec une gestion intelligente de la QoS,
des quotas et une détection automatique des types de trafic.
</p>
<div class="toc">
<h4>📑 Table des matières</h4>
<ul>
<li><a href="#introduction">1. Introduction à la QoS</a></li>
<li><a href="#installation">2. Installation</a></li>
<li><a href="#classes">3. Configuration des classes QoS</a></li>
<li><a href="#quotas">4. Gestion des quotas</a></li>
<li><a href="#media">5. Détection automatique des médias</a></li>
<li><a href="#schedules">6. Planification horaire</a></li>
<li><a href="#avance">7. Configuration avancée</a></li>
</ul>
</div>
<h2 id="introduction">1. Introduction à la QoS</h2>
<p>
La <strong>Quality of Service (QoS)</strong> permet de prioriser certains types de trafic sur votre réseau.
Sans QoS, tous les paquets sont traités de la même manière : un téléchargement massif peut donc
monopoliser toute la bande passante et rendre les appels vidéo inutilisables.
</p>
<p>
Bandwidth Manager utilise <strong>CAKE</strong> (Common Applications Kept Enhanced), le qdisc le plus moderne
et efficace disponible sur Linux. Il gère automatiquement le bufferbloat et offre une distribution
équitable de la bande passante.
</p>
<div class="feature-grid">
<div class="feature-card">
<h4>⚡ Priorité temps réel</h4>
<p>VoIP et gaming toujours fluides, même sous charge maximale.</p>
</div>
<div class="feature-card">
<h4>📊 8 classes de priorité</h4>
<p>Classification fine du trafic selon vos besoins.</p>
</div>
<div class="feature-card">
<h4>🎯 Détection automatique</h4>
<p>Netflix, YouTube, Zoom identifiés automatiquement.</p>
</div>
<div class="feature-card">
<h4>📉 Quotas intelligents</h4>
<p>Limites journalières/mensuelles avec throttling.</p>
</div>
</div>
<h2 id="installation">2. Installation</h2>
<p>Installez le module via opkg :</p>
<pre><code># Mise à jour des paquets
opkg update
# Installation du module
opkg install luci-app-bandwidth-manager
# Dépendances (installées automatiquement)
# - kmod-sched-cake
# - kmod-sched-fq-codel
# - tc
# Redémarrer les services
/etc/init.d/rpcd reload</code></pre>
<p>Accédez ensuite à l'interface via <code>LuCI → Network → Bandwidth Manager</code>.</p>
<h2 id="classes">3. Configuration des classes QoS</h2>
<p>
Bandwidth Manager propose 8 classes de priorité préconfigurées. Chaque classe a un pourcentage
garanti (rate) et un maximum autorisé (ceil) :
</p>
<pre><code># /etc/config/bandwidth
config class 'realtime'
option name 'Real-time'
option priority '1'
option rate '30' # 30% garanti
option ceil '100' # Peut utiliser jusqu'à 100%
option description 'VoIP, Video calls'
config class 'interactive'
option name 'Interactive'
option priority '2'
option rate '20'
option ceil '100'
option description 'Gaming, SSH, DNS'
config class 'streaming'
option name 'Streaming'
option priority '3'
option rate '20'
option ceil '90'
option description 'Netflix, YouTube'
config class 'bulk'
option name 'Bulk'
option priority '6'
option rate '5'
option ceil '50'
option description 'P2P, Backups'</code></pre>
<div class="info-box">
<p>💡 <strong>Conseil :</strong> La somme des rates ne doit pas dépasser 100%. Les classes de haute priorité
peuvent emprunter la bande passante non utilisée par les classes inférieures.</p>
</div>
<h2 id="quotas">4. Gestion des quotas</h2>
<p>
Les quotas permettent de limiter la consommation par client ou par groupe. Quand le quota est atteint,
vous pouvez choisir de throttler (réduire la vitesse) ou bloquer complètement l'accès.
</p>
<pre><code>config quota 'kids_devices'
option daily_limit '5000' # 5 GB par jour
option monthly_limit '100000' # 100 GB par mois
option throttle_speed '1000' # 1 Mbps après dépassement
option action 'throttle' # ou 'block'
list mac 'AA:BB:CC:DD:EE:01'
list mac 'AA:BB:CC:DD:EE:02'</code></pre>
<p>Cas d'usage typiques :</p>
<ul>
<li><strong>Appareils des enfants</strong> : quota journalier pour encourager la modération</li>
<li><strong>Invités WiFi</strong> : limite mensuelle pour éviter les abus</li>
<li><strong>Appareils IoT</strong> : détection d'anomalies (trafic anormal = compromission potentielle)</li>
</ul>
<h2 id="media">5. Détection automatique des médias</h2>
<p>
Le module identifie automatiquement les types de trafic grâce à l'analyse des ports, protocoles
et domaines. Chaque type est associé à une classe QoS :
</p>
<pre><code>config media 'voip'
option name 'VoIP'
option class 'realtime'
list port '5060' # SIP
list port '5061' # SIP TLS
list port '10000-20000' # RTP
list protocol 'sip'
list protocol 'rtp'
config media 'gaming'
option name 'Gaming'
option class 'interactive'
list port '3074' # Xbox Live
list port '3478-3480' # PlayStation
list port '27015-27030' # Steam
option dscp 'ef' # Expedited Forwarding
config media 'streaming'
option name 'Streaming'
option class 'streaming'
list domain 'netflix.com'
list domain 'nflxvideo.net'
list domain 'youtube.com'
list domain 'googlevideo.com'</code></pre>
<div class="warning-box">
<p>⚠️ <strong>Note :</strong> La détection par domaine nécessite que le DNS passe par le routeur.
Si vos clients utilisent DoH (DNS over HTTPS), la détection sera moins efficace.</p>
</div>
<h2 id="schedules">6. Planification horaire</h2>
<p>
Adaptez les limites selon l'heure de la journée. Parfait pour réduire la bande passante
pendant les heures de pointe :
</p>
<pre><code>config schedule 'peak'
option name 'Heures de pointe'
option enabled '1'
option days 'mon tue wed thu fri'
option start '18:00'
option end '23:00'
option download_limit '80' # 80% de la bande passante max
option upload_limit '80'
config schedule 'night'
option name 'Nuit'
option enabled '1'
option days 'mon tue wed thu fri sat sun'
option start '00:00'
option end '07:00'
option download_limit '100'
option upload_limit '100'
# Backups nocturnes en classe 'bulk' prioritaire</code></pre>
<h2 id="avance">7. Configuration avancée</h2>
<h3>Ajuster les paramètres CAKE</h3>
<pre><code># Activer manuellement CAKE avec des paramètres optimisés
tc qdisc replace dev br-lan root cake bandwidth 100mbit \
diffserv4 nat wash ack-filter split-gso</code></pre>
<h3>Marquage DSCP personnalisé</h3>
<pre><code># Marquer le trafic VoIP avec DSCP EF (46)
iptables -t mangle -A POSTROUTING -p udp --dport 5060 \
-j DSCP --set-dscp 46</code></pre>
<h3>Monitoring en temps réel</h3>
<pre><code># Voir les statistiques tc
tc -s qdisc show dev br-lan
# Surveiller le trafic par classe
watch -n 1 'tc -s class show dev br-lan'</code></pre>
<div class="cta-box">
<h3>🚀 Prêt à optimiser votre réseau ?</h3>
<p>Téléchargez SecuBox et installez Bandwidth Manager dès maintenant.</p>
<a href="../index.html#installation" class="cta-btn">Installer SecuBox</a>
</div>
<h2>Conclusion</h2>
<p>
Bandwidth Manager transforme votre routeur OpenWrt en un contrôleur de trafic intelligent.
Avec la QoS basée sur CAKE, les quotas par client et la détection automatique des médias,
vous avez tous les outils pour garantir une expérience optimale à tous les utilisateurs de votre réseau.
</p>
<p>
Pour aller plus loin, consultez nos autres guides sur <a href="auth-guardian-setup.html">Auth Guardian</a>
pour l'authentification et <a href="local-saas-vhost.html">VHost Manager</a> pour héberger vos propres services.
</p>
</article>
<footer class="footer">
<p>
<a href="https://cybermood.eu" style="color: var(--primary); text-decoration: none;">CyberMood.eu</a>
© 2025 <a href="https://cybermind.fr" style="color: var(--text-muted); text-decoration: none;">CyberMind.fr</a>
— Open Source Apache-2.0 — 🇫🇷 Made in France with ❤️
</p>
</footer>
<!-- Multi-language System -->
<script src="/i18n.js"></script>
</body>
</html>