Set-OPS-Public/promo/rlq-2026-10-24/slides/secondsite.html

<section id="secondsite" data-transition="fade" style="background:#F6F7F0;color:#3E5550;font-family:'IBM Plex Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:44px">
<div style="display:flex;flex-direction:column;gap:16px">
<p style="font-size:24px;letter-spacing:3px;text-transform:uppercase;color:#176754;font-weight:600">03 · TechnoLibre · 13 et 14 octobre</p>
<h2 style="font-family:'Source Serif 4', Georgia, serif;font-size:64px;font-weight:400;line-height:1.1;color:#152F2C">Le site de TechnoLibre, construit depuis zéro.</h2>
</div>
<div style="position:relative;width:1664px;height:480px">
<div style="position:absolute;left:0px;top:40px;width:330px;height:190px;background:#E8EFE5;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:8px">
<h3 style="font-size:28px;font-weight:600;color:#152F2C">Internet</h3>
<p style="font-size:24px;line-height:1.4">visiteurs, résolveurs, registraires</p>
</div>
<div style="position:absolute;left:444px;top:40px;width:330px;height:190px;background:#FDFDFA;border:1px solid #D5DFD7;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:8px">
<h3 style="font-size:28px;font-weight:600;color:#152F2C">Relais (VPS)</h3>
<p style="font-size:24px;line-height:1.4">3 adresses fixes louées, routées en /32</p>
</div>
<div style="position:absolute;left:888px;top:40px;width:330px;height:190px;background:#102E28;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:8px">
<h3 style="font-size:28px;font-weight:600;color:#F3F6EE">Frontière OPNsense</h3>
<p style="font-size:24px;line-height:1.4;color:#CFDDD3">sans adresse fixe, elle initie le tunnel</p>
</div>
<div style="position:absolute;left:1334px;top:40px;width:330px;height:190px;background:#FDFDFA;border:1px solid #D5DFD7;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:8px">
<h3 style="font-size:28px;font-weight:600;color:#152F2C">Proxmox · 9 VM</h3>
<p style="font-size:24px;line-height:1.4">clonées en 30 secondes chacune</p>
</div>
<x-connector x1="330" y1="135" x2="444" y2="135" head="both" style="color:#5F716B"></x-connector>
<x-connector x1="774" y1="135" x2="888" y2="135" head="both" style="color:#176754;border-width:4px;border-style:dashed"></x-connector>
<p style="position:absolute;left:762px;top:0px;width:138px;font-size:24px;text-align:center;color:#176754">WireGuard</p>
<x-connector x1="1218" y1="135" x2="1334" y2="135" head="both" style="color:#5F716B"></x-connector>
<div style="position:absolute;left:888px;top:340px;width:330px;height:140px;background:#E8EFE5;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:8px">
<h3 style="font-size:28px;font-weight:600;color:#152F2C">Site de Chezlepro</h3>
<p style="font-size:24px;line-height:1.4">l’autre frontière</p>
</div>
<x-connector x1="1053" y1="230" x2="1053" y2="340" head="both" style="color:#176754;border-width:4px;border-style:dashed"></x-connector>
<p style="position:absolute;left:1250px;top:300px;width:414px;font-size:24px;line-height:1.4;color:#152F2C">Lien entre les sites, WireGuard : réplication du DNS public, administration à distance.</p>
<p style="position:absolute;left:0px;top:300px;width:820px;font-size:28px;line-height:1.45;color:#152F2C">Aucune traduction d’adresse : l’adresse du client arrive intacte. Deux serveurs de noms publics, un par site, servent les zones signées DNSSEC.</p>
</div>
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#5F716B">Set-OPS · Rencontres Linux du Québec 2026 · sur le matériel de TechnoLibre, la reprise des deux membres</p>
<p style="position:absolute;right:128px;bottom:64px;width:120px;text-align:right;font-size:24px;color:#5F716B">15</p>
<aside>Le 13 et le 14 octobre, nous avons construit le site de TechnoLibre, sur le matériel que TechnoLibre a fourni : une frontière OPNsense, un nœud Proxmox, un stockage ZFS en miroir pour les sauvegardes. C’est la fédération rendue concrète : ce site assure la reprise des deux membres. Le défi : ce site n’a qu’une adresse dynamique. La solution est un relais : trois adresses fixes louées sur un VPS, qui répond à l’ARP pour elles et les route en /32 dans un tunnel WireGuard que la frontière du site initie. Aucune traduction d’adresse : l’adresse du client arrive intacte jusqu’au service. Un second tunnel relie les deux sites : il réplique le DNS public et sert à administrer le site distant. Depuis le 14 octobre, chacune de nos zones publiques est servie par deux serveurs de noms, un par site, signés DNSSEC. Les neuf VM du site sont nées du gabarit en une trentaine de secondes chacune.</aside>
</section>