Einführung

Haben Sie schon einmal festgestellt, dass Ihre Website aufgrund all der Bilder und Assets, die sie laden muss, langsamer wird? Oder haben Sie vielleicht Schwierigkeiten gehabt, diese Dateien zu verwalten, während Ihre Seite wächst? Hier ist die Sache: Bilder direkt von Ihrem Webserver zu speichern und bereitzustellen, mag zunächst bequem erscheinen, kann aber schnell zu einem Engpass werden.

Hier kommt AWS ins Spiel. Mit Diensten wie S3 für die Speicherung und CloudFront als leistungsstarkem CDN können Sie Bilder und Assets ganz einfach verwalten, optimieren und blitzschnell an Ihre Nutzer ausliefern, egal wo sie sich auf der Welt befinden.

In diesem Leitfaden werde ich Ihnen erklären, warum es eine schlechte Idee ist, Bilder auf Ihrem Web-App-Server zu speichern, warum die Trennung von Diensten einen echten Unterschied macht und wie AWS-Tools Ihr Leben erheblich erleichtern können. Lassen Sie uns eintauchen!

Warum das Speichern von Bildern auf Ihrem Webserver eine schlechte Idee ist

Erhöhte Serverlast

Wenn Ihr Webserver sowohl für das Ausführen Ihrer App als auch für die Bereitstellung von Bildern verantwortlich ist, kann er schnell überfordert werden. Jede Bildanfrage bringt zusätzliche Arbeit mit sich, die alles verlangsamt. Wenn Ihre Seite viel Verkehr hat, kann der Server Schwierigkeiten haben, mitzuhalten, was zu Verzögerungen oder sogar Abstürzen führen kann. Stellen Sie sich vor, Sie versuchen, all Ihre Einkäufe zu tragen und gleichzeitig zu rennen – das ist einfach nicht effizient!

Begrenzte Skalierbarkeit

Während Ihre Seite wächst, wird auch die Anzahl der Bilder und Nutzer zunehmen. Ein einzelner Webserver kann nur so viel bewältigen, bevor Sie an eine Wand stoßen. Das Hochskalieren bedeutet oft, mehr Geld für größere Server auszugeben oder sich mit dem Aufwand der Migration von allem auseinanderzusetzen. Mit Cloud-Speicher wie AWS S3 müssen Sie sich keine Sorgen machen, dass der Speicherplatz ausgeht – er wächst mit Ihnen, ganz ohne Stress.

Risiko von Leistungsengpässen

Große Bilddateien können Ihre Seite zum Stillstand bringen, insbesondere wenn Sie sie von demselben Server bereitstellen, der die Funktionalität Ihrer App verarbeitet. Wenn ein Teil Ihrer Seite langsam ist, kann das alles andere aufhalten, was die Nutzer mit langen Ladezeiten frustriert. Denken Sie daran, wie ein Stau auf einer einspurigen Straße – alles staut sich.

Sicherheitsbedenken

Bilder von Ihrem Webserver bereitzustellen, kann Sie unnötigen Risiken aussetzen. Hacker könnten Schwachstellen ausnutzen, um auf sensible Informationen zuzugreifen, oder andere Seiten könnten Ihre Bandbreite stehlen, indem sie Ihre Bilder hotlinken. Ohne geeignete Sicherheitsvorkehrungen könnten Sie versehentlich Server-Dateipfade offenbaren, was so ist, als würden Sie Ihre Haustür weit offen lassen.

Warum sollten wir ein CDN verwenden?

Wenn Sie jemals von einer langsam ladenden Website genervt waren, werden Sie verstehen, warum ein CDN (Content Delivery Network) ein echter Game-Changer ist. Ein CDN ist wie ein Netzwerk von Mini-Lagern, die über den Globus verteilt sind, wobei jedes eine Kopie der Bilder und Assets Ihrer Seite speichert. Anstatt dass jeder Nutzer warten muss, bis der Inhalt von Ihrem Hauptserver reist, liefert ein CDN ihn vom nächstgelegenen Lager, was alles schneller und reibungsloser macht.

CDN beschleunigt die Inhaltsbereitstellung, indem es Daten an globale Edge-Server verteilt.
CDN beschleunigt die Inhaltsbereitstellung, indem es Daten an globale Edge-Server verteilt.

Hier sind einige Gründe, warum die Verwendung eines CDN für die Bereitstellung von Bildern und Assets eine Selbstverständlichkeit ist:

