Nginx Reverse Proxy 50x Fehlerseite erstellen und einrichten

lars

21. März 2023 • 2 min read

Ich habe mich die Tage ans Werk gemacht und habe für mich und meine Webseiten eine Nginx Reverse Proxy 50x Fehlerseite erstellt, die bei Fehlern auf der Webseite auftaucht. Habe diese mithilfe von ChatGPT etwas lustiger gestaltet.

Diese Fehlerseite zeigt eine freundliche Nachricht, dass etwas schiefgelaufen ist und unser Team von hochqualifizierten Affen daran arbeitet, es zu beheben. Das lustige Gif von einem Affen soll den Besuchern ein Lächeln ins Gesicht zaubern. Du kannst die Fehlerseite anpassen, indem du die Farben und Schriftarten änderst oder das Gif durch ein anderes witziges Bild oder Video ersetzt. Vergiss nicht, diese Datei als „50x.html“ zu speichern und in das Root-Verzeichnis deiner Nginx-Server-Installation zu kopieren, damit sie erscheint, wenn es ein Problem mit dem Server gibt.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Error 50x: Oopsie Woopsie!</title>
    <style>
      body {
        background-color: #eaeaea;
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
        color: #333;
        margin: 0;
        padding: 0;
        text-align: center;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding-top: 50px;
      }
      h1 {
        font-size: 72px;
        margin-bottom: 20px;
      }
      p {
        font-size: 24px;
        margin-bottom: 40px;
      }
      .gif {
        max-width: 400px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Error 50x: Oopsie Woopsie!</h1>
      <p>Something went wrong. Don't worry, our team of highly trained monkeys is working hard to fix it.</p>
    </div>
    <img src="https://media.giphy.com/media/RQSuZfuylVNAY/giphy.gif" alt="Funny Monkey" class="gif">
  </body>
</html>

Die nächste soll erscheinen, wenn aus irgendeinem Grund die Mastodon Instanz fulda.social down sein sollte.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Error 50x: Hoppla, da ist wohl etwas schiefgelaufen!</title>
    <style>
      body {
        background-color: #fff;
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
        color: #333;
        margin: 0;
        padding: 0;
        text-align: center;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding-top: 50px;
      }
      h1 {
        font-size: 72px;
        margin-bottom: 20px;
      }
      p {
        font-size: 24px;
        margin-bottom: 40px;
      }
      .gif {
        max-width: 400px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Error 50x: Hoppla, da ist wohl etwas schiefgelaufen!</h1>
      <p>Oh nein, ein Fehler ist aufgetreten! Aber keine Sorge, wir arbeiten hart daran, das Problem zu beheben. Vielleicht sollten wir uns eine Pause gönnen und ein leckeres <a href="https://de.wikipedia.org/wiki/Fuldaer_Platte">Fuldaer Platte</a> essen, um unsere Energien aufzuladen?</p>
    </div>
    <img src="https://media.giphy.com/media/PKzCbsZJvP8QM/giphy.gif" alt="Lustiges Gif" class="gif">
  </body>
</html>

Dies ganze habe ich mit folgendem Code in die Nginx Reverse Proxy Konfiguration von den Webseiten gepackt. Die Datei 50x.html habe ich natürlich umbenannt, damit ich die Fehlerseiten für den individuellen Zweck anpassen kann.

    # Fehlerseite definieren
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
        internal;
    }