Tutorials

Schritt-für-Schritt-Anleitung: Statische Website mit AWS S3 und Route 53 hosten

Melden

In diesem Tutorial erfährst du, wie du eine statische Website (HTML, CSS, JavaScript) kostengünstig und hochverfügbar in einem AWS S3 Bucket speicherst und deine eigene Domain über Amazon Route 53 damit verknüpfst.

Voraussetzungen

  • Ein aktives AWS-Konto.
  • Eine registrierte Domain (entweder direkt über Route 53 gekauft oder bei einem Drittanbieter wie Namecheap, GoDaddy, Strato etc.).

Schritt 1: S3-Buckets erstellen

Damit Route 53 deine Domain auf S3 weiterleiten kann, muss der Name des S3-Buckets exakt mit deinem Domainnamen übereinstimmen.

Beispiel-Domain: meine-website.de

  1. Öffne die AWS-Konsole und navigiere zu S3.
  2. Klicke auf Bucket erstellen (Create bucket).
  3. Bucket-Name: Gib deinen exakten Domainnamen ein (z. B. meine-website.de).
  4. AWS-Region: Wähle eine Region in deiner Nähe (z. B. eu-central-1 für Frankfurt).
  5. Öffentlichen Zugriff blockieren (Bucket-Einstellungen):
    • Entferne das Häkchen bei Alle öffentlichen Zugriffe blockieren (Block all public access).
    • Setze das Bestätigungshäkchen, dass du verstehst, dass der Bucket öffentlich wird.
  6. Klicke ganz unten auf Bucket erstellen.

(Optional für www): Wenn du möchtest, dass www.meine-website.de ebenfalls funktioniert, erstelle einen zweiten Bucket mit dem Namen www.meine-website.de.

Schritt 2: Website-Dateien hochladen

  1. Klicke in der S3-Übersicht auf deinen neu erstellten Bucket (meine-website.de).
  2. Klicke auf Hochladen (Upload).
  3. Lade deine Website-Dateien hoch (mindestens eine index.html und optional eine error.html).

Beispiel für eine einfache index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Meine statische Website</title>
</head>
<body>
    <h1>Erfolg! Die Website läuft über S3 und Route 53.</h1>
</body>
</html>

Schritt 3: Statisches Website-Hosting aktivieren

  1. Gehe im Bucket auf den Reiter Eigenschaften (Properties).
  2. Scrolle ganz nach unten zum Bereich Statisches Website-Hosting (Static website hosting) und klicke auf Bearbeiten (Edit).
  3. Wähle Aktivieren (Enable).
  4. Hosting-Typ: Statische Website hosten (Host a static website).
  5. Trage bei Indexdokument index.html ein (und optional bei Fehlerdokument error.html).
  6. Klicke auf Änderungen speichern.
  7. Wichtig: Notiere dir den Bucket-Website-Endpunkt (die URL), der nun ganz unten unter Eigenschaften angezeigt wird (z. B. http://meine-website.de.s3-website.eu-central-1.amazonaws.com).

Schritt 4: Bucket-Richtlinie (Bucket Policy) für öffentlichen Lesezugriff setzen

Standardmäßig sind die hochgeladenen Dateien trotz Schritt 1 noch nicht lesbar. Du musst eine Richtlinie hinterlegen:

  1. Gehe im Bucket auf den Reiter Berechtigungen (Permissions).
  2. Scrolle zu Bucket-Richtlinie (Bucket policy) und klicke auf Bearbeiten (Edit).
  3. Füge folgenden JSON-Code ein (Achtung: Ersetze meine-website.de durch deinen tatsächlichen Bucket-Namen):
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::meine-website.de/*"
        }
    ]
}
  1. Klicke auf Änderungen speichern.

Test: Klicke jetzt auf den Website-Endpunkt aus Schritt 3. Deine Website sollte nun im Browser aufrufbar sein.

Schritt 5: DNS in Route 53 einrichten

Nun verbinden wir deine Domain mit dem S3-Endpunkt.

1. Hosted Zone erstellen (falls noch nicht vorhanden)

  1. Navigiere in der AWS-Konsole zu Route 53.
  2. Klicke auf Gehostete Zonen (Hosted zones) und dann auf Gehostete Zone erstellen.
  3. Gib deinen Domainnamen ein (z. B. meine-website.de).
  4. Typ: Öffentliche gehostete Zone (Public hosted zone).
  5. Klicke auf Gehostete Zone erstellen.

(Hinweis: Falls deine Domain bei einem externen Anbieter liegt, musst du die 4 dort generierten Nameserver (NS-Records) bei deinem Domain-Registrar hinterlegen.)

2. Alias-Datensatz (A-Record) anlegen

  1. Klicke in deiner gehosteten Zone auf Datensatz erstellen (Create record).
  2. Konfiguriere den Datensatz wie folgt:
    • Datensatzname: Leer lassen (für die Root-Domain meine-website.de).
    • Datensatztyp: A - Leitet Datenverkehr an eine IPv4-Adresse...
    • Aktiviere den Schalter Alias.
    • Weiterleiten an: Wähle Alias für S3-Website-Endpunkt.
    • Region: Wähle die Region, in der dein S3-Bucket liegt (z. B. eu-central-1).
    • S3-Bucket: Wähle deinen Bucket aus dem Dropdown-Menü (AWS erkennt diesen automatisch, wenn der Name exakt mit der Domain übereinstimmt).
  3. Klicke auf Datensätze erstellen.

Schritt 6: Testen

Öffne deinen Webbrowser und rufe deine Domain auf: http://meine-website.de

(Es kann je nach DNS-Aktualisierung einige Minuten dauern, bis die Domain weltweit erreichbar ist.)

Wichtiger Hinweis zu HTTPS (SSL-Verschlüsselung)

Der reine S3-Website-Endpunkt unterstützt kein HTTPS für benutzerdefinierte Domains. Wenn du ein grünes Schloss bzw. https:// benötigst (was heute Standard ist), musst du vor deinen S3-Bucket zusätzlich AWS CloudFront (Content Delivery Network) schalten und ein kostenloses SSL-Zertifikat über den AWS Certificate Manager (ACM) einbinden. Route 53 wird in diesem Fall als Alias auf die CloudFront-Distribution geleitet.

0