Schnellere Ladezeiten für Nutzer überall

Angenommen, Ihr Hauptserver befindet sich in New York, aber jemand in Tokio besucht Ihre Seite. Ohne ein CDN muss ihre Anfrage um die halbe Welt reisen, was Zeit in Anspruch nimmt. Mit einem CDN liefert ein Server in der Nähe von Tokio den Inhalt, wodurch die Reisezeit verkürzt wird und Ihre Seite im Handumdrehen lädt. Schnellere Ladezeiten bedeuten glücklichere Nutzer, und glücklichere Nutzer bleiben länger.

Reduzierte Latenz und verbesserte Nutzererfahrung

Latenz ist die lästige Verzögerung zwischen dem Klick eines Nutzers und dem tatsächlichen Erscheinen des Inhalts. Je weiter ein Nutzer von Ihrem Server entfernt ist, desto höher ist die Latenz. Ein CDN löst dies, indem es Ihre Bilder und Assets näher zum Nutzer bringt, Verzögerungen reduziert und alles sofort erscheinen lässt. Egal, ob jemand von seiner Couch in London oder einem Café in Sydney auf Ihrer Seite surft, er wird die gleiche nahtlose Erfahrung genießen.

Verlagerung des Verkehrs von Ihrem Hauptserver

Stellen Sie sich Ihren Webserver als einen beschäftigten Koch in einem Restaurant vor. Ohne ein CDN muss der Koch alles selbst erledigen: kochen, servieren und sogar das Essen an weit entfernte Kunden liefern. Mit einem CDN kann der Koch (Ihr Server) sich auf das Kochen (Ausführen Ihrer App) konzentrieren, während das CDN die Lieferung (Bereitstellung von Bildern und Assets) übernimmt. Dies entlastet eine Menge Verkehr von Ihrem Hauptserver, verhindert Überlastungen und sorgt dafür, dass Ihre Seite auch bei Verkehrsspitzen reibungslos läuft.

Was sind S3 und CloudFront?

S3 (Simple Storage Service)

S3 ist Amazons sichere, skalierbare und hochzuverlässige Cloud-Speicherlösung. Es ist dafür ausgelegt, jede Art von Daten zu speichern, einschließlich Bilder, Videos und andere Assets, was es zur idealen Wahl für Websites und Anwendungen macht. Egal, ob Sie einen kleinen persönlichen Blog hosten oder eine große E-Commerce-Plattform betreiben, S3 kann Ihre Speicheranforderungen mühelos erfüllen. Außerdem bietet es flexible Speicherstufen, sodass Sie nur für das bezahlen, was Sie nutzen.

CloudFront

CloudFront ist Amazons Content Delivery Network (CDN), das eine schnelle und sichere Inhaltsbereitstellung gewährleistet. Es funktioniert, indem es Ihre Bilder und Assets auf Edge-Servern weltweit zwischenspeichert, sodass Nutzer schnell auf sie zugreifen können, indem sie den Server nutzen, der ihnen am nächsten ist. In Kombination mit S3 optimiert CloudFront den Bereitstellungsprozess, indem es gespeicherte Assets nahtlos abruft und mit minimaler Latenz bereitstellt. Zusammen bieten S3 und CloudFront eine leistungsstarke, effiziente und skalierbare Lösung für die Verwaltung und Bereitstellung von Website-Inhalten.

Kosten für die Nutzung von S3 und CloudFront

Eines der besten Dinge an AWS ist, dass Sie nur für das bezahlen, was Sie nutzen. Hier ist eine schnelle Übersicht:

  • S3 Kosten:
    • Speicherkosten: Sie zahlen pro GB der gespeicherten Daten, mit unterschiedlichen Preisen je nach Speicherstufe (z. B. Standard, Infrequent Access, Glacier).
    • Anfragekosten: Gebühren fallen für PUT-, GET- und andere Anfragen an, die an Ihren Bucket gerichtet sind.
    • Datenübertragung: Die Übertragung von Daten aus S3 ins Internet verursacht zusätzliche Gebühren.
  • CloudFront Kosten:
    • Datenübertragung: Sie zahlen für die Menge an Daten, die über Edge-Standorte an Nutzer geliefert werden.
    • Anfragen: Gebühren fallen für HTTP/HTTPS-Anfragen an, die an CloudFront gerichtet sind.
    • Regionale Preisgestaltung: Die Kosten können je nach Standort Ihrer Nutzer variieren.

