Zuletzt aktualisiert: 12. September

So erstellen Sie ein Bild-CDN mit AWS S3 und CloudFront

Kevin van Zonneveld

Mitgründer · Amsterdam, Niederlande ·

Die Performance der Bildauslieferung ist für moderne Webanwendungen entscheidend. Wenn Sie mit AWS S3 und CloudFront Ihr eigenes Bild-CDN erstellen, können Sie die Ladezeiten deutlich verbessern und die Nutzererfahrung steigern. Diese Anleitung führt Sie durch die Einrichtung einer robusten Bild-CDN-Infrastruktur.

Warum ein CDN für Bilder sinnvoll ist

Content Delivery Networks (CDNs) bieten mehrere Vorteile für die Bildauslieferung:

Geringere Latenz durch Caching an Edge-Standorten.
Niedrigere Bandbreitenkosten, da Traffic von Ihrem Ursprungsserver ausgelagert wird.
Bessere Website-Performance durch schnellere Seitenladezeiten.
Verbesserte Nutzererfahrung über verschiedene geografische Regionen hinweg.
Bessere Bewältigung von Traffic-Spitzen bei plötzlich steigender Nachfrage.

Einen AWS-S3-Bucket einrichten

Neuen S3-Bucket erstellen:
- Melden Sie sich bei der AWS Management Console an.
- Navigieren Sie zu S3.
- Klicken Sie auf Create bucket.
- Geben Sie einen eindeutigen Bucket-Namen ein.
- Wählen Sie Ihre bevorzugte AWS-Region aus.
- Lassen Sie Block all public access aktiviert, um Ihren Bucket abzusichern.
- Klicken Sie auf Create bucket.

Bucket-Policy konfigurieren:

Aktualisieren Sie Ihre Bucket-Policy so, dass CloudFront mithilfe von Origin Access Control (OAC) sicher auf Ihren S3-Bucket zugreifen kann. Wenden Sie diese Policy an, nachdem Sie die Distribution im nächsten Abschnitt erstellt haben und ihre ID verfügbar ist:

