Einfaches Site-Hosting mit Amazon S3 und HTTPS

Hiya Leute!

In diesem Tutorial werde ich Ihnen zeigen, wie Sie eine statische Website mit HTTPS unter AWS mit einer benutzerdefinierten Domain hosten. All dies ist mit der kostenlosen Stufe AWS möglich.

Für die Dienste, die wir nutzen werden, fallen jedoch einige geringe Gebühren an. Im Allgemeinen sollten diese 1 USD / Monat nicht überschreiten.

Wir werden eine Kombination der folgenden AWS-Services verwenden:

- S3

- Route53

- Zertifikatsmanager

- CloudFront

Lass uns loslegen!

Richten Sie Ihre S3-Buckets ein

Erstens benötigen Sie zwei S3-Buckets . Beide sollten Ihrem benutzerdefinierten Domainnamen mit dem zweiten übereinstimmen, einschließlich der WWW-Subdomain.

Eimer 1:mywebsite.com

Eimer 2:www.mywebsite.com

Der erste Bucket (mywebsite.com) ist der Haupt-Bucket für Ihre Site. Dies enthält alle Ihre Dateien und Assets für Ihre statische Website.

Als nächstes richten wir diesen Bucket für statisches Site-Hosting ein. Sie finden dies auf der Registerkarte Eigenschaften des Buckets. Wir behalten die hier angegebenen Standardeinstellungen bei, wobei der Index der Site auf index.html festgelegt ist.

Wir müssen diesen Bucket auch öffentlich zugänglich machen, da der Browser eines Benutzers auf die Dateien des Buckets zugreifen muss, um die Website zu rendern. Wir können dies tun, indem wir auf der Registerkarte Berechtigungen eine Bucket-Richtlinie festlegen.

{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "MY_BUCKET_ARN" } ]}

Dies ist eine einfache Richtlinie, die nur den öffentlichen Lesezugriff auf Objekte im Bucket ermöglicht. Wenn Sie nun zu dem Endpunkt gehen, der in der statischen Hosting-Konfiguration des Buckets definiert ist, sollte Ihre Website angezeigt werden.

Fortschritt! Aber wir können es besser machen.

Den zweiten Bucket (www.mywebsite.com) lassen wir leer, konfigurieren ihn jedoch so, dass er mit HTTP als Protokoll zu unserem ersten Bucket umleitet (wir machen ihn später zu HTTPS).

Ihre Eimer sind jetzt bereit zu gehen!

Konfigurieren Sie Domänen mit Route53

Ihre Website ist also betriebsbereit, aber nur über den Bucket-Endpunkt und nicht über Ihre benutzerdefinierte Domain zugänglich. Lassen Sie uns das ändern.

Fahren Sie zur Route53 . Wenn Sie Ihre Domain beim Amazon Registrar registriert haben, sollten Sie feststellen, dass für Sie eine gehostete Zone mit zwei Datensatzgruppen eingerichtet wurde. Eine für Name Server (NS) und eine für SOA.

Alles, was wir tun müssen, ist, zwei weitere Datensatzgruppen zu erstellen, die auf die S3-Bucket-Endpunkte verweisen.

Für jeden Datensatz:

- Typ: A - IPv4-Adresse

- Alias: Ja

- Alias-Ziel: Der Endpunkt der S3-Website, der dem entspricht, was Sie für Name festgelegt haben.

Jetzt können wir zur benutzerdefinierten URL gehen… und voilà!

Wir sind fast da, aber es gibt noch eine letzte Sache, die uns fehlt ...

Hinweis : Wenn Ihre Domain bei einem anderen Domain-Registrar (nicht bei Amazon) registriert ist, müssen Sie verschiedene Schritte ausführen, um dies einzurichten. Normalerweise müssen Sie einen CNAME-Datensatz mit dem Wert des Hauptendpunkts der S3-Buckets hinzufügen.

Fehlerbehebung :