Sie können die Amazon S3 Preisgestaltung und Amazon CloudFront Preisgestaltung für detaillierte Informationen einsehen.

Beispiel: Kosten für die Nutzung von S3 und CloudFront

Angenommen, Sie betreiben eine kleine E-Commerce-Website und müssen Produktbilder speichern und bereitstellen. Hier ist eine vereinfachte Kostenübersicht:

Szenariodetails

  • Speicher: 100 GB Bilder, die in S3 (Standard-Stufe) gespeichert sind.
  • Anfragen: 50.000 GET-Anfragen und 10.000 PUT-Anfragen an S3 pro Monat.
  • Datenübertragung: 100 GB Daten, die an CloudFront übertragen werden.
  • CloudFront Datenlieferung: 100 GB Daten, die über das CDN an Endnutzer geliefert werden.

S3 Kosten

  1. Speicherkosten:
  • 100 GB in S3 Standard Storage = $2.30 pro Monat (ca. $0.023 pro GB).
  1. Anfragekosten:
  • 50.000 GET-Anfragen = $0.04 (ca. $0.0004 pro 1.000 Anfragen).
  • 10.000 PUT-Anfragen = $0.05 (ca. $0.005 pro 1.000 Anfragen).
  1. Datenübertragungskosten (zu CloudFront):
  • 100 GB = $0 (Datenübertragung von S3 zu CloudFront ist kostenlos).

Gesamte S3 Kosten: $2.39/Monat

CloudFront Kosten

  1. Datenübertragungskosten (von CloudFront zu Nutzern):
  • 100 GB, die an Endnutzer geliefert werden = $8.50 (ca. $0.085 pro GB für die ersten 10 TB).
  1. Anfragekosten:
  • 50.000 HTTP/HTTPS-Anfragen = $0.10 (ca. $0.002 pro 1.000 Anfragen).

Gesamte CloudFront Kosten: $8.60/Monat

Gesamtsumme

Gesamte monatliche Kosten: $2.39 + $8.60 = $10.99

Einrichten von AWS S3 und CloudFront für das Hosting von Bildern und Assets

Dieser Leitfaden wird Sie durch die Konfiguration von AWS S3 und CloudFront führen, um Bilder effizient mit einer benutzerdefinierten Subdomain bereitzustellen.

Diese Einrichtung stellt sicher, dass:

  • Anfragen von Ihren erlaubten Domains (z. B. yoursite.com) können auf die Assets zugreifen.
  • Anfragen ohne Referer-Header (z. B. direkter Zugriff auf S3-URLs) werden blockiert.
  • Anfragen von nicht autorisierten Websites (Hotlinking) werden verweigert.
  1. Erstellen Sie ein SSL-Zertifikat in AWS Certificate Manager (ACM)

Da CloudFront ein gültiges SSL-Zertifikat benötigt, um HTTPS mit einer benutzerdefinierten Domain zu verwenden, ist der erste Schritt, ein SSL-Zertifikat zu erstellen.

  • Gehen Sie zu AWS Certificate Manager (ACM).
  • Klicken Sie auf Zertifikat anfordern.
  • Wählen Sie Ein öffentliches Zertifikat anfordern.
  • Geben Sie Ihre Subdomain ein (images.yoursite.com) und fügen Sie optional *.yoursite.com hinzu, wenn Sie ein Wildcard-Zertifikat möchten.
  • Wählen Sie DNS-Validierung (empfohlen).
  • Nach der Einreichung stellt AWS CNAME-Einträge zur Verfügung, die Sie bei Ihrem DNS-Anbieter (z. B. Route 53, Cloudflare, GoDaddy) hinzufügen müssen.
  • Sobald der DNS-Eintrag validiert ist, wird das Zertifikat ausgestellt.
AWS Certificate Manager: Erfolgreich ausgestelltes SSL-Zertifikat für Subdomains
AWS Certificate Manager: Erfolgreich ausgestelltes SSL-Zertifikat für Subdomains
  1. Erstellen Sie eine Subdomain für die Bereitstellung von Bildern

Jetzt, da das SSL-Zertifikat bereit ist, richten Sie eine Subdomain (images.yoursite.com) ein, um Ihre Bilder bereitzustellen.

  • Gehen Sie zu Ihrem DNS-Anbieter (Route 53, Cloudflare oder einen anderen).
  • Erstellen Sie einen CNAME-Eintrag:
    • Record Name: images
    • Typ: CNAME
    • Wert: <your-cloudfront-distribution-id>.cloudfront.net
  1. Erstellen Sie eine CloudFront-Distribution

