So hosten Sie Ihre statische Website mit AWS - A Beginner's Guide

Als ich letztes Jahr mein erstes Portfolio erstellte, basierte ich es auf dem, was ich von freeCodeCamp gelernt hatte (HTML, CSS und ein wenig JavaScript).

Zu diesem Zeitpunkt hatte ich mein Portfolio nur auf localhost angezeigt, indem ich die Dateien auf meinem lokalen Computer angezeigt hatte. Ich wusste nichts darüber, wie man eine Website online hostet.

Es war nicht einfach zu lernen, wie man meine erste Website hostet, aber es war eine großartige Lernerfahrung. Wenn Sie ein aufstrebender Webentwickler sind oder nur daran interessiert sind, eine eigene statische Website zu starten, dann hoffe ich, dass Sie diesen Leitfaden hilfreich finden.

Für wen ist dieser Leitfaden?

Dieser Leitfaden richtet sich an Anfänger , die eine statische Website (eine Website mit festem Inhalt) hosten möchten. Ich werde eine Anleitung für Folgendes bereitstellen:

  1. So kaufen Sie eine Domain.
  2. So konfigurieren Sie Ihre Domain für einen externen Hosting-Anbieter.
  3. So hosten Sie Ihre Website mit Amazon Web Services (AWS).
  4. So machen Sie Ihre Website mit Amazon Certification Manager sicher (SSL-Zertifizierung).

Möglicherweise gibt es eine für Sie neue Terminologie. Bitte suchen Sie nach Begriffen, die Ihnen nicht bekannt sind. Ich habe nützliche Links und Erklärungen eingefügt, wo ich es für angemessen hielt.

Was ist ein Domainname und DNS (Domain Name System)?

Ein Domainname ist Ihre Website-Adresse. Zum Beispiel thecodinghamster.com. Bei einem Computer besteht ein Domänenname jedoch aus einer Reihe von Zahlen (einer IP-Adresse). Eine IP-Adresse sieht folgendermaßen aus: 123.321.0.1

Es fällt uns nicht leicht, uns an eine lange Reihe von Zahlen zu erinnern. Ihr Computer verweist also auf ein DNS , um eine textbasierte Website-Adresse in eine IP-Adresse zu übersetzen, die er dann verstehen kann. Ein DNS ist wie ein Verzeichnis.

Ich habe dieses großartige Video gesehen, in dem Domainname, DNS und die Funktionsweise in weniger als fünf Minuten erklärt werden. Bitte schauen Sie sich die ersten fünf Minuten des Videos an, wenn Sie interessiert sind:

Wo können Sie Ihren Domainnamen kaufen?

Sie können einen Domainnamen bei einem Domainnamen-Registrar kaufen. Die Preise beginnen bei ein paar Dollar. Ihr Domainname ist eindeutig. Jeder Domain Name Registrar bietet verschiedene Ebenen von Services / Support. Sie können Ihre Domain jedoch bei jedem Registrar registrieren.

Was ist ein Hosting-Anbieter?

„Ein Internet-Hosting-Dienst ist ein Dienst, der Internet-Server betreibt und es Organisationen und Einzelpersonen ermöglicht, Inhalte für das Internet bereitzustellen. Es werden verschiedene Servicelevel und verschiedene Arten von Services angeboten. “

Als ich nach einem Hosting-Anbieter für meine Website suchte, habe ich verschiedene Optionen untersucht. Die Preise lagen zwischen 2,00 und 5,00 GBP pro Monat mit verschiedenen Speicheroptionen von 0,5 GB bis 10 GB. Die Preise schienen angemessen, aber ich wollte nur eine statische Website hosten. Es hatte einige Bilder, HTML-, CSS- und JavaScript-Dateien. Kein dynamischer Inhalt.

Warum AWS?

Nach einigen weiteren Recherchen fand ich AWS. AWS bietet eine kostenlose Tier-Option. Im Wesentlichen erhalten Sie viele kostenlose Produkte. Einige von ihnen verfallen nach 12 Monaten, andere sind auf Dauer frei. Die einzigen Kosten, die Ihnen für das Hosting einer statischen Website entstehen, sind die Kosten für die Einrichtung einer gehosteten Zone. Dies kostet 0,50 USD pro Monat. Also habe ich mich für AWS entschieden und mein Konto eingerichtet.

Das Tolle an AWS ist der Preis und es ist ein zuverlässiger Hosting-Anbieter. Beachten Sie jedoch, dass Sie auf deren Dokumentation angewiesen sind. Als ich anfing zu lesen, welche Dienste AWS anbot, wurde es schnell verwirrend! Ich habe den offiziellen AWS-Leitfaden zum Einrichten statischer Websites verwendet. Aber ich habe mich verlaufen, als ich auf einen Link zu einem anderen Link geklickt habe und so weiter. Ich begann andere Leitfäden zu recherchieren, um Wissenslücken auszugleichen.

Ich fand diesen ausgezeichneten Leitfaden von Victoria Drake.

Ich folgte Victoria Drakes Führer neben dem AWS und schaffte es, mich durchzumischen. Aber es gab noch ein paar Dinge, die nicht erklärt wurden und die ich hoffentlich konkretisieren möchte.

Bevor wir fortfahren, ist hier Ihre Aufgabenliste:

  • Recherchieren Sie nach Domain-Registraren und kaufen Sie Ihren Domain-Namen.
  • Eröffnen Sie ein kostenloses Konto bei AWS.
  • Öffnen Sie sowohl die Dokumentation von AWS als auch den Leitfaden von Victoria Drake. Verwenden Sie meinen Leitfaden, um Sie durch die Dokumentation zu führen (hoffe, das macht Sinn!).

Auf geht's!

AWS: Erstellen Sie eine gehostete Zone auf Route 53.

Auf Route 53 werden alle Ihre DNS-Anforderungen verarbeitet.

Das erste, was Sie einrichten müssen, ist Ihre gehostete Zone mit Route 53. Dies ist wirklich einfach, wenn Sie Ihre Domain über AWS gekauft haben. Eine gehostete Zone wird automatisch erstellt, sobald Sie sie gekauft haben. Wenn Sie dies getan haben, fahren Sie einfach mit dem nächsten Abschnitt fort ( Richten Sie Ihre S3-Buckets ein ).

Wenn Sie jedoch wie ich waren und Ihren Domainnamen über einen anderen Registrar gekauft haben, gehen Sie bitte wie folgt vor.

Im nächsten Teil erfahren Sie, wie Sie eine gehostete Zone auf Route 53 erstellen, wenn Sie Ihren Domainnamen nicht bei AWS gekauft haben:

  1. Gehen Sie in Ihrer Konsole zu Route 53 und klicken Sie auf "Hosted Zone erstellen". Geben Sie Ihre Domain-Adresse ein, der Kommentar ist optional und wählen Sie eine "Public Hosted Zone". Klicken Sie auf "Erstellen".

2. Sobald Ihre gehostete Zone erstellt wurde, benötigen Sie Ihre NS-Datensätze (Name Server):

3. Gehen Sie zu Ihrem Domainnamen-Registrar und melden Sie sich an. Abhängig von Ihrem Registrar sollten Sie in Ihren Einstellungen einen Abschnitt namens "Nameserver" finden, den Sie bearbeiten können. Sie müssen über die AWS NS-Einträge kopieren und die vorhandenen NS-Einträge in Ihren Domäneneinstellungen ändern.  

Bitte beachten Sie, dass Sie den Punkt / Punkt am Ende des NS-Datensatzes nicht kopieren dürfen. Zum Beispiel sollte "ns-63.awsdns-07.com" sein, nicht "ns-63.awsdns-07.com".

Die Vermehrung dauert bis zu 24 Stunden.

Richten Sie Ihre S3-Buckets ein

In der Zwischenzeit können Sie Ihre S3-Buckets einrichten. Der S3-Bucket ist der Speicher für Ihre Dateien, z. B. Ihre index.html.

Sie müssen zwei Buckets für Ihre Website konfigurieren: 1) yourdomainname.com und 2) www.yourdomainname.com.

Der erste Bucket ist Ihr Haupt-Bucket, in den Sie alle Ihre Dokumente hochladen, z. B. Ihre index.html. Der zweite Bucket leitet zum ersten Bucket weiter. Befolgen Sie zum Einrichten Ihrer S3-Buckets die AWS-Dokumentation zum Einrichten Ihres S3-Buckets (2: Erstellen und Konfigurieren von Buckets und Hochladen von Daten).

