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
Certificate via Certificate Manager
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.
