Statisches Website-Hosting auf AWS + CI/CD - DevOps

1. Einführung: Hallo da, das ist Valentine. Und heute wollte ich den Prozess des Hostings einer Website mit AWS durchgehen. Ich habe gerade einen neuen Domainnamen mitgebracht. Und ich zeige Ihnen Schritt für Schritt, wie eine einfache HTML- und JavaScript-Website mit AWS S3 oder den Prozess des Hostings einer echten Domain durchlaufen. Und zusammen werden wir einen AWS S3-Bucket einrichten, einige Dateien hochladen und alles so konfigurieren, dass es ordnungsgemäß ausgeführt wird. Im zweiten Teil des Tutorials zeige ich Ihnen, wie Sie den gesamten Prozess mit GitLab CI automatisieren können. Und zusammen werden wir eine einfache CICD-Pipeline bauen. Vertrauen Sie mir, es ist einfacher als Sie denken und Automatisierung ist so wichtig. Heute. Wir arbeiten von einem Git-Repository aus und alle Änderungen , die wir vornehmen, werden automatisch auf der Website bereitgestellt. jedoch zunächst sicher, dass wir uns gleich zu Beginn dieses Tutorials auf derselben Seite befinden und davon ausgehen, dass Sie ein AWS-Konto haben, das Ihre Dateien bei AWS hostet. S3 funktioniert nicht, wenn Ihre Website komplexer ist und eine Datenbank benötigt, in der Sie eine Programmiersprache wie PHP, SPX oder ähnliches ausführen müssen . Dies funktioniert auch nicht, wenn Sie versuchen, eine WordPress-Website zu hosten. Dies wird für Angular- oder React-Projekt ziemlich gut funktionieren. , das eine Website in AWS hostet S3, das eine Website in AWS hostet, unterstützt auch kein HTTPS. Wenn Sie dies benötigen, müssen Sie AWS Cloudfront konfigurieren Zusätzlich zu dem, was ich Ihnen hier zeige. Lassen Sie uns damit direkt in das Tutorial springen. 2. Erstelle einen AWS: Amazon Web Services oder einfach AWS ist eine Cloud-Plattform, die über 170 Dienste bietet , die in Rechenzentren auf der ganzen Welt verfügbar sind. Zu diesen Diensten gehören virtuelle Server, verwaltete Datenbanken, Dateispeicher, Inhaltsbereitstellung und viele andere. Wenn Sie noch kein AWS-Konto haben, ist es ziemlich einfach, 10 zu erstellen. Geben Sie Ihre persönlichen Daten ein und klicken Sie auf Weiter. Wenn Sie dieses Konto für professionelle Zwecke wie innerhalb Ihrer Organisation verwenden oder Bereitstellungen durchführen oder AWS in Ihrem Unternehmen verwenden möchten. Professionell. Andernfalls, wenn Sie nur AWS lernen und damit experimentieren, ist es absolut in Ordnung, mit einem persönlichen Konto zu beginnen. Und ws ist ein kostenpflichtiger Service. Und obwohl es am Anfang ein kostenloses Kontingent gibt, das einige Grenzen aufweist und sich ideal zum Erlernen von AWS und zum Experimentieren dieser Theoriekarte eignet, eine Kreditkarte oder Debitkarte von Ihnen, nur für den Fall, dass Sie das kostenlose Limit überschreiten. Also ja, irgendwann ist AWS ein Unternehmen, also versuchen sie Geld zu verdienen. diesem Grund müssen Sie hier Ihre Kreditkarteninformationen eingeben. Andernfalls können Sie AWS nicht verwenden. Und ich füge diese Kreditkarteninformationen hinzu. Und zusätzlich muss ich auch meine Telefonnummer überprüfen. Jetzt wurde meine Identität überprüft und ich kann mein AWS-Konto verwenden. Aws verfügt auch über ein Supportsystem und Sie können den Support-Plan auswählen. Ich persönlich denke, dass ihre Unterstützung tatsächlich sehr, sehr gut ist. Sie benötigen jedoch nur Unterstützung von ihnen, wenn Sie AWS in Ihrem Unternehmen bereitstellen. Für nur Lernzwecke und für die ersten Schritte benötigen Sie keine Unterstützung von ihnen. Sie haben alle Unterstützung von meiner Seite, wenn es um den Inhalt dieses Kurses geht. Also klicken wir einfach auf kostenlos und fahren mit einem kostenlosen Basistarif fort. Jetzt haben wir ein AWS-Konto, das verifiziert wurde. Es hat eine Zahlungsmethode. Und als nächstes müssen wir uns bei der Konsole anmelden, da wir von der Konsole aus auf alle Dienste zugreifen können, die AWS hat. Sie denken, dass die AWS Management Console bedeutet, dass Sie alles richtig eingerichtet haben und den Rest des Kurses fortsetzen und sofort AWS verwenden können . Aws wird in mehreren Rechenzentren verteilt. Und Sie haben die Möglichkeit, das Rechenzentrum auszuwählen, das Sie verwenden möchten, direkt hier auf der rechten Seite oben im Menü. Derzeit habe ich in meinem Fall die USA East Ohio. der Regel haben die US-Rechenzentren in den USA niedrigere Kosten als anderswo auf der Welt. Möglicherweise möchten Sie jedoch nach Ihrem spezifischen Grund prüfen , ob Sie daran interessiert sind, diese in Ihren spezifischen Regionen zu haben. Aus Gründen der Datensicherheit zogen es viele Unternehmen innerhalb Europas vor, ihre Rechenzentren und ihre Daten von AWS physisch in Europa zu haben . Aus diesem Grund bietet AWS diesen Service an, ist jedoch viel teurer als Rechenzentren in den USA. 3. Den AWS S3-Eimer erstellen: Warum bin ich hier bei namens Chip.com. Dies verwende ich zum Registrieren und Verwalten von Domains. In der Regel haben sie sehr, sehr schöne Preise und die Schnittstelle zur Verwaltung der Domains ist in Ordnung. Aus diesem Grund verwende ich das und du musst sie nicht benutzen. Dieses Tutorial funktioniert mit jeder Domain unabhängig davon, wo Sie sich bei GoDaddy, Google-Domains registriert haben , unabhängig von den Prinzipien, absolut im Team. Die Domain, die ich heute verwenden möchte, ist diese. Lernen Sie DevOps-Punktlink. Öffnen Sie einen neuen Tab und zeigen Sie den Inhalt dieser Website an. Sie werden sehen, dass es derzeit gerade hier auf dieser Landing Page von named ship gehostet wird. Nichts besonderes daran. Was mache ich also? Ich versuche als nächstes einen AWS S3-Bucket für diesen Domainnamen zu erstellen. Ich bin hier in meiner AWS-Managementkonsole. Und der Dienst, den ich verwenden möchte, ist S3. Also werde ich hier unter Lager schauen und du wirst S3 sehen. Und ich klicke hier auf den Button Bucket erstellen. Jetzt möchten wir sicherstellen, dass der Bucket-Name angemessen ist. Also tippe hier irgendwie, www dot hat DevOps gelernt, diesen Link. Das ist also der Domainname, den ich registrieren möchte. Wählen Sie eine Region aus, die in Ihrem Fall besser geeignet ist , und stellen Sie sicher, dass Sie sich an diese Region erinnern, insbesondere an diesen Teil. Also der technische Name der Region. Und danach können Sie einfach hier schreiben, verschiedene Einstellungen durchgehen, aber einfach einen Bucket aus der Liste der verfügbaren Buckets erstellen, auf den Sie klicken können. Und natürlich wirst du sehen, dass es leer ist. Jetzt, nur eine allgemeine Bemerkung, AWS hat sich stark verändert. Die Schnittstelle von S3 dieses Management-Teils hier. Wenn Sie sich dieses Tutorial etwas später ansehen, sieht es vielleicht etwas anders aus, aber die Prinzipien sollten automatisch identisch sein. Nur eine Vorwarnung in diese Richtung. Wie Sie an dieser Stelle normalerweise sehen können, haben wir hier keine Dateien drin. Was ich hier machen werde, ist zuerst die einfache Datei hochzuladen. Ich klicke hier auf Dateien hinzufügen. Und ich fange einfach mit einer einfachen HTML-Datei an, die nur so etwas wie Hello World enthält. Also um die Dinge zu testen und sicherzustellen, dass alles richtig funktioniert. Wird hochgeladen, sollte in einer Sekunde funktionieren. Darüber hinaus werden wir uns hier Immobilien ansehen. Und irgendwo hier solltest du statisches Website-Hosting sehen. Also klicke ich hier auf Bearbeiten, weil es gerade deaktiviert ist. Also aktiviere ich es und gebe an, was das Dokument ist. Was ist das Indexdokument? In meinem Fall lautet das Indexdokument index.html. Und ich werde genau dieselbe Seite angeben, auch für das Fehlerdokument ist auch nützlich, wenn Sie kein Fehlerdokument haben und versuchen, eine eckige Website zu hosten oder eine Website zu reagieren. Das Indexdokument muss dem Pfeildokument entsprechen. Wir haben hier alles eingerichtet. Dies ist genau der Name, den wir haben. Und ich klicke hier auf Änderungen speichern. Und wenn Sie zusätzlich zu Berechtigungen gehen, sehen Sie hier, dass der öffentliche Zugriff derzeit blockiert wird. So können wir alles entsperren, Änderungen speichern, bestätigen. Wenn Sie versuchen, den Link dazu zu bekommen oder wir müssen es tun, gehen Sie zu den Immobilien. Die Immobilien sind also hier. Und in einem Abschnitt mit statischem Website-Hosting ist dies die temporäre Adresse, die wir für die Website haben werden. Also klicken wir darauf und schauen uns unsere Website an. Oh, das sieht nicht gut aus. Was ist passiert? Nun, was passiert ist, ist, dass wir noch ein paar Berechtigungen herausfinden müssen. Es reicht also nicht aus, hier einfach diesen öffentlichen Zugang zu ermöglichen. Aber darüber hinaus, wann eine Richtlinie angegeben werden soll. Um die Richtlinie anzugeben, die in JSON geschrieben wird. Klicken Sie hier auf die Bucket-Richtlinie auf Bearbeiten. Und wir werden uns einige politische Beispiele ansehen. Die Richtlinie, die wir an der Anpassung interessant sind, ist so etwas wie diese, die schreibgeschützte Berechtigung für einen anonymen Benutzer angibt , da wir nicht wissen , wer besucht oder wer versucht, diese Informationen zu erhalten. Also werden wir diese Erlaubnis einfach von hier aus kopieren. Geh irgendwie zurück zur Verwaltungskonsole. Ich füge es hier ein. Ursprünglich interessiert es uns, diesen Ressourcennamen zu bekommen, oder? Sie werden also hier sehen, dass AWS unser Leben ein bisschen einfacher macht. Also mit der Angabe des genauen Bucket-Ressourcennamens. Wir können dies also einfach kopieren und sicherstellen, dass wir nicht alles ersetzen. So sollte es aussehen. Sie müssen es also an dieser Stelle praktisch Ihren eigenen Domainnamen anpassen. Speichern wir also die Änderungen. Und Sie werden hier sehen, dass der Zugang rot ist, versucht Sie nur darauf aufmerksam zu machen, dass übrigens alles, was Sie in diesem Bucket haben, öffentlich ist. Und in der Tat empfehle ich Ihnen nicht, etwas in diesem Eimer zu lagern , das nicht öffentlich sein soll. Also seien wir uns dessen sehr bewusst. Wenn Sie andere Dateien speichern müssen, die Website nicht, verwenden Sie den Bucket für diese Website nicht, um etwas anderes zu speichern. Besuchen wir die Website noch einmal und Sie werden hier meine neue Website sehen. Es scheint zu funktionieren und das ist absolut großartig. 4. domain ändern (DNS: Nun, das ist nicht alles, was wir brauchen, weil Sie Ihren Kunden oder niemanden anderen und eine Adresse geben möchten , die so aussieht. Sie haben tatsächlich Ihren eigenen Domainnamen gekauft und wir versuchen diesen zu hosten. Also lasst uns das jetzt kopieren. Die folgenden Schritte unterscheiden sich je nachdem , wie genau Sie Ihre Domain-Datensätze verwalten. Also gehe ich zurück zu Nim trip.com und klicke hier auf die Verwaltung dieser Domain. Woran wir tatsächlich interessiert sind, ist die Verwaltung des DNS. Es gibt also einen DNS-Eintrag, den wir ändern möchten. Und was wir versuchen werden, ist entweder einen Aliasdatensatz oder einen CNAME-Datensatz für diese Domain hinzuzufügen . Also werde ich einfach alles entfernen schon da ist , weil wir daran nicht interessiert sind. Und füge hier einen neuen Rekord hinzu. Ich nenne es einen Alias-Record. Dies wird für www gültig sein und das Ziel wird dieses sein. Also stelle ich sicher, dass ich nichts wie HTTP habe. Wir sollten mit www anfangen, sollte in.com enden. Und wenn Sie diese Änderung vornehmen, dauert es natürlich ein wenig, bis Sie Ihre aktualisierte Website tatsächlich sehen können. Mein Rat ist, in fünf bis zehn Minuten nachzuschauen, ob dies ein Wort ändert. Im schlimmsten Fall kann es jedoch sogar bis zu 24 Stunden dauern, bis sich diese Änderung ausbreitet. Sei ein bisschen geduldig. Aber im Idealfall sollte man nach ein paar Aktualisierungsversuchen in wenigen Minuten etwas sehen. Und manchmal lohnt es sich sogar, Ihren Browser auszuprobieren. Sie sollten jetzt sehen können, dass Ihre neue Website verfügbar ist. Diese Seite wird dann von AWS S3 aus bedient. 5. Die Domain ohne die mit der www zu arbeiten: Schauen wir uns jetzt die folgende Sache an. Sie werden sehen, dass dieser Domainname www vor sich hat. Jetzt ist es möglich, dass es in Ihrem Fall nicht funktioniert, wenn Sie versuchen, eine Domain so zu besuchen, wie sie ist. Wenn Sie es also ohne das www versuchen, wird es in diesem Fall automatisch hinzugefügt. Möglicherweise erhalten Sie eine Fehlerseite. Möglicherweise erhalten Sie eine Fehlerseite von AWS, die besagt, dass er nichts mit diesem Domainnamen ohne den www konfiguriert hat . Wenn das der Fall ist, lassen Sie mich Ihnen zeigen, was Sie tun müssen. Gehen Sie also zurück zur S3-Konsole, und ich mache einfach hier einen neuen Bucket. Dieser Bucket-Name wird jetzt der genaue Domainname sein, diesmal aber ohne den davor liegenden www. Und ich werde einfach die Standardwerte durchgehen, wie sie sind. Ich erstelle einen Bucket. Jetzt besteht der Unterschied zu diesem Bucket darin, dass keine Dateien enthalten wird, aber wir möchten AWS S3 trotzdem für statisches Website-Hosting verwenden. Also werden wir hier die Einstellungen bearbeiten. Dann aktiviere ich das. Aber dieses Mal werden wir auf Anfragen an einen anderen Bucket oder an eine andere Domain umleiten. In diesem Fall möchten wir also statisches Hosting aktivieren und die Anfrage umleiten. Aber der Hostname, den wir hier eingeben werden, ist die Domain mit www, weil Sie bereits wissen, dass das funktioniert. In meinem Fall wird es also www dot gelernt DevOps Dot Link. Und das Protokoll, das wir wählen werden, ist HTTP. Wie Sie sich erinnern, unterstützt AWS S3 HTTPS auf EC2 nicht, einige zusätzliche Konfigurationen. Also speichere ich die Änderungen hier. Und wir sollten in der Lage sein, einen Link zu diesem neuen Bucket zu bekommen, den wir erstellt haben. Und Sie werden sehen, dass es mit www, meinem Browser, zur Domain umgeleitet wird. Diese Art von Details wird automatisch ausgeblendet. Wenn du also darauf klickst, siehst du hier, dass es immer noch auf www geht. Nun, das funktioniert immer noch nicht automatisch, da Sie noch einen Eintrag benötigen. Wenn wir also zurück zu den Advanced DNS-Einträgen gehen, fügen wir einen zusätzlichen Eintrag hinzu. Dies wird wieder ein Alias sein und hier AT verwenden. Und das Ziel wird die Adresse sein, die vorher wieder HTTP entfernt. Sie werden also sehen, dass der erste Eintrag mit www dot learn, DevOps usw. ist. Und der zweite ist, dass wir an W, W dot zweifeln. Wie gesagt, wenn es automatisch funktioniert, müssen Sie auch diesen zusätzlichen Schritt machen. Und dann wird es erkennen, was in jeder Situation zu tun ist. Sie sind also praktisch als zwei verschiedene Domänen, aber es gibt verschiedene Punkte, Möglichkeiten, von einem zum anderen zu lesen oder zu schreiben. 6. access aktivieren: Außerdem wollte ich etwas sehr Wichtiges einrichten und das ist auch die Protokollierung. Wenn Sie also keine Protokollierungsrichtlinie haben, empfehle ich Ihnen, einige Protokolle für Ihre Domains zu haben. Aus diesem Grund werden wir einen neuen Bucket erstellen. Ich rufe den Bucket WW, meinen Domainnamen an und füge dann einfach Dash-Logs hinzu. Lassen Sie die Einstellungen so, wie sie sind, und vergessen Sie sie praktisch für eine Sekunde. Ich gehe zurück zu meinem Bucket, der die eigentliche Website enthält, und besuche die Berechtigungen erneut. Und irgendwo in diesen Berechtigungen sollten Sie etwas wie die Protokollierung des Serverzugriffs sehen. So wird es praktisch anfangen, alle Sperrenanfragen zu schreiben, jeden Zugriff auf Ihren Bucket. Und es ist normalerweise eine gute Praxis, einige Protokolle zu haben, nur für den Fall , dass etwas passiert, um genau zu wissen, was mit Ihrem Hosting vor sich geht. Also werde ich weitermachen und das aktivieren. Und was wir hier tun können, ist unseren Ziel-Bucket anzugeben. Unser Ziel-Bucket wird also der Bucket mit Protokollen sein. Ich werde mich einfach für dieses entscheiden. Dies ist der Bucket-Name, und wir können einfach ein Präfix wie Protokolle oder Zugriff angeben und die Änderungen einfach speichern. Was wird passieren? Und das dauert normalerweise eine Weile. Sie gehen in diesen Bucket, Sie sollten nach einer Weile einige Zugriffsdateien sehen können, die dort protokolliert werden. Vergiss es jetzt einfach und wir werden später darauf zurückkommen , um zu sehen, ob es richtig funktioniert hat. Die Grundidee ist, dass ich Ihnen dringend empfehle, dies zu aktivieren. 7. Projektaufbau auf GitLab: Jetzt, wo meine Website sowohl mit als auch ohne www arbeitet und es tatsächlich geschafft hat, alles zu sehen. Und ich bin ziemlich froh, dass alles richtig funktioniert. Ich möchte zum zweiten Teil wechseln und das ist automatisiert. Was ich hier habe, ist im Wesentlichen ein Projekt, das HTML- und JavaScript-Dateien enthält. Es ist ein Gatsby-Projekt, das etwas JavaScript verwendet, um einige Seiten dynamisch zu erstellen. Aber im Wesentlichen habe ich hier einen öffentlichen Ordner, der den gesamten HTML-Code und alle erforderlichen JavaScript-Seiten enthält . Weil dies ein Build-Prozess ist. Ich möchte das automatisieren. Ich möchte nicht von der CLI wechseln, um alles erstellen zu können und dann auf die Website, zum Server zu gehen und dann zu AWS zu gehen, um Dateien und solche Dinge manuell zu ziehen und abzulegen. Was wir tun werden, ist, dass wir GitLab CI verwenden werden, um diesen gesamten Build-Prozess zu automatisieren. Und ich nehme dich Schritt für Schritt und erkläre, was ich damit meine. Der erste Schritt besteht darin, auf GitHub.com zu gehen und sich für ein Konto zu registrieren. Wenn Sie sich in Ihrem Konto befinden, sollten Sie in der Lage sein, etwas wie ein neues Projekt zu sehen. Und wir werden ein leeres Projekt erstellen. Also nenne ich mein Projekt genau wie den Domainnamen. Und natürlich werde ich so etwas wie HTTP und solche Dinge entfernen. Also www und mein Domainname. Und ich lasse das privat. Und ich werde nicht mit einem Read Me initialisieren, weil ich bereits ein Git-Repository habe. Jetzt ist dies das Repository, das für meinen Code erstellt wurde. Und ich kann hier schauen, wie ich ein bestehendes Git-Repository schieben möchte. Der Befehl, an dem ich interessiert bin, ist also praktisch das Hinzufügen einer neuen Fernbedienung. Und natürlich muss ich auch alle Änderungen vorantreiben. Jetzt funktioniert in meinem Fall alles mit Zweifeln in zusätzlicher Konfiguration, da ich Git lokal installiert habe. Ich habe meinen privaten Schlüssel und meinen öffentlichen Schlüssel mit gitlab.com konfiguriert. In diesem Fall ist letztendlich alles integriert. Wenn Sie gerade damit beginnen, ist es wahrscheinlich einfacher, wenn Sie nur eine Kopie des Projekts erstellen, das Sie in der Videobeschreibung finden , und die Schnittstelle von getline HCI verwenden, um diese Dateien zu bearbeiten. Wenn ich diese Seite also aktualisiere, werden wir das sehen können. Nein, ich sehe alle meine Akten. Falls Sie von hier aus etwas machen möchten, können Sie einfach auf eine beliebige Datei klicken oder hier auf das Plus klicken, um eine neue Datei hinzuzufügen. Und wenn Sie nur etwas bearbeiten möchten, können Sie darauf klicken. Klicken Sie auf „Bearbeiten“. Und du musst Git nicht installiert haben und alles, was ich dir zeige, von meinem Ausweis aus. 8. Die the in GitLab definieren: Dies ist also die Website, die ich bereitstellen möchte. Es basiert auf React und verwendet Gatsby, um leicht einige Dinge zu machen. Ich werde sehr tief darauf eingehen. Aber im Wesentlichen habe ich hier meinen Quellordner, der die Seiten und alles enthält, was ich hier verwende. Es gibt auch diesen öffentlichen Ordner, der generiert wird, wenn ein bestimmter Befehl ausgeführt wird. Also lass mich dir zeigen, was ich damit meine. Wenn ich zum Beispiel weitermache, lösche einen öffentlichen Ordner und führe Gatsby Build aus. Gatsby beginnt mit der Regenerierung dieses öffentlichen Ordners. Und im Wesentlichen versuche ich hier bereitzustellen, der Inhalt des öffentlichen Forums oder wird herausgezogen, die JavaScript-Dateien enthalten , die gerade klein genug sind, damit das Laden schnell geladen wird. Sie kompilieren und machen alles gut für eine Produktionsumgebung, sagen es aber so. Das ist also im Wesentlichen mein Build-Prozess. Ich verwende Gatsby, um diesen öffentlichen Ordner zu generieren. Und im Wesentlichen haben viele JavaScript-Anwendungen heutzutage auch diese Registerkarte. Wenn Sie wirklich nur HTML-Dateien hosten, können Sie diese hier sehen, index.html. Wir haben keinen Kompilierungsprozess, um es so auszudrücken. Du brauchst das nicht, baut sie. Aber weil ich es brauchte und automatisieren möchte, werden wir hier und im Stammteil der Website eine neue Datei erstellen. Und Sie müssen vorsichtig sein, diese Datei genau so zu benennen, wie ich sie hier erwähnt habe. Also der Name der Datei, wir beginnen mit Dot Git, Lab, Dash, Ci, Punkt YAML. Wenn Sie es also nicht genau so benennen, wie Sie es hier sehen, wird diese Datei nicht erkannt und die Pipeline selbst wird nicht ausgeführt. In dieser Pipeline habe ich hier zwei einfache Phasen. Es gibt diese Phase der Build-Websites. Im zweiten Zustand, den ich auf AWS S3 bereitstellen muss. Fangen wir mit dem ersten an. Was hier passiert, ist im Wesentlichen diese Phase. Und ich habe hier zwei Räume eingerückt, nur um zu zeigen, dass sich alles unter der Build-Website Es wird Teil der Build-Phase geben. Darüber hinaus, weil es sich um ein Projekt handelt, das npm benötigt , um Abhängigkeiten zu installieren und kein JS zum Ausführen von mpm benötigt. Ich benutze auch ein Docker-Image. Also gebe ich ein Bild mit der Bildbreite an und der Name des Bildes wird Knoten sein. Wir werden Node in Version zehn verwenden. Wenn ich das habe, kann ich den Skriptblock benutzen. Und im Skript kann ich alle Kommentare hinzufügen, die ich möchte. Der Hauptbefehl, an dem ich interessiert bin, ist npm install. Dies wird alle Abhängigkeiten installieren, die ich brauche. Darüber hinaus brauchen wir ein Tool, das FASB CLI heißt. Also werden wir das auch installieren. Es ist immer eine gute Vorgehensweise, wenn Sie irgendwelche Tools haben. Nur zu einer kürzeren Version, nur um eine Idee zu haben, was wir installieren, besonders wenn Sie keine bestimmte Version installieren. Und dann mache ich Gatsby Build. Das ist also genau derselbe Befehl, den ich lokal ausgeführt habe. Also versuche ich, in meiner CI, CD-Pipeline genau die gleichen Schritte zu replizieren , die ich lokal tun würde. Dies ist praktisch der Schlüssel zur Automatisierung. Sobald Sie genau wissen, welche Befehle Sie ausführen müssen, können Sie sie einfach in eine Pipeline legen. Dies ist also im Wesentlichen der Gesetzesstatus. Und die Phasen werden in Docker-Images erstellt, die nicht vorhanden sind, sie teilen keine Informationen miteinander. Wir brauchen auch eine Möglichkeit, diese Informationen auszutauschen. Was wir also praktisch nicht besprochen haben, ist, ein Artefakt zu erstellen, oder im Wesentlichen ist unser öffentlicher Ordner die Artefakte. Also definiere ich es unter Artefaktpfaden. Also werden wir einen Pfad definieren, dieses Artefakt, dass der Weg öffentlich sein wird, wird diesen Weg nicht haben. Wir wissen also, dass bei der Ausführung von Gatsby Build dieser öffentliche Ordner erstellt wird. Es ist nicht Teil unseres Git-Repositorys, also ist es nie da. Und weil wir es nach Abschluss des Jobs speichern wollen, müssen wir es beim Weizmann als Artefakt angeben, der Job endet, das Docker-Image wird zerstört und alle Informationen gehen verloren. Das wollen wir also definitiv nicht, weil wir dies für die Bereitstellung auf AWS S3 verwenden möchten. Dieses neue möchte die Dinge so voneinander getrennt halten, eine, um einen großen Job zu haben, der alles macht, um die Dinge so sauber wie möglich zu halten. Auch das Deploy-Tool als drei wird Teil der Bereitstellungsphase sein. sich die Bereitstellungsphase vor, wir verwenden ein offizielles Image von AWS. Es heißt Amazon AWS CLI. Wir müssen etwas anderes machen. Dieses Bild hat also etwas Seltsames. Es nennt sich Einstiegspunkt. Ich möchte nicht zu viel darauf eingehen, aber es steht ein wenig in Konflikt mit einer Art und Weise, wie GitLab CI mit Bildern arbeitet. Also müssen wir diese Einstiegspunkte außer Kraft setzen. Um das zu tun, gebe ich hier den Namen an. Und wir geben auch einen leeren Einstiegspunkt an. Stellen Sie also sicher, dass dies genau so aussieht, wie Sie es hier sehen. Andernfalls werden Sie einige seltsame Fehler bekommen, wenn Sie versuchen, dies zu starten. Was haben wir an dieser Stelle? Nun, wir haben diese AWS CLI und die AWS CLI ermöglicht es uns, mit den AWS Web Services zu interagieren. Aber dieses Mal benutzen wir das Interface nicht. Dies ist etwas, das manuell fällig wird. Wir verwenden diese Kommandozeilenschnittstelle, um S3 praktisch zu sagen, Hey, hier sind ein paar Dateien, sie für uns hosten, okay? Nur um sicherzustellen, dass alles richtig funktioniert hat, geben Sie hier die Version von AWS aus, und dies ist der Name des Programms, also wird es einfach AWS sein. Und was wir hier machen ist, dass ich versuche alle Dateien zu kopieren. Also haben wir praktisch hier AWS. S3 ist ein Dienst, den wir nutzen möchten. Wenn Sie hier sehen, kopieren Sie die Öffentlichkeit. Und Sie können hier sehen, dass wir auf dieses Artefakt verweisen, das wir hier veröffentlicht haben. Wenn dieses Docker-Image gestartet wird, ist dieser Ordner auch dort verfügbar. Andernfalls, wenn ich es hier nicht spezifiziere, da ein Artefakt hier auch nicht verfügbar ist. Im Ganzen wird es nicht funktionieren. Was wir hier machen, ist, dass wir den Pfad angeben müssen. Der Pfad in S3 beginnt also mit einem S3-Schrägstrich. Und dann müssen wir den Namen des Buckets angeben. I. Normalerweise könnten wir hier den Namen des Buckets so eingeben, wie er ist. Ich mag es nicht, ähnliche Dinge zu haben , die Informationen über die Umgebung selbst in der Pipeline geben. Aus diesem Grund verwende ich hier eine Umgebungsvariable. Ich nenne es einfach als S3-Bucket. Stellen Sie sicher, dass Sie ein Dollarzeichen vor gehorcht setzen. Andernfalls wird es nicht als variabel erkannt. Und wir sind auch daran interessiert, alle Dateien zu kopieren, wie Sie hier im öffentlichen Ordner gesehen haben. Es gibt eine Menge Dateien, also jeden Tag oder Unterordner und wir möchten nicht kopieren oder angeben. Aus diesem Grund verwende ich hier ein Flag namens rekursiv. Es gibt noch eine andere Sache, die ich gerne machen würde, um mich ein bisschen wohler zu fühlen. Wahrscheinlich ist es nicht erforderlich, aber ich möchte einfach jedes Mal mit einem leeren Zustand des Buckets beginnen. Ich möchte etwas wie AWS als drei machen. Und ich möchte praktisch alles entfernen, was sich im Eimer befindet. Bevor ich neue Dateien hinzufüge. Aus diesem Grund gebe ich hier einfach remove an, und ich werde auch diese rekursive Wohnung verwenden. Das ist also im Wesentlichen das, was wir hier machen. Wir verwenden dieses offizielle Docker-Image von AWS und geben die Version aus. Wir löschen einfach alles, was sich im Bucket befindet , nur um sicherzustellen, dass wir keinen Konflikt haben. Und dann kopieren wir den gesamten Inhalt des öffentlichen Ordners. So sieht die Pipeline aus, bedeutet aber nicht, dass sie funktionieren wird. 9. AWS: Was passiert hier, ist, dass wir AWS CLI sagen müssen, wie wer wir sind? Was, wo ist der Eimer? Welche Region ist der Eimer und so weiter. Es gibt also immer noch ein Maß an Konfiguration. Und um diese Konfiguration abzuschließen, müssen wir zu AWS zurückkehren. Dies ist der Haupt-Bucket, der die Website hostet. Und Sie werden hier sehen, dass wir diese Region definiert haben. Normalerweise empfehle ich, dass Sie eine Region auswählen, die näher bei Ihnen oder näher an der beabsichtigten Zielgruppe liegt . Aber es spielt keine Rolle. Dies wurde automatisch für mich ausgewählt, weil ich in Europa lebe. Und das wäre so, als ob die nächste Region, die ich habe und an der ich interessiert bin , sich daran zu erinnern, welche Region ich bin. Und das ist wie der Code für diese Region. Also werde ich das kopieren und gehe zu git lab ci und wir müssen einige Variablen angeben, nur um AWS CLI mit ein paar Dingen aus diesem linken Menü zu helfen . Sie sollten hier etwas wie Einstellungen sehen können, CICD. Sie werden hier einen Variablenblock sehen. Ich füge hier eine Variable hinzu, und diese Variablen werden für den Job selbst verfügbar sein. Wenn ich also anfange, etwas wie AWS zu tippen, werden immer ein paar Variablen angezeigt und wir werden sie alle verwenden. Zuallererst interessiere ich mich für die Standardregion. Die Standardregion, in der ich diese US-Zentralregion verwenden möchte. Also füge ich diese Variable einfach hinzu gebe zunächst zwei weitere Variable an. Wenn wir zu AWS zurückkehren, müssen wir einen Service namens IAM verwenden. Dies ist für das Identitätsmanagement. Hier im IAM-Dashboard klicken wir hier auf Benutzer. Und wir werden einen neuen Benutzer erstellen, der nur Zugriff auf die S3-Buckets hat. Nennen wir diesen Benutzer GitLab CI. Dies wird uns helfen herauszufinden, was dieser Benutzer tun soll oder was, wo werden diese Bestimmungen verwendet? Und sehr wichtig ist, dass Sie hier einen programmatischen Zugriff auswählen müssen. Dies gibt uns also Zugriff auf die AWS CLI. Dies ist genau das Werkzeug, das wir in der Präeklampsie haben. Ich klicke auf Weiter für Berechtigungen und gehe auf den einfachen Weg, eine vorhandene Berechtigung anzuhängen. Wenn ich also hier nach S3 suche, wähle ich diese Berechtigung, Amazon S3, Vollzugriff. Diese Berechtigung bedeutet, dass Sie diesem Benutzer Zugriff auf alle Ihre Buckets gewähren. Und im Wesentlichen kann der Benutzer alle Buckets löschen und so weiter. Ich benutze nur diese Erlaubnis, weil sie nur das Prinzip demonstriert. Wenn Sie jedoch ein kleines Buckets haben, das sensible Daten enthält, ist es möglicherweise ratsam, eigene Richtlinien zu erstellen, die den Zugriff nur auf einen bestimmten Bucket einschränken. Ich klicke hier auf „Weiter“. Habe keine Schlagworte. Und ich werde einfach weitermachen und diesen Benutzer erstellen. Sobald Sie diesen Benutzer erstellen, sehen Sie hier, dass Sie eine Zugriffsschlüssel-ID und auch einen geheimen Zugriffsschlüssel haben. Und ich zeige dir, dass du nur eine Idee hast, wie sie aussehen. Ich werde diesen Benutzer direkt nach der Aufzeichnung dieses Tutorials entfernen. Also in, nur für den Fall, dass du dich fragst, warum ich dir dieses Geheimnis hier zeige. Was ich als Nächstes tun werde, ist, dass ich hier die Zugriffsschlüssel-ID kopiere, GitLab CI gehe und eine neue Variable hinzufüge. Und diese Variable wird hier mit AWS beginnen. Und Sie können sehen, dass ich AWS Access Key ID verwende. Dies ist ein spezieller Name und diese Variable wird automatisch von der AWS CLI abgeholt, wenn Sie dies ausführen. Alle Variablen werden also in den Umgebungsvariablen und in AWS enthalten sein. Wir werden uns anschauen, hey, gibt es eine Variable namens AWS Access Key ID? Und ich werde diese Variable verwenden, um festzustellen, wer AWS CLI verwenden möchte. Und das Gleiche gilt für das Geheimnis. Ich möchte nur sicherstellen, dass ich das ganze Geheimnis kopiere. Und variabel AWS und fügen Sie hier auch den Wert ein. Und ich werde einfach hinzugefügt. Im Wesentlichen haben wir eine Verbindung zwischen unserem AWS-Konto hergestellt, den Ressourcen, auf die wir zugreifen möchten, in diesem Fall S3 und GitLab CI, während wir gleichzeitig nur einen eingeschränkten Zugriff auf diesen Benutzer gewähren. Dieser Benutzer hat also beispielsweise keinen Zugriff auf die Verwaltungsschnittstelle, aber über die CLI ist es möglich, viele Dinge zu tun, aber er ist nur auf den Bucket beschränkt. Praktisch wird GitLab CI diese Variable injizieren. Also zeige ich dir in ein bisschen, wie das funktioniert. 10. Die GitLab CI -Pipeline laufen: Jetzt, da wir unsere Pipeline an Ort und Stelle haben und ich hoffe, dass alles gut ist, sonst werden wir sie später debuggen. Kann nicht einfach Komitees sagen und Pipeline hinzufügen. Und ich werde die Änderungen vorantreiben, sobald ich das getan habe. Wenn ich zur Projektseite zurückkehre, solltest du hier so etwas sehen können, wie die Pipeline ursprünglich läuft. Wenn du es hier nicht siehst oder etwas passiert, kannst du hier zur CICD-Pipeline gehen. Dies ist die erste Pipeline, die derzeit läuft, und Sie werden sehen, dass sie zwei Phasen hat. Die erste Phase ist also einfach die Build-Phase, und die zweite Stufe ist die Bereitstellungsphase. Sehen Sie hier, die Job-Build-Website hat begonnen. Wenn Sie also genau sehen möchten, was los ist, können Sie einfach darauf klicken. Es wird zeigen, dass du so bist, was gerade passiert. Es startet praktisch dieses Node-Docker-Image. Nachdem dies gestartet wurde, geht es die Befehle durch, die wir haben. Also gehe ich hier zur Übersichtsseite. Ich lasse es für ein paar Minuten laufen. In der Regel sollte es nicht länger als zwei oder drei Minuten dauern. Hier, wenn Sie ein paar Minuten später wiederkommen, schauen Sie sich Ihre Pipeline an. In diesem Fall ist etwas schief gelaufen, also ist das kein Problem. Es wird ein gutes Beispiel sein, um zu verstehen, was vor sich geht. Und jedes Mal, wenn Sie Drehbücher schreiben, kann es schief gehen. Und was hier passiert ist, ist, dass Sie den ersten Teil mit dem Gürtel sehen können , der ohne Probleme funktioniert. Wir werden also hier sehen, dass alle Befehle ausgeführt wurden, einschließlich neu aufgebaut werden. Und wir können uns sogar hier einen Blick auf ein Job-Artefakte werfen. Wenn Sie also hier auf Durchsuchen klicken, sehen Sie hier, dass wir einen öffentlichen Ordner haben , der praktisch die gesamte Website enthält. Aber wir bezweifeln zum Beispiel einer guten Lab CI-Pipeline und ähnlichem. Hier wurde also nur der Öffentliche Ordner hinzugefügt. Das sieht also definitiv richtig aus. Sehen wir uns nun an, was mit dem zweiten Teil der Pipeline passiert ist, der auf S3 bereitgestellt werden soll. Und ich kann nicht betonen, wie wichtig es ist, diese Fähigkeit zu haben über die Konsolenprotokolle zu schauen und zu verstehen, was hier vor sich geht. Also werden wir in diesem Schritt sehen, und in diesem Fall normalerweise das Letzte, was gescheitert ist, auch der Grund für unsere, all unsere Probleme. In diesem Fall werden Sie feststellen, dass kein AWS in dem Sinne läuft , dass die CLI genau hier verfügbar ist, nämlich die Version. Das ist also ein erster Schritt. Okay, wir wissen, dass wir das richtige Werkzeug haben. Und sobald wir versuchen, etwas zu tun, versuchen wir zum Beispiel, alle Dateien aus dem Bucket zu entfernen. Wir sehen hier etwas wie einen ungültigen Bucket-Namen und sagt leer. Im Wesentlichen heißt es, hey, der Bucket-Name ist leer. Es ist also leer, weil ich etwas schnell war, als ich es versuchte, und ich habe vergessen, diese Variable zu definieren. Wie Sie sich erinnern, haben wir hier in Einstellungen, dem ICD, andere Variablen definiert , aber ich habe den Bucket-Namen nicht wirklich gefunden. Dies ist auch eine Variable, die hier benötigt wird. Also klicke ich einfach hier auf Variable hinzufügen. Und so wie du es nennst, liegt es ganz bei dir. Es ist keine dieser Variablen, die wirklich wichtig ist, wie man sie nennt. Sie müssen nur mit dem übereinstimmen, was Sie hier in einem solchen Skript verwenden, der Wert, den ich verwende, ist dieser. Das ist also der Name des Buckets. So normal, klicke einfach hier auf Variablen hinzufügen. Und weil es kein Problem mit dem Pipeline-Skript selbst war, kann ich einfach hier in der Pipeline, auf Deploy-Job weitermachen und hier auf diese Wiederholung klicken. Und du kannst sogar mitmachen, wenn du jetzt klickst, du wirst genau sehen, was passiert. Es dauerte nur ein paar Sekunden, um zu laufen. Ich werde dieses Mal sehen, dass der Job selbst vergangen ist, also sieht alles richtig aus. Im Wesentlichen haben wir alles entfernt und es sagt Ihnen genau, was entfernt wurde, und beginnen dann mit dem Hochladen. Es wird also jede einzelne Datei durchlaufen und hochladen. Und so sieht es aus, wenn man sich einige der hier hochgeladenen Dateien anschaut, als ob alles richtig funktioniert hat. Wir können hier zu unserer Domain zurückkehren und auf den Aktualisierungs-Button klicken. Und Sie sollten in der Lage sein, die Website zu sehen. Dies ist also die Website, die ich bereitstellen wollte. Es ist auch eine gute Idee zu überprüfen, ob alle Seiten ordnungsgemäß funktionieren. Das ist es, so soll es funktionieren. Wir haben jetzt alles durch unsere Continuous Integration-Pipeline hier eingerichtet. 11. Der Prozess zur Durchführung einer Veränderung: Stellen wir sicher, dass wir auch eine kleine Änderung vornehmen können. Also gehe ich hier in die ID, ich klicke auf den Quellcode, gehe irgendwie zu den Seiten index.html. Und statt High werden die Leute so etwas wie Hello World sagen. Sehr kleine Änderungen wie zeigen an, wie einfach es später ist, Änderungen vorzunehmen und bereitzustellen. Und so sage ich hier wie eine geänderte Nachricht. Und wir werden es drängen. Und natürlich ist die Pipeline wieder dafür verantwortlich, dass ich nichts kaputt gemacht habe. Ebenso wichtig ist es auch, einen Prozess zu erstellen , der erneut überprüft, ob etwas schief geht. Wir senden Ihnen auch eine E-Mail-Benachrichtigung, wenn etwas nicht geklappt hat. Wahrscheinlich können Sie also einfach Ihre Änderungen vornehmen und weiter etwas anderes tun, ohne sich zu viele Gedanken darüber machen zu müssen. Das ist also die Kraft der Automatisierung insgesamt. Nur wenige Minuten später war die Pipeline erfolgreich. Gehen wir zurück zur Website. Es heißt hohe Leute, wir erfrischen uns. Und jetzt heißt es Hello World. Dies bedeutet, dass eine einfache, aber sehr leistungsstarke kontinuierliche Bereitstellungspipeline einfach eine Änderung vornimmt, die Sie haben und die Platzierung an Ihre Infrastruktur. 12. Schlussbemerkung: Da wir das Ende dieses Tutorials erreichen, machen wir eine kleine Zusammenfassung dessen, was wir bisher getan haben. Wenn wir zu den AWS-Services zurückkehren, können wir auf S3 zurückblicken. S3 wir haben im Wesentlichen was unsere drei Eimer. Einer von ihnen ist also der Haupt-Bucket mit www und der Domainname, der alle Dateien enthält, die wir im Projekt verwenden. Und dafür haben wir einige Dinge angegeben, ein paar Berechtigungen in Bezug auf den öffentlichen Zugang. Aber auch diese zusätzliche Konfiguration für die Bucket-Richtlinie, die es im Wesentlichen jedem ermöglicht, Informationen von hier zu erhalten. Und was ich normalerweise empfehle, ist, dass Sie hier keine anderen Ordner speichern. Im Wesentlichen könnten Sie einen Unterordner haben, wenn Sie zu Ihrer Konfiguration gehen, um Eigenschaften zu erhalten. Und Sie können angeben, dass Sie, wenn Sie sich hier mit statischem Website-Hosting befassen, es einfach in einem Unterordner angeben können. Also könnten wir so etwas wie public slash index.html haben. Das würde funktionieren. Aber die Frage ist, was würdest du gerne im Root-Teil haben? Weil das theoretisch noch zugänglich ist. Das ist also etwas, das ich nicht empfehle, dass Sie hier etwas anderes aufbewahren. Es ist nur aus Sicherheitsgründen insgesamt. Teil von den Berechtigungsdingen in den Eigenschaften haben wir hier auch einige Serverzugriffs-Protokollierung eingerichtet. Und das ist der Teil bei Access Logging. Und wie Sie sich erinnern, haben wir einen anderen Bucket oder das Speichern von Datenzugriffsprotokollen verwendet , um ein wenig zu dauern, bis die Protokolle verfügbar sind. Warten Sie also normalerweise 24 Stunden, um etwas im Ordner zu sehen. Und der andere Bucket ohne den www ist einfach da, um diesen Reader zu erstellen. Ok, also hier drinnen die DNS-Einstellungen. Sie werden hier sehen, dass ich diesen Alias-Record erstellt habe. Ziemlich ähnlich. Sie hätten einen CNAME-Datensatz erstellen können. Nach meinem Verständnis bin ich keineswegs ein Experte. Mein Verständnis ist, dass wir mit einem CNAME eine weitere DNS-Suche machen werden. Aus diesem Grund ist der Aliasdatensatz normalerweise schneller. Die Art, wie ich es hier gemacht habe, ist ziemlich ähnlich. Vor dem DNS verwende ich Cloudflare. Sie haben wie eine sehr leistungsstarke Schnittstelle und bereiten sich auch auf das Caching und viele andere Mechanismen vor. Seitdem hat mir der Dienst zur Registrierung von Domains ermöglicht, direkt hinzuzufügen. Dies brauchte nichts Fortgeschritteneres als dieses. Seit wir festgestellt haben, wie man Dateien auf S3 hochlädt und wie man praktisch als 32 oder Domainname verknüpft. Im zweiten Teil haben wir uns mit dem Bau dieser Pipeline befasst. Im Wesentlichen nimmt die Pipeline einfach jeden Build-Prozess durch, den Sie haben, wenn Sie einen haben. Und im zweiten Teil verwendet es AWS CLI, um alle Dateien, die Sie benötigen, automatisch auf S3 bereitzustellen. Im Wesentlichen müssen Sie sich also nicht wieder an der S3-Schnittstelle anmelden. Und vor allem, wenn Sie Git bereits für Ihre Workflows verwenden, möglicherweise eine viel schnellere Lösung. Danke, dass du bis zum Ende hier geblieben bist. Ich weiß, dass dies ein langes Tutorial war und es hoffentlich geschafft hat, weiterzuverfolgen. In der Periodenbeschreibung finden Sie Projektdateien einschließlich der GitLab CI-Pipeline. Ich habe in diesem Beispiel eine kontinuierliche Bereitstellungspipeline integriert, um Ihnen zu zeigen, wie einfach es sein kann, manuelle Aufgaben zu automatisieren. Wir sehen uns das nächste Mal. Tschüss.