{
  "Version": "2012-10-17",
  "Statement": {
    "Sid": "AllowCloudFrontServicePrincipal",
    "Effect": "Allow",
    "Principal": {
      "Service": "cloudfront.amazonaws.com"
    },
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::your-bucket-name/*",
    "Condition": {
      "StringEquals": {
        "AWS:SourceArn": "arn:aws:cloudfront::111122223333:distribution/<CloudFront distribution ID>"
      }
    }
  }
}

Ersetzen Sie your-bucket-name, die Beispiel-Konto-ID 111122223333 und <CloudFront distribution ID> durch Ihre tatsächlichen Werte.

CORS aktivieren (falls erforderlich):

Wenn Ihre Anwendung Cross-Origin Resource Sharing (CORS) benötigt, konfigurieren Sie die CORS-Policy für Ihren S3-Bucket:

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
  }
]

CloudFront konfigurieren

CloudFront-Distribution erstellen:
- Navigieren Sie zur CloudFront-Konsole.
- Klicken Sie auf Create Distribution.
- Wählen Sie unter Origin Domain den regulären S3-Bucket-Endpunkt aus, nicht einen S3-Website-Endpunkt.
- Wählen Sie für Origin Access die Option Origin Access Control (OAC).
- Klicken Sie auf Create new OAC, damit CloudFront sicher auf Ihren S3-Bucket zugreifen kann.
- Behalten Sie die empfohlene Einstellung Sign requests bei, damit sich CloudFront gegenüber S3 über HTTPS authentifiziert.
- Stellen Sie sicher, dass Ihre Bucket-Policy aktualisiert wurde, um dem OAC Zugriff zu gewähren.
Standard-Cache-Verhalten konfigurieren:
- Setzen Sie Viewer Protocol Policy auf Redirect HTTP to HTTPS.
- Erlauben Sie GET und HEAD; ergänzen Sie OPTIONS, wenn Ihre Anwendung CORS-Preflight-Anfragen stellt.
- Aktivieren Sie Cached HTTP Methods für GET und HEAD.
- Passen Sie bei Bedarf die Cache-Key-Einstellungen unter Cache key and origin requests an.
Cache-Einstellungen konfigurieren:
- Setzen Sie Default TTL auf 86.400 Sekunden (1 Tag).
- Setzen Sie Maximum TTL auf 31.536.000 Sekunden (1 Jahr).
- Setzen Sie Minimum TTL auf 0 Sekunden.

Fehlerantworten konfigurieren:

Erstellen Sie die referenzierten Fehlerobjekte zunächst im Bucket. Wenn Sie CloudFormation verwenden, lautet das relevante Distribution-Fragment:

CustomErrorResponses:
  - ErrorCode: 404
    ResponseCode: 404
    ResponsePagePath: /404.html
    ErrorCachingMinTTL: 300
  - ErrorCode: 500
    ResponseCode: 500
    ResponsePagePath: /500.html
    ErrorCachingMinTTL: 10

Security-Header aktivieren:

Weisen Sie dem Cache-Verhalten eine Response-Headers-Policy zu. Setzen Sie X-Content-Type-Options: nosniff und eine geeignete HSTS-Policy, nachdem Sie bestätigt haben, dass HTTPS funktioniert. Aktivieren Sie HSTS includeSubDomains oder preload nicht, es sei denn, jede betroffene Subdomain unterstützt HTTPS. Eine Lambda@Edge-Funktion ist nicht nötig, nur um Header hinzuzufügen.

Für den Zugriff im Browser über fetch() oder Canvas verwenden Sie eine CORS-Response-Headers-Policy, die zu den Ursprüngen der Anwendung passt. Wenn Sie CORS-Anfragen stattdessen an S3 weiterleiten, leiten Sie Origin sowie die erforderlichen Preflight-Header weiter und berücksichtigen Sie diese in der Cache-Policy. CORS ist keine Authentifizierung.

Bildauslieferung optimieren

Cache-Control-Header konfigurieren:

Wenn Sie versionierte Bilder nach S3 hochladen, setzen Sie passende Cache-Control-Header. Ein Beispiel, wenn boto3 installiert ist und die AWS-Zugangsdaten über die Standard-Provider-Chain konfiguriert sind:

import boto3

s3_client = boto3.client('s3')
with open('image.jpg', 'rb') as image_file:
    s3_client.put_object(
        Bucket='your-bucket-name',
        Key='images/image-v2.jpg',
        Body=image_file,
        ContentType='image/jpeg',
        CacheControl='public, max-age=31536000, immutable'
    )

Versionierte Objektnamen verwenden:

Ändern Sie den Objektschlüssel, wenn Sie ein als immutable gecachtes Bild ersetzen:
```
https://d1234.cloudfront.net/images/image-v2.jpg
```
Bildoptimierung umsetzen:

S3 und CloudFront ändern die Größe von Bildern nicht und konvertieren sie auch nicht von sich aus. Erzeugen Sie Varianten vor dem Upload oder ergänzen Sie einen separaten Bildverarbeitungsdienst. Query-Parameter haben keinerlei Transformationswirkung, sofern dieser Dienst sie nicht implementiert. Wenn Sie für die Versionierung Query-Strings statt Objektnamen verwenden, nehmen Sie den Versionsparameter explizit in den Cache-Key auf.

Monitoring und Kostenoptimierung

CloudWatch-Monitoring einrichten:

Erstellen Sie CloudWatch-Dashboards, um zentrale Metriken zu verfolgen:
- Cache-Trefferquoten.
- Fehlerraten.
- Latenz und Bandbreitennutzung.
- Anzahl der Anfragen.
Benachrichtigungen konfigurieren:

Richten Sie CloudWatch-Alarme ein für:
- Hohe Fehlerraten (über 1 %).
- Niedrige Cache-Trefferquoten (unter 85 %).
- Ungewöhnliche Traffic-Muster.
- Bandbreitenspitzen.
Kosten optimieren:
- Verwenden Sie Price Class 100, um Nordamerika und Europa abzudecken.
- Aktivieren Sie Komprimierung, um den Bandbreitenverbrauch zu senken.
- Setzen Sie passende TTL-Werte, um Cache-Treffer zu maximieren.
- Überprüfen Sie regelmäßig die reservierte Kapazität anhand Ihrer Nutzungsmuster.

Häufige Probleme beheben

Prüfen Sie, ob der Status Ihrer CloudFront-Distribution „Deployed“ lautet.
Sehen Sie in den AWS-CloudWatch-Logs nach detaillierten Fehlermeldungen.
Stellen Sie sicher, dass Ihre S3-Bucket-Policy und Ihre OAC-Konfiguration korrekt eingerichtet sind.
Bestätigen Sie, dass Cache-Control-Header angewendet werden, indem Sie die HTTP-Response-Header prüfen.
Passen Sie die TTL-Einstellungen an, wenn Sie auf veraltete Inhalte stoßen.

Ihr CDN testen

Status der Distribution prüfen:

Stellen Sie sicher, dass der Status Ihrer CloudFront-Distribution Deployed lautet.

Das Laden von Bildern testen:

<img
  src="https://your-distribution-id.cloudfront.net/images/test.jpg"
  alt="Test Image"
  loading="lazy"
  width="800"
  height="600"
/>

Performance überwachen:
- Verfolgen Sie die Performance mit AWS-CloudWatch-Metriken.
- Überwachen Sie Cache-Trefferquoten und Fehlerraten.
- Verfolgen Sie die Latenz in verschiedenen Regionen.
- Analysieren Sie die Muster der Bandbreitennutzung.

Bewährte Verfahren

Bildoptimierung:
- Verwenden Sie passende Formate: JPEG für Fotografien, PNG für Grafiken mit Transparenz.
- Setzen Sie responsive Bilder mit den Attributen srcset und sizes um.
- Aktivieren Sie Brotli- oder GZIP-Komprimierung für textbasierte Assets.
Sicherheit:
- Liefern Sie Inhalte ausschließlich über HTTPS aus.
- Setzen Sie geeignete CORS-Policies durch.
- Verwenden Sie bei Bedarf Signed URLs oder Signed Cookies für private Inhalte.
- Rotieren Sie Sicherheits-Zugangsdaten regelmäßig.
- Stellen Sie sicher, dass Ihr S3-Bucket ausschließlich über CloudFront erreichbar ist.
Performance:
- Setzen Sie geeignete TTL-Werte, um Aktualität und Effizienz auszubalancieren.
- Verwenden Sie versionierte Objektnamen für unveränderliche Assets.
- Richten Sie eigene Fehlerseiten ein.
- Überwachen und optimieren Sie kontinuierlich die Cache-Trefferquoten.

Fazit

Ein Bild-CDN mit AWS S3 und CloudFront bietet eine skalierbare und sichere Lösung, um Bilder weltweit schnell auszuliefern. Dieses Setup steigert die Performance Ihrer Website und eröffnet fortgeschrittene Optimierungstechniken, die eine hochwertige Bildauslieferung sicherstellen.

Wenn Sie einen Managed Service suchen, der sowohl CDN-Funktionalität als auch fortgeschrittene Bildverarbeitung umfasst, werfen Sie einen Blick auf Transloadit mit umfassenden Funktionen zur Bildoptimierung und -auslieferung.