import React from "react";

function ServerPage() {
  return (
    <section className="content-group">
      <h1 className="project-header">Struktur dieses Servers</h1>
      <img
        src="/assets/projects/server/images/server.png"
        alt="Server Struktur Diagramm"
        className="center-image"
      />

      <div className="list-display" style={{ marginTop: '2em' }}>
        <h2>Welche Kernaufgaben erf&uuml;llt dieser Server?</h2>
        <ul className="key-points">
          <li>Die Bereitstellung dieser Website über Nginx</li>
          <li>Die Bereitstellung des JupyterHub-Servers für Data Science und Machine Learning</li>
          <li>
            Automatische Aktualisierung der React-Applikation durch GitHub-Webhooks
            über die Flask-App
          </li>
          <li>Sichere Remote-Verbindung über WireGuard VPN und SSH</li>
          <li>Zentrales Routing und Load Balancing durch Traefik</li>
        </ul>
      </div>

      <div className="list-display" style={{ marginTop: '2em' }}>
        <h3>Wichtige Kerntechnologien</h3>
        <ul className="key-points">
          <li>
            <b>Docker und Docker-Compose</b>: Jeder Service läuft in einem eigenen Container,
            was die Modularität und Wartbarkeit erhöht. Die Container-Architektur
            ermöglicht eine klare Trennung der Dienste und vereinfacht das Deployment
            sowie Updates.
          </li>
          <li>
            <b>Traefik</b>: Fungiert als zentraler Reverse Proxy und Load Balancer.
            Traefik übernimmt das Routing der Anfragen zu den entsprechenden Services,
            verwaltet SSL-Zertifikate automatisch und ermöglicht eine einfache
            Integration neuer Dienste durch Docker-Labels.
          </li>
          <li>
            <b>Nginx</b>: Dient als Webserver für die React-App und stellt die
            statischen Inhalte bereit.
          </li>
          <li>
            <b>JupyterHub</b>: Ermöglicht die Verwaltung von Jupyter-Notebooks
            für Data Science und Machine Learning. Benutzer können ihre eigenen
            JupyterLab-Umgebungen über jupyter.simonaltschaeffl.de aufrufen.
          </li>
          <li>
            <b>Flask</b>: Verarbeitet GitHub-Webhooks und triggert automatische
            Updates der React-App. Die Flask-Anwendung verifiziert die Webhook-
            Authentizität und stößt den Update-Prozess an.
          </li>
          <li>
            <b>WireGuard VPN & SSH</b>: Bietet sicheren Remote-Zugriff auf den
            Server. WireGuard ermöglicht eine moderne, schnelle VPN-Verbindung,
            während der SSH-Server sichere Terminal-Verbindungen bereitstellt.
          </li>
        </ul>
      </div>

      <div style={{ marginTop: '2em' }}>
        <h3>Routing und Zugriff</h3>
        <p>
          Alle Anfragen werden zunächst von Traefik empfangen und basierend auf der
          Domain an die entsprechenden Services weitergeleitet. Die Website ist unter
          simonaltschaeffl.de erreichbar, wobei Traefik die Anfragen an den
          Nginx-Container weiterleitet, der die React-Applikation bereitstellt.
        </p>

        <h3>JupyterHub &amp; JupyterLab</h3>
        <p>
          Der JupyterHub-Service ist über jupyter.simonaltschaeffl.de erreichbar.
          Traefik leitet die Anfragen an den JupyterHub-Container weiter, der die
          Benutzerauthentifizierung und Container-Verwaltung übernimmt. Nach erfolgreicher
          Anmeldung wird ein persönlicher JupyterLab-Container mit Data-Science-Tools
          wie Pandas, TensorFlow, NumPy etc. gestartet, der für Machine Learning
          Experimente und Datenanalysen genutzt werden kann.
        </p>

        <h3>Sicherheit und Remote-Zugriff</h3>
        <p>
          Der sichere Remote-Zugriff wird durch eine Kombination aus WireGuard VPN
          und SSH gewährleistet. WireGuard bietet eine moderne, effiziente
          VPN-Lösung, während der SSH-Server sichere Terminal-Verbindungen für
          Wartungsarbeiten ermöglicht. Die Verwaltung erfolgt über einen
          dedizierten Admin-Zugang.
        </p>
      </div>

      <div className="list-display" style={{ marginTop: '2em' }}>
        <h2>Mein Fazit</h2>
        <ul className="key-points">
          <li>
            <b>Umfangreiches Lernen</b>: Das Projekt bot eine gro&szlig;artige M&ouml;glichkeit, neue Technologien wie
            Docker und React von Grund auf zu lernen.
          </li>
          <li>
            <b>Lernkurve war es wert</b>: Auch wenn das Verst&auml;ndnis der neuen Technologien Zeit brauchte, war
            der Erkenntnisgewinn immens.
          </li>
          <li>
            <b>Produktionsvorteile von Docker</b>: Das Projekt hat das Verst&auml;ndnis f&uuml;r die Bedeutung von Docker in
            Produktionsumgebungen deutlich gemacht und wird die
            Serverkonfiguration zuk&uuml;nftiger Projekte erleichtern.
          </li>
          <li>
            <b>Effizienz von JavaScript-Bibliotheken (React)</b>: Die Einfachheit und Geschwindigkeit, mit der komplexe Webseiten mit
            React erstellt werden k&ouml;nnen, hat positiv &uuml;berrascht und wird in
            Zukunft h&auml;ufiger eingesetzt werden.
          </li>
        </ul>
      </div>

      <div style={{ marginTop: '2em' }}>
        <h3>Rolle von LLMs in der Konfiguration</h3>
        <p>
          Ich habe Chatbots in verschiedenen Bereichen eingesetzt, vor allem im
          Bereich <em>Debugging und Rechtschreibung</em>. Viele Fehler, vor allem bei
          Dockerfiles oder Docker-Compose-Dateien, konnten durch den Einsatz von
          Chatbots effizient behoben werden.
        </p>
      </div>

      <div className="list-display" style={{ marginTop: '2em' }}>
        <h2>Ideen f&uuml;r die Zukunft des Servers</h2>
        <ul className="key-points">
          <li>Integration weiterer Dienste durch einfache Erweiterung der Traefik-Konfiguration</li>
          <li>Implementierung eines Monitoring-Systems für bessere Überwachung der Services</li>
          <li>Automatisierung der Backups und Disaster Recovery Prozesse</li>
          <li>Erweiterung der JupyterHub-Umgebung mit zusätzlichen Data Science Tools</li>
        </ul>
      </div>
    </section>
  );
}

export default ServerPage;