Wenn Sie die gehostete Zone gelöscht haben, die Amazon bei der ersten Registrierung der Domain erstellt hat (ich habe dies getan, weil für gehostete Zonen Gebühren anfallen), müssen Sie eine neue gehostete Zone von Grund auf neu erstellen.

  1. Wählen Sie "Hosted Zone erstellen" und legen Sie den Domainnamen fest, z. B. "mywebsite.com".
  2. Dadurch werden einige neue Datensatzgruppen für die Typen NS und SOA generiert.
  3. Gehen Sie in Ihre registrierte Domain und aktualisieren Sie die Nameserver-Werte auf die Werte, die im neuen NS-Datensatz festgelegt wurden.

Anfordern eines Zertifikats

Genial, die Seite wird jetzt über die benutzerdefinierte URL gehostet! Wir können jedoch nur über das HTTP-Protokoll darauf zugreifen.

Wir sollten immer sicherstellen, dass unsere Websites mithilfe des HTTPS-Protokolls gesichert sind. Dies schützt unsere Website und Benutzer vor böswilligen Injektionsangriffen und garantiert Authentizität.

Gehen Sie zum Zertifikat-Manager in AWS Console und fordern Sie ein neues öffentliches Zertifikat an (dies ist kostenlos). Sie werden aufgefordert, die Domainnamen einzugeben, die Sie sichern möchten.

Bevor das Zertifikat ausgestellt werden kann, muss Amazon überprüfen können, ob Sie die angegebenen Domains besitzen.

Sie können zwischen zwei Überprüfungsmethoden wählen: E-Mail oder DNS.

E-Mail ist im Allgemeinen einfacher, aber Sie müssen sicherstellen, dass Sie auf die E-Mail zugreifen können, mit der die Domain registriert wurde. Wenn Sie Amazon Registrar und Route53 verwendet haben, können Sie alternativ die DNS-Methode auswählen. Dazu müssen Sie der gehosteten Zone einige bestimmte Datensatzgruppen hinzufügen. Dies ist jedoch meistens für Sie automatisiert, sodass es recht einfach ist.

It can take a few minutes for the certificate to be issued after validation.

When its all done we can continue to the final step!

Configuring CloudFront

For the final step we are going to use CloudFront which allows us to use the new SSL certificate to serve the website with HTTPS. CloudFront also speeds up the distribution of web content by storing it at multiple edge locations and delivering from the closest edge location to a user.

We need two new web distributions, one for each S3 bucket. Head to CloudFront in the AWS Console and create the first web distribution.

There are lots of settings available to create a web distribution, but for the basics we only need to change five:

  1. Origin Domain Name: Set this to the S3 website endpoint for one of the buckets. Important: This field will give you some auto-complete options with your S3 bucket names. However, using these can cause issues with redirecting to the bucket endpoint. So instead use the bucket endpoint directly.
  2. Origin Id: This populated for you when you enter Origin Domain Name.
  3. Viewer Protocol Policy: Set to “Redirect HTTP to HTTPS”.
  4. Alternate Domain Names: This should match the name of the S3 bucket you’re pointing to. For example “mywebsite.com”.
  5. SSL Certificate: Select “Custom SSL Certificate” and select your new certificate from the dropdown.

Do this again for the second S3 bucket.

The distributions can take a while to spin up, so while we wait, let’s do the finishing steps.

Back in S3, go to your secondary bucket (www.mywebsite.com), in the Properties tab and under Static Website Hosting set the redirect protocol to HTTPS.

Finally, head back to Route53. We need to update the custom A records we created to now target the CloudFront distributions rather than the S3 buckets. For each record, change the Alias Target and select the CloudFront distribution available in the dropdown.

Note: Again, if you are using another DNS service you’ll need to go update the CNAME record from there to point to the CloudFront domain name.

And there you have it! Your beautiful website is now available at the custom domain and served with HTTPS!

Thanks for reading! I hope this guide was useful and enjoyable, I’d love to know if you found it helpful.