Zum Inhalt

Statisches Webhosting mit Ceph S3

Mit dem S3-kompatiblen Object Storage von Ceph haben Sie die Möglichkeit, statische Webseiten einfach, hochverfügbar und ressourcenschonend zu hosten. Anstatt einen herkömmlichen Webserver (wie Apache oder NGINX) zu betreiben, können Sie Ihre HTML-, CSS- und JavaScript-Dateien sowie Bilder direkt in einem S3-Bucket ablegen und über das Internet zugänglich machen.

Diese Art des Hostings eignet sich ideal für:

  • Statische Webseiten und Blogs (z. B. generiert mit Hugo, Jekyll oder MkDocs)
  • Single-Page-Applications (SPAs) (z. B. React, Vue.js, Angular)
  • Dokumentationen, Portfolios und Online-Kataloge

Vorteile des S3 Webhostings

  • Kein Server-Management: Es müssen keine Betriebssysteme aktualisiert oder Webserver konfiguriert und gewartet werden.
  • Hohe Skalierbarkeit und Performance: Ceph übernimmt im Hintergrund die Verteilung und Replikation der Daten. Auch bei plötzlichen Lastspitzen bleibt Ihre Webseite performant und erreichbar.
  • Kosteneffizient: Der Overhead für den Betrieb kompletter virtueller Maschinen entfällt, es wird lediglich der reine Objektspeicher genutzt.

In den folgenden Abschnitten erfahren Sie, wie Sie einen Bucket für das Webhosting vorbereiten, Ihre Website-Dateien hochladen und die korrekten Zugriffsrechte (Bucket Policies) setzen, damit Ihre Seite öffentlich erreichbar wird.

So funktioniert die Auslieferung

Das folgende Diagramm veranschaulicht, wie Anfragen von Besuchern direkt durch das Ceph Object Gateway beantwortet werden, ohne dass ein dedizierter Webserver (wie Apache/NGINX) dazwischengeschaltet werden muss:

graph LR
    Client([Besucher / Webbrowser]) -- "GET Request\nhttps://mein-bucket.sites..." --> Gateway{Ceph S3 Gateway}
    Gateway --> Bucket[(S3 Bucket)]
    Bucket -. "index.html,\nBilder, CSS, JS" .-> Gateway
    Gateway -. "Liefert Webseite aus" .-> Client

Anforderungen

Damit Ihre Webseite erfolgreich über Ceph S3 bereitgestellt werden kann, müssen einige Voraussetzungen erfüllt sein:

Bucket Name

  • Eindeutigkeit: Der Name Ihres S3-Buckets muss global eindeutig sein, da die Zugriffs-URLs auf der Bucket-Namen basieren (z. B. s3://mein-bucket).
  • Regeln: Beachten Sie die üblichen Namenskonventionen für S3-Buckets (z. B. Kleinbuchstaben, Bindestriche, keine Sonderzeichen oder Leerzeichen).

Website-Inhalt

  • Statische Dateien: Sie benötigen mindestens eine index.html-Datei. Dies ist die Standard-Startseite, die aufgerufen wird, wenn ein Benutzer die URL der Website aufruft.
  • Optionale Fehlerseite: Es wird empfohlen, eine error.html-Datei bereitzustellen. Diese wird angezeigt, wenn ein Benutzer versucht, auf eine nicht existierende Seite oder Datei zuzugreifen.
  • Dateistruktur: Halten Sie die Struktur Ihrer Webseiten sauber. Komplexe Unterordnerstrukturen funktionieren, erfordern aber genaue Pfadangaben in den Links Ihrer HTML-Dateien.

Zugriffsberechtigungen

  • Öffentlicher Lesezugriff: Der Bucket muss so konfiguriert werden, dass anonyme Benutzer (jeder im Internet) die Dateien lesen dürfen.
  • Kein Schreibzugriff: Achten Sie darauf, dass nur autorisierte Benutzer Schreibrechte haben, um die Inhalte zu bearbeiten.
  • Bucket Policy: Sie müssen eine Bucket Policy erstellen, die den öffentlichen Zugriff auf die Objekte (Dateien) im Bucket explizit erlaubt.

Sobald diese Voraussetzungen erfüllt sind, können Sie mit der Konfiguration fortfahren.

Anleitung

Schritt 1: AWS CLI installieren und vorbereiten

Um mit dem S3 Storage zu interagieren, benötigen wir die AWS CLI.

Tipp: Eine ausführliche Anleitung zur empfohlenen Installation der AWS CLI (via Python venv) sowie Informationen zu den erweiterten IAM-Features finden Sie in unserer separaten Dokumentation: AWS CLI & IAM Features.

Wenn Sie die AWS CLI bereits in einer virtuellen Umgebung installiert haben, stellen Sie sicher, dass diese für die nächsten Schritte aktiviert ist:

source ~/ceph.venv/bin/activate

Schritt 2: S3 Endpunkte testen (Optional)

Sie können vorab prüfen, ob die Website-Endpunkte erreichbar sind:

curl http://sites.ewstorage.ch
curl https://sites.ewstorage.ch

Schritt 3: AWS CLI konfigurieren und Umgebungsvariablen setzen

Setzen Sie die erforderlichen Zugangsdaten und Konfigurationsparameter als Umgebungsvariablen. Ersetzen Sie die xxx bei AWS_ACCESS_KEY_ID und AWS_SECRET_ACCESS_KEY durch Ihre tatsächlichen S3-Zugangsdaten. Passen Sie zudem den Namen für den bucket an.

# Zugangsdaten und Einstellungen
export AWS_ACCESS_KEY_ID=xxx
export AWS_SECRET_ACCESS_KEY=xxx
export AWS_REQUEST_CHECKSUM_CALCULATION=when_required
export AWS_RESPONSE_CHECKSUM_VALIDATION=when_required
export AWS_MAX_ATTEMPTS=1

# Regionale Parameter und Bucket-Name (Hier Region 1: ch-zh1)
export url=https://s3.ewstorage.ch 
export region=ch-zh1 
export bucket=meine-website-bucket

Schritt 4: Bucket erstellen

Nun erstellen wir den S3-Bucket, der später als Webserver fungiert:

# Bestehende Buckets auflisten
aws  s3 ls

# Neuen Bucket erstellen
aws  s3 mb s3://${bucket}

# Prüfen, ob der Bucket angelegt wurde
aws  s3 ls s3://${bucket}

[PLATZHALTER: Hier könnte ein Screenshot der Konsolenausgabe beim Erstellen des Buckets eingefügt werden]

Schritt 5: Bucket Policy setzen (Öffentlicher Lesezugriff)

Damit Besucher Ihre Webseite sehen können, müssen die Dateien im Bucket öffentlich lesbar sein. Dafür weisen wir dem Bucket eine Policy zu:

aws  s3api put-bucket-policy --bucket="${bucket}" --policy '
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::'${bucket}'/*"
        }
    ]
}'

# Zur Überprüfung die Policy abfragen (erfordert jq)
aws  s3api get-bucket-policy --bucket="${bucket}" --output text | jq .

Schritt 6: Website-Hosting auf dem Bucket aktivieren

Dieser Befehl teilt dem Bucket mit, dass er sich wie ein Webserver verhalten und standardmäßig nach einer index.html-Datei suchen soll.

aws s3api put-bucket-website \
  --bucket=${bucket} \
  --website-configuration='{"IndexDocument":{"Suffix":"index.html"}}'

Schritt 7: Test-Webseite (index.html) erstellen und hochladen

Wir erstellen eine einfache index.html und laden sie direkt in den Bucket hoch:

echo '<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Page</title>
</head>
<body>
    <h1>Hello, World</h1>
    <p>This is a simple test file for index.html.</p>
</body>
</html>' | aws s3 cp - s3://${bucket}/index.html

[PLATZHALTER: Hier könnte ein Screenshot des Upload-Vorgangs eingefügt werden]

Schritt 8: Website aufrufen und testen

Ihre statische Website ist nun online! Sie können sie über die spezifische Subdomain des Buckets aufrufen.

# Aufruf des Root-Verzeichnisses (lädt automatisch index.html)
curl https://${bucket}.sites.ewstorage.ch/

# Direkter Aufruf der index.html
curl https://${bucket}.sites.ewstorage.ch/index.html

# Inhalt des Buckets auflisten
aws s3 ls s3://${bucket}

[PLATZHALTER: Hier könnte ein Screenshot der funktionierenden Webseite im Browser eingefügt werden]

Endpunkte für andere Regionen (z.B. Region 2: ch-ge1)

Sollten Sie Ihren Bucket in einer anderen Region (wie ch-ge1) hosten wollen, passen Sie die URL und Region entsprechend an:

export url=https://s3.ch-ge1.ewstorage.ch
export region=ch-ge1

# Testaufruf für die zweite Region
curl https://${bucket}.sites.ch-ge1.ewstorage.ch/index.html

Weiterführende Konfigurationen

CORS (Cross-Origin Resource Sharing) einrichten

Was ist CORS? CORS ist ein Sicherheitsmechanismus in modernen Webbrowsern. Er verhindert standardmäßig, dass eine Webseite (z. B. https://www.meine-website.de) per JavaScript oder über Stylesheets auf Ressourcen einer anderen Domain (z. B. https://mein-bucket.sites.ewstorage.ch) zugreift.

Wann benötigen Sie CORS in S3? Wenn Sie Ihren S3-Bucket nutzen, um Web-Fonts (.woff, .ttf), JavaScript-Module oder JSON-Daten (APIs) zu hosten, die Sie dann auf einer anderen Domain einbinden möchten, wird der Browser den Ladevorgang aus Sicherheitsgründen blockieren. In den Entwicklertools des Browsers sehen Sie dann den typischen "CORS-Error".

Damit der S3-Bucket dem Browser mitteilt, dass dieser Zugriff ausdrücklich erlaubt ist, müssen Sie eine CORS-Policy für den Bucket definieren.

CORS-Policy per AWS CLI setzen

Wir erstellen eine einfache Konfigurationsdatei (cors.json), die Lesevorgänge (GET, HEAD) von allen Domains (*) erlaubt, und weisen diese dem Bucket zu.

# 1. Konfigurationsdatei cors.json erstellen
cat <<EOF > cors.json
{
  "CORSRules": [
    {
      "AllowedOrigins": ["*"],
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET", "HEAD"],
      "MaxAgeSeconds": 3000
    }
  ]
}
EOF

# 2. CORS-Policy auf den Bucket anwenden
aws s3api put-bucket-cors \
  --bucket ${bucket} \
  --cors-configuration file://cors.json

# 3. Zur Überprüfung abfragen
aws s3api get-bucket-cors --bucket ${bucket}

Sicherheits-Tipp: Wenn Sie genau wissen, auf welcher Domain Ihre Website läuft (z. B. https://www.meine-website.de), sollten Sie in der Datei cors.json unter "AllowedOrigins" statt dem Wildcard "*" besser Ihre spezifische Domain (z. B. ["https://www.meine-website.de"]) eintragen, um die Sicherheit zu erhöhen.