Anwendung einer VR-Brille
Jonathan, Kiya | 29.02.2024

Optimierung der Ladezeiten von Bildern aus Airtable mit AWS CloudFront + S3

Webentwicklung > Optimierung der Ladezeiten von Bildern aus Airtable mit AWS CloudFront + S3

Innerhalb einer Webanwendung kann es wichtig sein, die Ladezeiten der Bilder, die beispielsweise aus Airtable geliefert werden, zu optimieren. Oftmals sind die Bild-URLs von Airtable nur für 120 Minuten gültig, weshalb eine Lösung erforderlich ist, die zuverlässige URLs liefert und gleichzeitig die Ladezeiten durch Caching optimiert. Hier kommt CloudFront in Verbindung mit S3 ins Spiel.

Die Bilder werden in einen S3 Bucket kopiert und von dort über CloudFront verfügbar gemacht. Da das Deployment der Webanwendung bereits mit AWS CDK durchgeführt wird, wird auch die CloudFront Distribution und der S3 Bucket über das CDK eingerichtet.

Voraussetzung

CDK Stack

1import { App, RemovalPolicy, Stack, type StackProps } from 'aws-cdk-lib';
2import { Certificate } from 'aws-cdk-lib/aws-certificatemanager';
3import { CachePolicy, Distribution } from 'aws-cdk-lib/aws-cloudfront';
4import { S3Origin } from 'aws-cdk-lib/aws-cloudfront-origins';
5import { Bucket } from 'aws-cdk-lib/aws-s3';
6
7export class CdkStack extends Stack {
8
9    constructor(scope: App, id: string, props?: StackProps) {
10        super(scope, id, props);
11
12        const imageBucket = new Bucket(this, `${id}ImageBucket`, {
13            bucketName: `${id.toLowerCase()}-images`,
14            removalPolicy: RemovalPolicy.DESTROY,
15        });
16
17        const certificate = Certificate.fromCertificateArn(
18            this,
19            `${id}ImageCertificate`,
20            'arn:aws:acm:us-east-1:123456789:certificate/d58dc2a5-3ebd-45ec-9655-745843af6ed3',
21        );
22
23        const distribution = new Distribution(this, `${id}Distribution`, {
24            defaultBehavior: {
25                origin: new S3Origin(imageBucket),
26                cachePolicy: CachePolicy.CACHING_OPTIMIZED,
27            },
28            certificate,
29            domainNames: ['example.domain.com'],
30        });
31    }
32}

Zusammenfassung und Fazit

Die Bilder des S3 Buckets sind nun unter example.domain.com erreichbar und gecacht. Aufgrund der Speicherung der Bilder in S3 sind wir nicht mehr gezwungen, alle 120 Minuten eine neue Bild-URL von Airtable abzurufen. Zudem haben wir nun statische URLs für unsere Bilder. Die Ladezeiten der Bilder werden dank CloudFront erheblich verkürzt und resultieren in keinem spürbaren Verzug in der Anzeige.

Literatur

Inhalt
  • Was ist die Lösung für ungültige URLs?
  • Wie kann man die Ladezeiten optimieren?
  • Welchen Vorteil hat das Speichern von Bildern in S3?
Headshot of Jonathan Zbick
Jonathan (Softwareentwickler)

... hat sein duales Studium für IT- und Softwaresysteme erfolgreich abgeschlossen und ist seit dem als Softwareentwickler am Standort Dortmund tätig. Am liebsten entwickelt er mit Typescript und Frame... mehr anzeigen

Gesicht von Kiya,- unsere KI Mitarbeiterin
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

More about this topic

More from Jonathan

Unsere Entwicklungsexpertise

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund