So hosten Sie eine serverlose Website mit AWS CloudFront und S3

Wenn Sie eine Website auf AWS betreiben möchten, benötigen Sie möglicherweise nicht einmal einen Server! CloudFront CDN AWS ​​​​kann statische Webinhalte direkt aus einem S3-Bucket bereitstellen, sodass Sie nur für übertragene Anfragen und Daten bezahlen müssen (die möglicherweise sogar kostenlos sind).

Wie funktioniert serverloses Hosting?

„Serverlos“ ist das Konzept, Anwendungen auszuführen, ohne selbst dedizierte Linux-Server zu verwalten, normalerweise über eine Platform-as-a-Service-Lösung wie AWS App Runner oder Lambda Functions. Während Sie eine normale Anwendung wie NGINX in einer virtuellen EC2-Maschine ausführen können, können Sie normalerweise dieselbe Anwendung bedienen, ohne Server auszuführen.

Diese spezielle serverlose Lösung verwendet den Simple Storage Service (S3) von AWS, um statische Inhalte für die Website zu hosten, anstatt sie selbst von einem NGINX-Server bereitzustellen. „Statisch“ bedeutet einfach, dass Sie Dateien bereitstellen, anstatt Seiten zu erstellen, die sowohl einfache HTML + CSS-Websites als auch vollständige clientseitige JavaScript-Webanwendungen enthalten. Dies schließt insbesondere serverseitige Hosting-Frameworks wie WordPress (PHP), Ruby on Rails und ASP.NET nicht ein, aber viele Websites enthalten nur statische Inhalte.

Der Vorteil dieser Lösung ist die Null-Abhängigkeit von Ihren eigenen Servern – S3 antwortet immer auf Anfragen, sodass beliebig viele Personen auf Ihre Website zugreifen können. Vor S3 können Sie CloudFront, eine AWS Content Delivery Network (CDN)-Lösung, verwenden. CloudFront verwendet Hunderte von Edge-Caches, die alle für Sie in S3 zwischengespeichert werden, wodurch Latenz und Durchsatz erhöht und gleichzeitig die Kosten gesenkt werden.

In diesem Netzwerk-Setup ist alles, was Benutzeranfragen verarbeitet, komplett serverlos. CloudFront-Server werden von AWS verwaltet und speichern Inhalte automatisch im Cache und leiten Benutzer zu einem Endpunkt weiter, der nur ein S3-Bucket ist.

Wenn Sie eine Art Backend oder API ausführen müssen, um Ihre Webanwendung zu verbinden, können Sie wahrscheinlich andere serverlose Tools wie Lambda-Funktionen verwenden, um dies zu tun. Dieses Setup ist sogar noch besser, da S3- und API-Anforderungen separat skaliert werden.

Wenn Sie mehr über die Verwendung von API Gateway als Front-End für Lambda-Funktionen erfahren möchten, können Sie unseren Leitfaden zur Einrichtung lesen.

Dies ist zwar einfach, aber tatsächlich ein gutes Setup für Unternehmen, um statische Inhalte auf AWS zu hosten. Es ist robust, hochgradig skalierbar und kann sogar mit der automatischen Bereitstellung von CodePipeline verwendet werden, um Ihre Site aus Quelldateien zu aktualisieren.

Wie viel kostet das?

Da serverloses Hosting genau so skaliert, wie Sie es verwenden, zahlen Sie nur für das, was Sie verwenden. Dadurch können Sie viel Geld auf Servern sparen, die sonst größtenteils im Leerlauf wären. Normalerweise zahlen Sie pro Prozessorstunde etwas mehr, als wenn Sie es selbst tun würden, aber dies wird normalerweise durch die Tatsache ausgeglichen, dass Sie fair für die genaue Nutzung bezahlen.

Es besteht jedoch eine gute Chance, dass es nur kostenlos sein wird. Das AWS Always Free-Kontingent umfasst 100 GB Bandbreite und ein volles Terabyte CloudFront-Bandbreite. Im Vergleich dazu bieten Ihnen die meisten anderen kostenlosen Stufen von Hosting-Diensten für statische Websites (wie Github Pages und Firebase) etwa 10 GB.