Neben der Dokumentation sind einige Dinge zu beachten:

  • In Abschnitt 2.1 (Teil 2): ​​Klicken Sie auf den Link Wie erstelle ich einen S3-Bucket? Dies ist eine Schritt-für-Schritt-Anleitung, in der alle Einstellungen erläutert werden, die Sie auswählen müssen.
  • In Abschnitt 2.1 (Teil 3): Sie müssen Ihre Website-Dateien noch nicht hochladen. Sie können in der Zwischenzeit eine test index.html hinzufügen.

Notieren Sie sich Ihren Endpunkt . Sie finden dies in Ihrem S3-Bucket> Registerkarte "Eigenschaften"> "Statisches Webhosting". Es sollte ungefähr so ​​aussehen: //IhrDomänenname.com.s3-website.eu-west-2.amazonaws.com

Fügen Sie die Alias- / A-Datensätze in Route 53 hinzu

Kehren Sie schließlich zu Route 53 zurück und öffnen Sie Ihre gehostete Zone, um Ihre Alias-Einträge einzurichten. Sie können der Dokumentation unter „Schritt 3: Hinzufügen von Alias-Datensätzen für example.com und www.example.com“ folgen. Es ist ganz einfach.

Sobald sich die NS-Einstellungen verbreitet haben, ist Ihre Site live ! Sie können Ihre Website unter der Domain-Adresse besuchen, z. B. yourdomainname.com

Beachten Sie jedoch, dass dies nicht sicher ist und in der Adressleiste ein // Präfix angezeigt wird. Ich werde im nächsten Abschnitt darauf zurückkommen.

Wie machen Sie Ihre Website sicher und was ist ein SSL-Zertifikat?

Es ist sehr wichtig, Ihre Website sicher zu machen. Dazu benötigen Sie ein SSL-Zertifikat. SSL steht für Secure Sockets Layer und verwendet Verschlüsselung, um Daten sicher zwischen einem Benutzer und einer Site zu übertragen. Google wird auch Rankings für Websites mit HTTPS verbessern.

Wenn Sie die Website mit einem SSL-Zertifikat sichern, sehen Sie // und ein Vorhängeschlosssymbol in Ihrer Adressleiste.

Es gibt verschiedene Arten von SSL-Zertifikaten: Extended Validation Certificate und Domain Validated Certificate. Für eine persönliche Website oder ein Blog ist nur ein domänenvalidiertes Zertifikat erforderlich. Der Name Ihres Unternehmens wird auch nicht wie im obigen Beispiel links in der Leiste angezeigt. Sie erhalten dies nur, wenn Sie über ein erweitertes Validierungszertifikat verfügen, das eher für große Unternehmen geeignet ist.

Was kostet ein SSL-Zertifikat?

Ich habe eine Reihe von Möglichkeiten gesehen, ein SSL-Zertifikat zu erhalten. Sie können eine Prämie für einen Dienst zahlen, der dies in Ihrem Namen erledigt, oder Sie können dies kostenlos mit Let's Encrypt tun. Let's Encrypt ist eine offizielle Zertifizierungsstelle (CA). Sie müssen Ihr Zertifikat jedoch alle drei Monate erneuern, und der Vorgang ist ziemlich kompliziert.

Ich wollte keine Prämie zahlen oder mich alle drei Monate erneuern. Praktischerweise kann AWS SSL-Zertifikate gegen eine sehr geringe Gebühr ausstellen. Sie zahlen 0,75 USD für jedes ausgestellte Zertifikat und es dauert ein Jahr.

Wenn Sie sich nicht für AWS entscheiden, stellen Sie sicher, dass Sie Ihre Recherchen durchführen und eine vertrauenswürdige Zertifizierungsstelle auswählen!

Wie erhalten Sie ein SSL-Zertifikat mit AWS?

Melden Sie sich bei Ihrer AWS-Konsole an und navigieren Sie zum AWS Certificate Manager (ACM).

Stellen Sie sicher, dass Sie die Region von der Standardeinstellung (Ohio) in N. Virginia ändern. Dies ist in den Handbüchern nicht explizit und nur die Region N. Virginia kann Zertifikate ausstellen. Ich habe auf die harte Tour gelernt und viel Zeit verschwendet!

Klicken Sie dann unter "Bereitstellungszertifikate" auf "Erste Schritte".

