qrcode-generator/src/components/domain-hilfe.tsx

"use client";

import { HelpCode, HelpStep } from "@/components/help-button";

/**
 * Der Inhalt der Kurzhilfe auf der Domain-Seite.
 *
 * Verdichtet aus dem README-Abschnitt „Hinter einem Reverse Proxy“. Bewusst
 * nur die Schritte, die diese Anwendung betreffen — wie man im eigenen Proxy
 * einen Eintrag anlegt, steht in dessen Handbuch besser.
 */
export function DomainHilfe({ baseUrlHostname }: { baseUrlHostname: string }) {
  const beispiel = baseUrlHostname || "qr.example.com";

  return (
    <div className="space-y-5">
      <p>
        Eine Domain hier zu registrieren genügt nicht — sie muss den Browser
        auch hierher führen. Dazu gehören drei Dinge außerhalb dieser
        Anwendung: ein DNS-Eintrag, ein Eintrag im Reverse Proxy und ein
        Zertifikat.
      </p>

      <ol className="space-y-4">
        <HelpStep n={1} title="DNS-Eintrag anlegen">
          <p>
            Beim Anbieter der Domain einen <strong>A-Record</strong> (bei IPv6
            zusätzlich <strong>AAAA</strong>) auf die öffentliche Adresse des
            Reverse Proxy setzen. Ein CNAME auf einen bestehenden Namen tut es
            auch.
          </p>
          <p>
            Steht der Name nur im internen DNS oder ist er nur über VPN
            erreichbar, funktionieren gedruckte Codes{" "}
            <strong>auch nur dort</strong>. Für Aushänge, Flyer und
            Verpackungen muss er öffentlich auflösbar sein.
          </p>
        </HelpStep>

        <HelpStep n={2} title="Im Reverse Proxy weiterleiten">
          <p>
            Für die Domain einen eigenen Eintrag anlegen, der auf diese
            Anwendung zeigt — Ziel ist der Docker-Host auf Port{" "}
            <code className="font-mono text-xs">3000</code>, oder im selben
            Docker-Netz der Servicename{" "}
            <code className="font-mono text-xs">app</code>.
          </p>
          <p>
            Diese drei Kopfzeilen muss der Proxy mitschicken. Nginx Proxy
            Manager, Traefik und Caddy tun das von sich aus; ein blankes nginx
            braucht sie im Serverblock:
          </p>
          <HelpCode>{`proxy_set_header Host              $host;
proxy_set_header X-Forwarded-Host  $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;`}</HelpCode>
          <p>
            Ohne <code className="font-mono text-xs">X-Forwarded-Host</code>{" "}
            landet jeder Aufruf unter der Standard-Domain, und Kurz-URLs der
            Zweitdomain werden nicht gefunden.
          </p>
        </HelpStep>

        <HelpStep n={3} title="Zertifikat anfordern">
          <p>
            HTTPS erledigt der Proxy. Im Nginx Proxy Manager ist das der Reiter{" "}
            <em>SSL</em> mit <em>Force SSL</em>; Traefik und Caddy holen das
            Zertifikat selbst, sobald der DNS-Eintrag steht.
          </p>
          <p>
            Ohne gültiges Zertifikat brechen viele Scanner-Apps den Aufruf ohne
            Erklärung ab — der Code sieht dann für die Nutzer schlicht kaputt
            aus.
          </p>
        </HelpStep>

        <HelpStep n={4} title="Domain hier registrieren">
          <p>
            Über <strong>Domain registrieren</strong> den Hostnamen eintragen —
            genau so, wie er im Browser steht, ohne{" "}
            <code className="font-mono text-xs">https://</code> und ohne Pfad:
          </p>
          <HelpCode>{beispiel}</HelpCode>
          <p>
            Die Weiterleitung prüft den Hostnamen gegen diese Liste. Ein
            unbekannter Name endet mit 404 — über eine gefälschte Kopfzeile
            lässt sich also keine fremde Domain ansprechen.
          </p>
        </HelpStep>

        <HelpStep n={5} title="Einer Gruppe zuteilen">
          <p>
            Eine frisch registrierte Domain gehört noch niemandem. Erst über{" "}
            <strong>Gruppen zuteilen</strong> können Mitglieder dieser Gruppe
            dort Codes anlegen. Die als <em>Voreinstellung</em> markierte
            Domain ist die, die beim Anlegen vorausgewählt ist.
          </p>
        </HelpStep>

        <HelpStep n={6} title="Nachprüfen">
          <p>Von außerhalb des eigenen Netzes:</p>
          <HelpCode>{`curl -I https://${beispiel}/`}</HelpCode>
          <p>
            Kommt eine Antwort dieser Anwendung, stimmen DNS, Proxy und
            Zertifikat. Danach einen Code der zugeteilten Gruppe anlegen, die
            Domain auswählen und den fertigen Code einmal mit dem Handy
            scannen — das ist die einzige Prüfung, die wirklich zählt.
          </p>
        </HelpStep>
      </ol>

      <div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
        <h3 className="font-semibold text-slate-900">
          Was <code className="font-mono text-xs">BASE_URL</code> damit zu tun hat
        </h3>
        <p className="mt-1 text-slate-600">
          Die Umgebungsvariable{" "}
          <code className="font-mono text-xs">BASE_URL</code> ist die
          Standard-Adresse: Sie greift bei Aufrufen über eine nicht
          registrierte Adresse und bestimmt, ob Kurz-URLs mit{" "}
          <code className="font-mono text-xs">http</code> oder{" "}
          <code className="font-mono text-xs">https</code> gebildet werden.
          Weitere Domains werden hier registriert, nicht dort eingetragen.
        </p>
      </div>
    </div>
  );
}