Richten Sie jetzt CloudFront ein, um Bilder von S3 bereitzustellen.

  • Gehen Sie zu AWS CloudFront → Distribution erstellen.
  • Unter Ursprung konfigurieren Sie:
    • Ursprungsdomänenname: Wählen Sie Ihren S3-Bucket aus.
    • Ursprungszugang: Wählen Sie Legacy-Zugangsidentitäten → Ursprungszugangsidentität (OAI) erstellen.
    • Bucket-Richtlinie: Wählen Sie Ich werde die Bucket-Richtlinie manuell aktualisieren.
  • Verhalten konfigurieren:
    • Objekte automatisch komprimieren: ✅ Ja
    • Viewer-Protokollrichtlinie: HTTP auf HTTPS umleiten
    • Erlaubte HTTP-Methoden: GET, HEAD
    • Viewer-Zugriff einschränken: ❌ Nein (es sei denn, Sie möchten signierte URLs)
  • Cache- und Ursprungsanfrage-Einstellungen:
    • Cache-Richtlinie: ✅ CachingOptimized
    • Ursprungsanfrage-Richtlinie: ✅ UserAgentRefererHeaders (leitet Referer an S3 weiter)
  • Weisen Sie das SSL-Zertifikat zu:
    • Unter Einstellungen wählen Sie Benutzerdefiniertes SSL-Zertifikat.
    • Wählen Sie das Zertifikat, das Sie im AWS Certificate Manager erstellt haben.
  • Klicken Sie auf Distribution erstellen.
CloudFront: Ursprungs-Konfiguration
CloudFront: Ursprungs-Konfiguration
CloudFront: Verhaltens-Konfiguration
CloudFront: Verhaltens-Konfiguration
  1. Konfigurieren Sie die Berechtigungen des S3-Buckets

Standardmäßig ist ein S3-Bucket privat. Wir müssen CloudFront den Zugriff darauf erlauben.

  • Gehen Sie zu S3 → Wählen Sie Ihren Bucket aus.
  • Berechtigungen → Aktivieren Sie ✅ Alle öffentlichen Zugriffe blockieren (da CloudFront den Zugriff verwaltet).
  • Aktualisieren Sie die Bucket-Richtlinie:

Ersetzen Sie <bucket name> und <cloud front oai> durch Ihre tatsächlichen Werte:


{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowAccessFromSubdomains",
            "Effect": "Allow",
            "Principal": {
                "AWS": "<cloud front oai>"
            },
            "Action": "s3:GetObject",
            "Resource": [
                "arn:aws:s3:::<bucket name>/images/*",
                "arn:aws:s3:::<bucket name>/assets/*"
            ],
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "http://*.yoursite.com/*",
                        "https://*.yoursite.com/*",
                        "http://yoursite.com/*",
                        "https://yoursite.com/*"
                    ]
                }
            }
        }
    ]
}
  1. Letzte Schritte
  • CloudFront bereitstellen: Warten Sie, bis die CloudFront-Distribution bereitgestellt ist.
  • Bildladung testen:
    • Versuchen Sie, auf ein Bild zuzugreifen: https://images.yoursite.com/path/to/image.jpg
  • Wenn Sie 403 Forbidden erhalten, überprüfen Sie, ob:
    • Die CloudFront OAI ist korrekt zugewiesen.
    • Die S3-Bucket-Richtlinie enthält die OAI-ARN.
    • Der Referer-Header wird weitergeleitet.

✅ Jetzt haben Sie eine vollständig konfigurierte, optimierte und sichere Bildbereitstellungsumgebung mit AWS S3 und CloudFront! 🚀

Fazit

Und da haben Sie es! Mit AWS S3 und CloudFront, die zusammenarbeiten, haben wir eine schnelle, sichere und kosteneffiziente Möglichkeit geschaffen, Bilder wie ein Profi bereitzustellen. Keine Überlastung Ihres Webservers mehr oder langsame Ladezeiten – CloudFront übernimmt die schwere Arbeit, während S3 alles organisiert und sicher hält. Indem wir den Referer-Header weiterleiten und den direkten S3-Zugriff blockieren, haben wir auch alles gesichert, um Hotlinking und unerwünschten Verkehr zu verhindern. Jetzt laden Ihre Bilder blitzschnell, bleiben geschützt und skalieren mühelos. Einfach, effizient und für die Zukunft gebaut! 🚀