Befolgen Sie die Dokumentation mit AWS („Anfordern eines öffentlichen Zertifikats über die Konsole“) und verwenden Sie das Handbuch von Victoria Drake (unter „SSL-Zertifikat“).

Zusätzlich zu den Anleitungen gibt es einige Dinge, die nicht vollständig erklärt wurden:

  • Sie müssen Ihren Domain-Besitz per E-Mail oder direkt mit DNS überprüfen. Ich würde vorschlagen, den Besitz immer durch DNS-Validierung zu überprüfen .
  • Sobald Sie Ihr Zertifikat angefordert haben, erhalten Sie so etwas (außer der Status steht noch aus). Klicken Sie auf "DNS-Konfigurationsdatei exportieren":

Es ist eine Excel-Tabelle, die ungefähr Folgendes enthält:

  • Sie müssen diese Einträge zu Ihren DNS-Einstellungen bei Ihrem Registrar hinzufügen. Melden Sie sich an und gehen Sie zu den DNS-Einstellungen. Die Benutzeroberfläche variiert je nach Registrar, aber Sie suchen in Ihren DNS-Einstellungen nach Ihren Host-Einträgen.
  • Klicken Sie auf "Datensatz hinzufügen "> Datensatztyp ist CNAME :

Sie müssen zwei Einträge hinzufügen: 1) Der Hostname sollte "@" sein und der Zielname sollte der Eintragswert aus der DNS-Konfigurationsdatei sein.

2) Der Hostname sollte * (Sternchen) sein und der Zielname sollte der Datensatzwert aus der DNS-Konfigurationsdatei sein.

Wenn Sie weitere Informationen zu CNAME und Datensatztypen wünschen, habe ich diesen hilfreichen Artikel gefunden.

Es ist ziemlich lang, aber ich habe den nützlichen Teil herausgezogen:

Hinweis: Der Hostname bezieht sich auf das Präfix vor dem Domänennamen. Verwenden Sie zum Erstellen eines leeren Datensatzes ein @ im Feld Hostname. Dies stellt ein leeres Präfix dar (der Name stimmt also genau mit dem Domainnamen überein, z. B. divapirate.com). Der @ Hostname wird auch als Stamm der Domäne bezeichnet. Ein * (Sternchen) im Hostnamen ist ein Platzhalter und steht für ein beliebiges Präfix. Wenn Sie beispielsweise einen Datensatz für * .divapirate.com erstellen, verweist .divapirate.com auf die angegebene IP-Adresse. “

Sie müssen nur auf die Bestätigung warten. Für mich dauerte das ungefähr eine Stunde.

Wie fügen Sie Ihr SSL-Zertifikat hinzu?

Mit AWS können Sie Ihrer Website ein SSL-Zertifikat hinzufügen, indem Sie CloudFront einrichten . CloudFront ist ideal, um Ihre Website zu beschleunigen. Ich habe die AWS-Dokumentation und den Leitfaden von Victoria Drake verwendet (achten Sie auf ihre nützlichen Tipps).

Beachten Sie, dass beim Erstellen Ihrer CloudFront-Distribution ein Dropdown-Menü zum Hinzufügen Ihres SSL-Zertifikats angezeigt wird. Wenn Ihnen bereits ein SSL-Zertifikat ausgestellt wurde, wird es im Dropdown-Menü vorab ausgefüllt.

Ihr Status in Ihrem CloudFront-Dashboard sollte in "Aktiviert" geändert werden. Dies ist nicht sofort und dauert ein wenig.

Fast dort…

Schließlich müssen Sie Ihren Domain-Namen von der CloudFront-Distribution erhalten. Es sollte so etwas wie dsfdser83543 sein. cloudfront.net .

Gehen Sie zurück zu Route 53> Gehostete Zone> und ändern Sie beide Alias-Datensätze (Alias-Ziel) in den CloudFront-Domänennamen.

Voila! Sie haben Ihre erste sichere statische Website mit AWS gehostet .

Ich hoffe, Sie fanden das nützlich. Wenn Sie Fragen haben oder einfach nur Hallo sagen möchten, finden Sie mich auf Twitter @PhoebeVF

Ein großes Dankeschön an Victoria Drake für ihren Führer. Weitere Informationen zu diesem Thema finden Sie in Victorias Artikel "Hosten Ihrer statischen Site mit AWS S3, Route 53 und CloudFront".

Abbildungen mit freundlicher Genehmigung von //undraw.co