1 TB Bandbreite kostenlos ist sicherlich sehr schön, da dies bedeutet, dass die meisten Websites, die nicht Tonnen von Inhalten bereitstellen, einen großen Puffer haben, bevor erhebliche Beträge belastet werden.

Allerdings werden Ihnen weiterhin S3-Anfragen in Rechnung gestellt, die sich summieren, und wenn Ihre Website Hunderte von GB an Inhalten speichert, können auch dafür hohe Gebühren anfallen. Die effektive Nutzung von CloudFront-Caching kann jedoch, wo immer möglich, die Anzahl der erforderlichen Anfragen an den Ursprung (S3) reduzieren, und die meisten Sites werden recht klein sein.

Richten Sie eine statische S3-Bucket-Website ein

Gehen Sie zunächst zur S3-Verwaltungskonsole und erstellen Sie einen neuen Bucket.  Sie müssen „Öffentlichen Zugriff blockieren“ deaktivieren, damit es sichtbar ist. AWS warnt davor, dass dies eine schlechte Idee ist, außer für Anwendungsfälle wie das Hosten statischer Websites. Da wir genau das tun, können Sie es ignorieren, aber Sie möchten die Geheimnisse auf keinen Fall in den Papierkorb laden – es wird alles lesbar sein.

Es entfernt nur den Block darauf; Sie müssen das öffentliche Lesen auch ausdrücklich über die Papierkorbrichtlinie im Abschnitt Berechtigungen zulassen. Stellen Sie sicher, dass Sie den Ressourcennamen hier durch den richtigen Bucket ersetzen.

{

„Version“: „2012-10-17“,

Aussage:[

{

„Sid“: „PublicReadGetObject“,

„Effekt“: „Erlauben“,

„Rektor“: „*“,

„Aktion“:[„s3:GetObject“],

„Ressource“: [„arn:aws:s3:::example-bucket/*“]

}

]

}

Als nächstes müssen Sie Ihre Inhalte hochladen. Sie können Drag-and-Drop ziehen, aber wenn Sie den gesamten Ordner manuell übertragen möchten, können Sie die AWS CLI verwenden, um Ihren S3-Bucket mit Ihrem lokalen Verzeichnis zu synchronisieren. Sie können diesen Bucket auch als Ausgabe einer CodePipeline-Bereitstellung einrichten, die Ihre Artefakte aus dem Quellrepository erstellen kann.

Wir werden die S3-API verwenden und die Basisvorlage laden create-react-app . Nach der Synchronisierung sehen Sie index.html im S3.

aws s3 sync. s3://bucket-name

Bevor es fertig ist, müssen Sie zu Cart Properties gehen, nach unten scrollen, um Static Web Hosting zu finden, und es aktivieren. Sie müssen einen Index und ein Fehlerdokument einrichten, und hier können Sie auch die Umleitungsregeln schreiben.

Danach sehen Sie den Website-Endpunkt in den Eigenschaften.

CloudFront-CDN verbinden

CloudFront hat viele Optionen, aber die Standardeinstellungen funktionieren gut für eine einfache S3-Website, sodass die Einrichtung ziemlich einfach ist. Gehen Sie zur CloudFront-Konsole  und erstellen Sie eine neue Verteilung.

Sie können die Cache-Einstellungen optimieren, aber das Standardverhalten sollte für die meisten Benutzer geeignet sein.

Sie müssen Ihre eigene Domäne verbinden, und dazu gehört auch das Generieren eines SSL-Zertifikats, das mit AWS Certificate Manager (ACM) verwaltet werden kann. Sie können auf diese Schaltfläche klicken, um ein Zertifikat anzufordern, was einige Zeit in Anspruch nehmen kann, um DNS zu validieren, wenn Sie AWS Route 53 DNS nicht verwenden.

Natürlich müssen Sie auch DNS mit einem CNAME-Eintrag konfigurieren, der auf den CloudFront-Endpunkt verweist.

Nachdem Sie das Zertifikat und DNS eingerichtet haben, erstellen Sie eine Verteilung und warten Sie etwa 15 Minuten, bis CloudFront sie bereitgestellt hat. Sobald dies erledigt ist, können Sie den CloudFront-Endpunkt oder Ihre benutzerdefinierte Domäne besuchen und sehen, wie Ihre Website vom S3-Bucket bereitgestellt wird.