Meister Bitbucket-Pipelines zur kontinuierlichen Integration und kontinuierlichen Bereitstellung | Chris Frewin | Skillshare

Playback-Geschwindigkeit


1.0x


  • 0.5x
  • 0.75x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Meister Bitbucket-Pipelines zur kontinuierlichen Integration und kontinuierlichen Bereitstellung

teacher avatar Chris Frewin, Full Stack Software Engineer

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      EINFÜHRUNG

      2:27

    • 2.

      Environment

      4:18

    • 3.

      Deine erste Pipeline erstellen

      6:36

    • 4.

      SCP zum Transport von to aus der Konstruktion

      15:10

    • 5.

      SSH zum Ausführen von Befehlen auf dem Server

      10:12

    • 6.

      Ein Slack für die Messaging-Funktion hinzufügen

      15:19

    • 7.

      Bootstrapping mit React erstellen

      4:37

    • 8.

      Umgebungsdateien definieren und sie in einer Komponente verwenden

      4:25

    • 9.

      Verwendung der Umgebungen in einer Bitbucket Pipeline

      3:34

    • 10.

      Den ngrok Server für das React TypeScript überdecken

      5:22

    • 11.

      Die Pipeline für das Projekt React TypeScript neu

      10:53

    • 12.

      Verwendung von Tarballs zum Übertragen der node Tarballs

      5:24

    • 13.

      „Den Modus auf Server einstellen

      4:29

    • 14.

      Der große Vorteil der Pipelines beim Testen, Merging zum Meister,

      2:49

    • 15.

      BONUS: NGINX Proxy-Konfiguration und React PUBLIC Proxy

      6:11

    • 16.

      BONUS: Docker als Alternative zu einem as verwenden

      9:55

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

185

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Bitbucket Pipelines bringt die kontinuierliche Integration und Lieferung in Bitbucket Cloud. ermöglicht es den Personen und Teams den Code mit der Bitbucket zu entwickeln, testens und die Nutzung ihrer Code zu errichten!

Es ist ein Werkzeug, das mir im Laufe der Jahre eine immeasurable Zeit errettet hat, und ich habe etwas dabei, was ich für fast alle that die ich in meinem BitBucket habe.

Bevor wir mit Pipelines direkt arbeiten, werden wir alle die gleiche Version von Node verwenden.

Dann erstellen wir IHRE allererste Bitbucket die eine bitbucket-pipelines.yml definieren lässt.

Wir werden der Pipeline Komplexität hinzufügen, lernen, wie man SCP () und SSH () in unserer Pipeline anwendet.

Wir werden noch komplexer lernen, wie man verschiedene Umgebungen nutzt, wie man die Bereiche entwickelt, Inszenierung und die environments, in unserer Pipeline.

Wir lernen auch, wie man einen Slack nutzt, um Nachrichten während der Anlage zu versenden!

Der Kurs endet mit einigen Leckereien und Bons, wie du die Einrichtung über einen a

***Hinweis: Wenn du keinen externen Zielserver hast, zeigt dir Bonus-Lektion 16 und wie du eine lokale instance Linux mit Docker verwenden kannst, und wie du ein Porträt hinzufügung hinzufügst, damit du auf die Box mapping und die ganze Welt

Triff deine:n Kursleiter:in

Teacher Profile Image

Chris Frewin

Full Stack Software Engineer

Kursleiter:in

Hi everyone!

I've been a professional full stack software engineer for 7+ years, and I've been programming for many more. In 2014, I earned two separate degrees from Clarkson University: Mechanical Engineering and Physics. I continued at Cornell for my M.S. Degree in Mechanical Engineering. My thesis at Cornell was a technical software project where I first learned Bash and used a unique stack of Perl and Fortran, producing a publication in the scientific journal Combustion and Flame: "A novel atom tracking algorithm for the analysis of complex chemical kinetic networks".

After opening up my first terminal while at Cornell, I fell in love with software engineering and have since learned a variety of frameworks, databases, languages, and design patterns, including TypeScrip... Vollständiges Profil ansehen

Level: All Levels

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. EINFÜHRUNG: Hallo, alle. In diesem Kurs geht es darum, Bitbucket-Pipelines für kontinuierliche Integration und kontinuierliche Bereitstellung zu meistern. Ich habe mich auf Skill-Anteil umgesehen und mir wurde klar, dass es keine Kurse speziell für Bitbucket-Pipelines gab . Sie Pocket-Pipelines ist, dass ich grundsätzlich jeden Tag als Teil meines Entwicklungsworkflows verwende. Und jetzt, da ich es für eine Weile benutze und im Grunde süchtig bin, spart es mir viel Zeit von Sachen, die ich früher manuell gemacht habe. Und so hoffe ich, dass ich mit Ihnen meine Erfahrungen und alles, was ich auf dem Weg gelernt habe, teilen kann . So kann u2 davon profitieren, viel Zeit bei der Automatisierung von Dingen wie Ihren Tests, Ihrer Bereitstellung und Ihren Build-Prozessen zu sparen . Werfen wir einen Blick darauf, was wir in diesem Kurs vorbeigehen werden. Bevor wir direkt mit Pipelines arbeiten, richten wir unsere Umgebung und NodeJS ein und beginnen Sie mit einem einfachen Boilerplate Repository, wird dann eine sehr einfache Bitbucket-Pipelines YAML-Datei erstellen. Um unseren ersten Build zu starten, wird Komplexität zu unserer fakturierten hinzufügen, indem Sie einige benutzerdefinierte Schritte verwenden , um die Website-Quelle zu erstellen und dann verwenden Sie sep, um das bereitzustellen, was als Artefakte auf unserem Server der Wahl bekannt sind , wird noch mehr komplex, Hinzufügen von SSH-Funktionalität und Zugriffsschlüsseln , so dass wir einige automatisierte Arbeit auf der Serverseite tun können, wird das Git-Repository in eine Entwicklung verzweigen, Staging im Master-System und lernen, wie Variablen in jedem Zweig dynamisch zu verwenden integrieren auch benutzerdefinierte Slack-Benachrichtigungen und versuchen sogar einige Selbstheilungsmechanismen, wenn Dinge mit dem Deploy schief gehen. Von dort aus ist der Himmel die Grenze für das, was Sie mit Ihren eigenen Builds, Deploys und Tests machen möchten. Ich hoffe, der Kurs sieht für Sie interessant aus, und ich hoffe, Sie kommen uns in weniger als einem, wo wir sehen, wie schnell und einfach es ist, mit Pipelines zu beginnen. Ich möchte auch erwähnen, dass dieser Kurs eher auf fortgeschrittene und höhere Entwickler ausgerichtet ist . Also Entwickler, die bereits einige Erfahrung mit Git-Repositories und Bash-Scripting haben. Wir werden einfach anfangen und komplexer werden, aber ich möchte Sie nur wissen lassen. Also denke ich, wir werden viel Spaß auf diesem Kurs haben und hoffen, Sie dort zu sehen. 2. Environment: Bevor wir mit dem Programmieren beginnen, sollten wir sicherstellen, dass wir alle dieselben Tools verwenden. Da wir ein wenig Knoten verwenden werden, stellen wir sicher, dass unsere Knotenversionen identisch sind. Also, wenn ich die MyNode-Version überprüfe, verwende ich die neueste Version zehn, die 10.19 ist. Und npm ist auch hier, 6.13.4. Wenn Sie diese Version nicht haben, können Sie nvm installieren. Und dann würden Sie nvm install v 10.19 ausführen. Mein Fall, natürlich habe ich bereits installiert, aber das wird sowohl Knoten als auch NPM für Sie installieren. Das ist etwas außerhalb des Geltungsbereichs dieses Kurses. Aber wenn Sie zur NVM GitHub-Seite gehen, können Sie mit der Installation und Aktualisierung fortfahren. Sie haben ein Bash-Skript, mit dem Sie die neueste Version erhalten. Wenn Sie Windows verwenden, müssen Sie den Knoten von der Quelle, der Version 10.19, installieren. Für diesen Kurs habe ich bereits ein einfaches Git-Repository vorbereitet, das wir als Beispiel für den Aufbau unserer ersten Pipeline verwenden können. Damit wir das jetzt klonen können. Und ich werde diesen Link in die Unterrichtsnotizen einfügen. Wir werden in diesen Ordner cd und öffnen es in Visual Studio-Code. Das sieht so aus, als gäbe es hier eine Menge Zeug. Aber wirklich alles, was es ist, ist eine Kopie von HTML5 Boilerplate, die eine schöne Bare-Bones Vorlage ist, wo Sie mit demPrototyping beginnen und einen Wireframe für eine Website erstellenkönnen Prototyping beginnen und einen Wireframe für eine Website erstellen , ohne sich darum kümmern zu müssen ein Framework wie Reagieren oder sehen oder was auch immer. Grundsätzlich, wenn Sie wissen, normalisiert CSS, es hat, dass dort und ein paar andere Leckereien, die im Grunde die Stile vereinheitlicht, wenn Sie die Seite in einem beliebigen Browser besuchen. Also, wenn wir das herunterladen, sehen wir, dass wir nur eine ZIP-Datei bekommen. Und wenn wir diese entpacken, erhalten wir dieselben Ordner, die ich in meinem Projekt habe. Also, wenn wir zurück zu dem Projekt gehen, sehen wir die gleiche Art von Struktur. Das einzige, was ich hier hinzugefügt habe, wenn wir in den Index gehen, habe ich Bootstrap für einige Stile hinzugefügt. Und dann von hier, das ist, das ist von der Boilerplate, fügen Sie Ihre Website oder Anwendung Baumwolle hier, den ganzen Weg bis zum Google Analytics-Tag, das auch nicht ausgefüllt ist. Aber das ist nur ein paar einfache Inhalte. Und das können wir im Browser öffnen. Und wir sehen, dass wir eine grundlegende Website haben, mit der wir arbeiten können. Kein JavaScript, kein Front-End-Framework. Und es ist etwas reaktionsschnell. Ich bin sicher, ihr könnt etwas finden, das hier nicht perfekt reagiert, aber es ist gut genug, um damit zu beginnen. Und es wird zu seinem Zweck passen, für das, was wir tun werden. In dieser Lektion war das erste, was wir getan haben , sichergestellt, dass wir alle die gleiche Version von Node verwenden und Knotenversion 10.19 wiederverwenden. Dann haben wir ein einfaches Beispiel Git-Repository heruntergeladen, das wir während des Kurses verwenden werden. Wie wir gesehen haben, ist es eine einfache Kopie von HTML5 Boilerplate. Und ich habe einige Markup zum Index HTML und auch zu Stylesheets für eins von Bootstrap und eins von meinem eigenen hinzugefügt. In der nächsten Lektion werden wir loslegen und schließlich unsere Pipeline aufbauen. 3. Deine erste Pipeline erstellen: Das erste, was wir tun müssen, ist ein Bitbucket-Repository zu erstellen, obwohl wir das anfängliche Repository von GitHub klonen, müssen hier ein Repository erstellen und dann die Ursprungs-URL des Projektarchivs in das erstellte Repository hier übertragen in Bitbucket. Wenn Sie also kein Bitbucket-Konto haben, können Sie jetzt eines erstellen, es ist kostenlos. Und sobald Sie Ihre Dashboard-Übersichtsseite haben, können Sie zu Repository erstellen gehen. Und ich nehme den gleichen Namen wie den von GitHub. Und wir haben erschaffen. Also haben wir unsere URL. Beachten Sie, dass es je nach Ihrem Benutzernamen unterschiedlich sein wird. Und wir wollen alles kopieren, aber nicht den git clone Teil des Befehls. Wir wollen nur die URL. So können wir die aktuelle URL des Projektarchivs überprüfen, das wir gerade mit git remote dash V geklont haben. Und wir sehen, dass GitHub URL. Wir werden es mit unserer Bitbucket-URL aktualisieren, die gerade erstellt wurde. Das heißt, Sie können überprüfen, ob es funktioniert, indem Sie denselben git remote-Befehl ausgeben. Jetzt, da unsere Fernbedienung eingestellt ist, können wir endlich unsere Pipeline-Datei erstellen. Und diese Datei muss Bucket-Pipelines genannt werden. Yml. Soweit ich weiß, beginnt eine Pipelinedatei immer mit den Befehlspipelines. Dann definieren Sie Zweige. Wie wir in weiteren Lektionen im Kurs sehen werden, ist es hilfreich, verschiedene Pipelines zu haben, die darauf basieren, in welchem Zweig Sie sich befinden. Sie haben beispielsweise eine Test- oder Stagingumgebung, und dann haben Sie Ihre Live- oder Produktionsumgebung. Und die Pipeline muss basierend auf diesen Zweigen anders ausgeführt werden. Also, wenn einige von Ihnen in das Repository gegraben haben, haben Sie vielleicht bemerkt, dass ich bereits den ersten Zweig genannt habe, den wir Lektion eins geklont haben. Und Sie können das überprüfen, indem Sie git branch zu S V ausführen und Sie können sehen, ob auf weniger als einem. In unserer Pipeline-Datei möchten wir das mit weniger als einer bemerken. Jetzt können wir hinzufügen, was als Schritt bekannt ist. Und wir können einen Namen für unseren Schritt hinzufügen. Und ein Drehbuch. Jetzt in Pipelines ist bash immer für Sie verfügbar. Also für jetzt, werden wir einfach ein einfaches Echo machen. Hallo Welt. Speichern Sie diese Datei, wird alles hinzufügen. Git Commit mit einer Nachricht. Nur um die Pipeline zu testen. Und wir werden das drängen. Großartig. Auf den Seiten Repository. Wenn Sie auf die Registerkarte der Pipeline gehen und Sie nach unten scrollen, weil es das erste Mal war, dass wir ein bisschen Bucket-Pipelines YAML-Datei geschoben haben, haben wir diese Art von Ansicht. In unserem Fall haben wir es richtig konfiguriert. Und so sagt uns Bitbucket, dass die Konfiguration gut aussieht. Und wir können es hier abfeuern. Wenn Sie einen Befehl oder eine Einrückung verpasst haben, könnte es etwa so aussehen. Es steht, dass es ungültig ist. Und du wirst einen gelben Punkt haben, an dem du schweben kannst. Hier steht also eine schlechte Einrückung, aber manchmal kann es unbekannter Befehl sagen oder etwas ist nicht erkannt. Wirklich 99% der Zeit ist es wegen der Einrückung. Und tatsächlich gibt es ein wirklich nettes Tool, das Sie validieren können. Wenn du wirklich verwirrt bist. Sie können Ihre Pipelines Datei fortlaufend kopieren und einfügen bis sie ungültig ist. Also, wenn wir dies beheben, nur um als Beispiel zu zeigen, gültig. Und wieder, diese sind ungültig. Also kannst du hier mit deiner Pipeline herumziehen, bis sie gültig ist. Und Sie können das immer kopieren und hier einfügen. Okay, also lassen Sie uns Pipelines aktivieren. Und sofort wird unser allererster Build abgefeuert. Großartig. So war es erfolgreich. Das wirklich schöne an Pipelines ist, dass Sie ein Protokoll von jedem Schritt erhalten, der aufgetreten ist. Diese sind die Setup und Teardown integriert. Wir sehen jedoch, dass dies unser benutzerdefinierter Befehl ist. Wir haben sowohl den eigentlichen Befehl in der Pipeline als auch das Ergebnis dieses Befehls. So werden wir sehen, wie dies später beim Debuggen hilfreich ist, wenn Fehler in der Pipeline auftreten oder etwas auf dem Server schief geht. In dieser Lektion haben wir also unsere erste Pipeline-Datei mit nur einem einfachen Echo erstellt. Wir initialisieren das über die Registerkarte Pipelines. Wir sahen die Protokollierungsereignisse. Und wir haben auch gesehen, wie Sie Ihre Bitbucket-Pipelines mit diesem Bitbucket-Pipelines Validator validieren können , den ich in den Lektionsnotizen posten werde. Jetzt, da unsere Pipeline an Bitbucket angeschlossen ist, können wir mit dem Erstellen komplexerer Beispiele beginnen und wir werden in der nächsten Lektion darauf eingehen. 4. SCP zum Transport von to aus der Konstruktion: Jetzt schauen wir uns an, wie man Artefakte in unserer Bitbucket-Pipeline implementiert. Und Artefakte sind wirklich nichts anderes als speziell definierte Dateien und Ordner, von denen Bitbucket eine Kopie aufbewahrt und die Sie später bearbeiten können. Also wirklich gibt es zwei Hauptschritte in diesem sep Prozess. Die erste besteht darin, die Artefakte tatsächlich zu produzieren und Bitbucket zu sagen, dass dies die Artefakte sind. Und die zweite besteht darin, diese Artefakte tatsächlich auf Ihren Zielserver zu kopieren. In diesem Fall werde ich ein Digital Ocean Tröpfchen verwenden, das nur eine entfernte Linux-Box ist. Artefakte sind daher besonders nützlich in Build-Prozessen, die nur statischen Inhalt erzeugen. Beispiel: Create React App oder ein Typ Script-Build. Und sie sind auch nützlich, wenn der Build besonders rechnerisch schwer oder langsam ist. Ich muss es zum Beispiel viel verwenden, weil der Tröpfchen, den ich erwähnt habe, die kleinste Größe ist. Und ich finde, dass der Versuch, Build-Befehle direkt auf dem Server auszuführen, zu Timeouts führen kann und der Server einfach nicht genug Speicher hat, um den Build durchzuführen. Bevor wir also Befehle in die Pipeline schreiben, möchten wir einen neuen Zweig namens Lektion zwei erstellen. Wenn Sie folgen möchten, können Sie den Zweig jetzt erstellen. Oder wenn Sie einfach zum endgültigen Arbeitscode springen möchten, können Sie einfach von der GitHub-Klon-Version, die die vollständige Quelle hat, zu diesem Zweig wechseln . Also machen wir das jetzt. Git Kasse Lektion. Großartig. So können wir Zweige sehen, nur um zu überprüfen oder auf weniger als zwei. Ok? Und wieder arbeiten wir mit dieser statischen HTML5 Boilerplate Codebasis. So kann es nur serviert werden, indem Index HTML selbst bereitgestellt wird. Und um eine Art gefälschten Build-Prozess zu simulieren, werden wir einen Ordner namens dist definieren. Und wie bei jedem Framework, in dem Sie eine Festplatte oder einen Build-Ordner haben würden, zum Beispiel mit einem Typ Script Build oder Create React App, möchten Sie diese Datei ignorieren. In Get. Wir wollen die erzeugten Dateien nicht in unser Repository übertragen. Also werden wir auch eine neue gitignore Datei erstellen und einfach dist hinzufügen, damit wir zu unserer Pipeline zurückkehren können. Und jetzt, da wir in der Lektion zu verzweigen sind, müssen wir definieren, dass der Zweigname und definieren Sie unsere Artefakte Schritt. Also werde ich es als einen etwas gefälschten Build-Prozess nennen. Nur um wieder zu simulieren, dass wir sind, verschieben wir einige Dateien in unseren Dist-Ordner, die der eigentliche Build sind. Dateien, weil wir nur diese Rechnung simulieren. Alles, was wir tun müssen, ist die gesamte Codebasis in diesen Dist-Ordner zu kopieren. Zuerst könnten Sie denken, Cp als einfachen Bash-Befehl zu verwenden, um dies zu tun. Aber wir wollen den dist-Ordner selbst nicht in dist kopieren. Und dann werden Sie in eine im Grunde eine rekursive Schleife geraten und es wird nicht funktionieren. Es gibt also eine schöne Alternative, unsere Senke zu verwenden, wo Sie diese rekursive Schleife vermeiden können. Und was wir tun können, ist unser Sync Dash AB, holen Sie den Fortschrittsbalken. Und das ist die Quelle, also der Projektstamm. Und wir wollen es in Dist kopieren. Aber wir wollen das ausschließen. Also sollte dieser Befehl es tun. Und dann müssen wir natürlich E-Artefakte definieren, die dist und alle Dateien und Unterordner sein werden. So ein Doppelstern. In der Regel würden Sie in diesem Scriptschritt in einem Framework wie Node oder Type-Skript Node install and Node Build, Node Test ausführen. Diese Befehle würden da sitzen. Und dann würden Sie immer noch Ihre Artefakte definieren. Und Sie können auch mehrere Artefakte definieren, wenn Sie mehr als nur ein einzelnes Verzeichnis haben. Wenn Sie beispielsweise eine andere TXT-Ausgabe-Datei hätten, würden Sie sie kontinuierlich nach dieser Artefakt-ID auflisten. Und dann gibt es natürlich einen zweiten Schritt, der tatsächlich diesen Datenträgerordner auf dem Server bereitstellt. Also, und wir werden das nennen. Hoppla. Und das Skript hier ist etwas Besonderes. Endlich hat Szene einen eingebauten SCP, in dem Sie verwenden können, das ist dies. Und dann müssen Sie auch die Variablen für diesen Befehl scp definieren. Whoops. Sie benötigen also einen Benutzerserver. Der Remote-Pfad, den ich in der Standard-Linux-Webquelle unter einem Ordner namens Skills Share SEP-Test setzen werde der Standard-Linux-Webquelle . Und der lokale Pfad ist relativ zu dieser Codebasis oder dem Repository selbst, das dist. Und wir wollen auch alle Dateien und Ordner. Diese beiden Schritte sollten uns mit SEP in Gang bringen. Das einzige, was jetzt fehlt, ist, dass wir tatsächlich als CP einrichten müssen, damit es funktioniert. Da sind also zwei Dinge. Zuerst müssen wir den Zielbenutzer und den Server definieren, für den wir bereitstellen möchten. Und wir müssen auch die SSH-Schlüssel einrichten. Bitbucket hat also Zugriff auf unseren Server. also auf unsere Repository-Seite gehen, wollen wir in die Repository-Einstellungen gehen. Und zuerst fügen wir diese Repository-Variablen hinzu, den Benutzer und den Server. Und ich sollte auch erwähnen, dass dies, wenn Sie ein Dollarzeichen mit einem Variablennamen haben, Bitbucket anweist, in diesen Schlüsselwertpaaren der Repository-Variablen zu suchen. Also für jetzt brauchen wir nur den Benutzer und Server, aber Sie können theoretisch so viele hinzufügen, wie Sie benötigen. Und natürlich sind diese sehr hilfreich für Dinge wie diese, wo Sicherheit und Datenschutz wichtig sind und Sie diese Werte nicht direkt in Ihre Pipeline codieren möchten . Also für mein Setup bin ich root. Sie können im Server gesichert haben. Ich werde auch hier einfügen, und ich werde es auch sichern. Okay, wir haben unsere Server- und Benutzervariablen, und jetzt müssen wir den SSH-Schlüssel einrichten. Der einfachste Weg, dies zu tun, ist nur, dass Bucket die Schlüssel für Sie generiert. Also klicken wir darauf. Und bitbucket erstellt ein privates öffentliches Schlüsselpaar. Und sie sagen dir sogar genau, was du tun sollst. Kopieren Sie diesen öffentlichen Schlüssel in autorisierte SSH-Schlüssel auf dem Remote-Host. Also machen wir das jetzt. Also habe ich einen Alias, um sich direkt bei meinem Droplet anzumelden. Ich möchte meine epi und den Zugang dort nicht offenbaren, aber zumindest sehen Sie hier können Sie root sehen, die unser Benutzer war. Und wir werden auf diesen Weg gehen. Und wir öffnen die Datei mit autorisierten Schlüsseln. Also habe ich hier bereits ein paar öffentliche Schlüssel, einige sind für, also habe ich hier bereits ein paar öffentliche Schlüssel, von denen einige tatsächlich für andere Bitbucket-Pipeline-Projekte sind. Also habe ich hier bereits ein paar öffentliche Schlüssel, von denen einige bereits für verschiedene Build-Pipelines in verschiedenen Repositories verwendet werden . Aber wir fügen unseren hier sofort ein. Drücken Sie einfach die Eingabetaste Sieht aus, okay. Beenden Sie das Steuerelement X und speichern Sie es. Dieselbe Datei. Ok, großartig. Es ist also auch eine gute Idee, den bekannten Hosts Fingerabdruck zu holen und zu validieren. Also füge ich hinzu, meins ist die gleiche IP oder URL, die Sie in den Variablen verwenden würden, die Repository-Variablen für den Server. Und wir können den Fingerabdruck holen. Und bevor wir den Host hinzufügen, können wir einfach schnell auf den Server springen und bestätigen, dass dies richtig ist. Also, um das zu tun, werde ich wieder SSH in meine, meine Linux-Box. Und dazu können wir eine einfache Bash for-Schleife schreiben, um den md5-Hash für alle unsere öffentlichen Key-Dateien zu erhalten. Das sieht so aus. Und ich werde diesen Befehl in den Kursnotizen posten. Damit wir nachsehen können. Ich habe diese F9 EC und die 9171 F9 EC. Ja. Das ist unser ECDSA MD5-Hash. So können wir voran gehen und diesen Host hinzufügen. Eine letzte Sache, die wir tun müssen, wo immer Sie diese Dateien bereitstellen, ist sicherzustellen, dass dieses Verzeichnis existiert. Also werden wir in Var www cd und erstellen dieses Verzeichnis. So können wir das als ihr perfektes überprüfen. Okay, und das sollte genug Arbeit für jetzt sein, da wir auf dem Remote-Server zu tun haben. Jetzt, da wir wieder hier in unserem lokalen Repository sind, sollten wir in der Lage sein, den Code so zu pushen, wie er jetzt in Zweig weniger als zwei ist. Und es sollte die Schritte ausführen. Also lasst es uns ausprobieren. Fügen Sie unsere Änderungen hinzu. Und dann werden wir uns mit einer Nachricht verpflichten. Erster Test von SCP und schieben Sie das. Wir müssen der Fernbedienung sagen, dass der Ursprung auch weniger als zwei Zweige haben sollte. Wenn wir also zu unseren Pipelines springen, können wir sehen, dass es erfolgreich war. Und wieder, der nette Vorteil hier ist, dass wir das gleiche Konsolenprotokoll erhalten. Da wir dieses Fortschrittsflag mit rsync übergeben haben, sehen wir das gleiche Protokoll, das wir würden, wenn wir diesen Befehl lokal im Repository ausführen würden. Und es wird auch erfolgreich den Ordner hier bereitgestellt. Also, um zu überprüfen, lasst uns wieder auf unseren Server springen. Und wieder, wir setzen sie in weit WW Skill Share SEP Test. Und lasst uns einfach auflisten, was wir hier haben. Großartig. Dieser Build-Prozess unter weniger als zwei Zweigen funktioniert erfolgreich. Wir sind in der Cloud, nicht lokal. Wir befinden uns in der Cloud, indem wir alle diese Dateien in einen Festplattenordner kopieren , der als Artefakt definiert ist, und den Inhalt dieses Ordners in diesen Remotepfad kopieren. Und es gibt noch einen letzten Schritt, den wir auf dem Server tun müssen. Und das ist, dass wir diese Dateien tatsächlich bereitstellen und überprüfen müssen, ob sie richtig bedient werden. Sobald wir das tun, haben wir eine vollständige, wenn auch einfache kontinuierliche Integration Build. In der nächsten Lektion werden wir uns also ansehen, wie wir SSH auf den Server in unserer Build-Pipeline erstellen und die Befehle ausführen können , die wir benötigen, um sicherzustellen, dass index.html bereitgestellt wird. 5. SSH zum Ausführen von Befehlen auf dem Server: In der letzten Lektion haben wir gelernt, Artefakte auf unserem Produktionsserver bereitzustellen. Wir müssen jetzt einige zusätzliche Befehle ausführen, um die Artefakte, die wir bereitgestellt haben, tatsächlich bereitzustellen , damit wir sie auf einer öffentlichen URL anzeigen können. Also wieder, das erste, was wir tun müssen, ist in eine neue Lektion, Zweig, Lektion drei abzuzweigen . Und wir können die genauen Schritte aus Lektion zwei kopieren, die ersten beiden Schritte. Und wir werden unseren dritten Schritt hinzufügen. Also wollen wir diesen statischen Inhalt servieren. Und im Idealfall würde ein Server ständig laufen, zum Beispiel einen Express-Server. Und dann würden Sie einen Proxy mit einem Tool wie Apache oder Engine X einrichten, um das anzuzeigen. Wir werden in zukünftigen Lektionen zu solchen Dingen kommen. Aber im Moment wollen wir nur zeigen, wie man SSH-Befehle ausgibt, um dies tun zu können. Und zwei Tools, die dies ganz einfach machen, sind MPM serve Handler und n Grob Pakete. Und zusammen wird es in der Lage sein, diesen statischen Inhalt bereitzustellen und ihn auch dem Internet zugänglich zu machen, damit wir unsere Website auf einer öffentlichen URL ansehen können. Also habe ich bereits eine einfache Datei index.js zusammengestellt, die ich in den Unterrichtsnotizen einfügen werde. Da es irgendwie außerhalb des Umfangs dieses Projekts ist. Also werden wir hier erstellt, und ich werde das einfach kopieren und einfügen. Grundsätzlich starten wir einen Server mit der Serve Handler Middleware. Und für Interessierte, dienen Handler ist der Kern von dienen, was die einfache empfohlene Art und Weise, wie Sie dienen können. Zum Beispiel ein Create React-App-Build. Nur eine einfache CLI, wo Sie sagen, servieren Ordnername in diesem Ordner wird bereitgestellt, aber das ist, was im Hintergrund passiert. Das ist eine Middleware für das Standard-Knoten-HTTP-Paket. Und dann schritt ich zwei, Ich verbinde n grok zu diesem Hafen und ich hielt 5 Tausend als Serve. Der CLI-Befehl serve verwendet 5 Tausend als Standard. Also habe ich nur behalten, dass es keinen besonderen Grund gibt. Und Ende grok wird den lokalen Hafen fünftausend zum Internet aussetzen. Also mit unserer index.js eingerichtet und ist bereit zu laufen, können wir jetzt den dritten und letzten Schritt für diesen Build-Prozess definieren. Also wieder, Omega rechten Schritt. Und ich gebe ihm einen ziemlich expliziten Namen. Servieren Sie den Server-Handler statisch und setzen Sie ihn über Wut dem Internet aus. Ok. Und es wird wieder ein Skript hier haben. Und in der letzten Lektion, da wir bereits Benutzer und Server definiert haben, können wir sie natürlich auch in diesem Schritt für unseren SSH verwenden, nur SSH-Benutzer am Server. Und dann können wir über den Befehl nachdenken, den wir ausgeben müssen. Also zuerst müssen wir zur Wurzel dessen gelangen, wo sich unser statischer Inhalt befindet. Skill Share-SCP-Test. Und wir werden tun und, und was in Serie bedeutet. Das bedeutet also, dass bash sicherstellt, dass dieser Befehl abgeschlossen wird und dann zum nächsten geht. Während ein einziger parallel wäre. Aber CD ist wichtig für uns, zuerst im Verzeichnis zu sein, bevor wir diesen nächsten Befehl ausgeben , der npm install ist. Und wir installieren die beiden Tools, die wir ausführen müssen, unsere index.js, die servieren, handler und grok ist. Und wieder, das ist etwas, was wir in Serie machen wollen. Wir wollen warten, bis es abgeschlossen ist. Und dann können wir Knoten index.js ausführen. können wir retten. Und wenn wir uns index.js anschauen, können wir sehen, ich lege einige Konsolenprotokolle hier. So werden wir in der Lage sein, das in der Bitbucket-Benutzeroberfläche zu sehen. Und am Ende des Tages erhalten wir eine n grok URL und wir sollten in der Lage sein, diese URL zu besuchen. So ist etwas irgendeine Art von Hash. Und dann muss ich I0. So werden wir das in der Taschen-UI sehen und wir werden in der Lage sein, das zu besuchen und unsere Website zu sehen. Hoffentlich werden wir das vorantreiben. Jetzt. Angenommen, wir sind jetzt in der Lage, Befehle über SSH auszugeben. Und wir werden drängen. Großartig. Und so sehen wir, dass der Falltunnel hier freigelegt wird. So können wir einfach darauf klicken. Und großartig, und wir haben unsere Website. Also, während dieser letzte dritte Schritt in unserem kontinuierlichen Bereitstellungsprozess funktioniert, gibt es einen leichten Schluckauf in diesem Knoten. Index.js gibt nie Spit Eimer ein Signal das Ende. Und so erkennt der Build-Prozess nie, dass er abgeschlossen ist. Und das ist natürlich schlecht, wenn Sie in der Bitbucket-Build-Umgebung eine Begrenzung von Minuten haben . Wir werden also ein neues Tool vorstellen , das diesen Prozess im Hintergrund ausführen kann und das ist für immer. Also fügen wir das einfach zu unserer Liste der Pakete hinzu, die lokal installiert werden sollen. Und anstatt Node zu verwenden, geben wir für immer Start index.js. Aber wenn wir diesen Befehl bearbeiten, stellen wir fest, dass es ein anderes Problem gibt. Und das ist, sobald Ihre Anwendung wächst und Sie müssen komplexere Befehle ausführen und vielleicht sogar verschiedene Umgebungen berücksichtigen. Wir können nicht für immer einen Inline-Befehl und in unsere Build Pipeline schreiben. Und so eine nette Möglichkeit, dies zu refactorieren, besteht darin, dieses Skript in ein Bash-Skript zu sammeln. Also werde ich das nehmen und wir können ein Bash-Skript namens deploy erstellen. Fügen Sie das ein. Und wir können diese auf mehrere Zeilen für die Lesbarkeit setzen. Das retten. Jetzt können wir anstelle dieser großen Kette von Befehlen einfach unser Bash-Skript ausführen. Aber wir müssen uns daran erinnern, dass dieses Bash-Skript in den Ordner dist verschoben wird , der zum statischen Stammordner wird. Also müssen wir zuerst wieder in diesen Skill Shares CP-Testordner cd. Und dann können wir in Bash Deployment SHaufrufen in Bash Deployment SH . Also fügen wir das Factoring von SSH-Befehlen in Deploy-Skript hinzu. Wir werden drängen. Großartig. Also sehen wir einige Ausgabe von ewig. Aber es ist wichtig zu bemerken, dass wir das verlieren und grok info. Und es wäre auch schön, wenn wir nicht immer zu unserer Bitbucket UI kommen müssten , um die Protokolle aus unserer Rechnung zu sehen. Und so sollten wir nach einer netten Art der Nachrichtenübermittlung suchen und genau das in der nächsten Lektion tun. Wo wir uns zu einer schlaffen gekauften, wo wir Nachrichten von unserem Build-Prozess machen können. 6. Ein Slack für die Messaging-Funktion hinzufügen: In der vorherigen Lektion haben wir unseren ersten vollständigen kontinuierlichen Integrationsaufbau erstellt. Und gegen Ende der Lektion erinnerten wir uns einige Bash-Befehle in ein Skript, das einen sauberen Ausgang für Bitbucket abschließen konnte. Aber wir haben gesehen, dass wir einige Protokollierungsinformationen verloren haben. Langfristig ist das Betrachten der Protokollierungsinformationen nach Betrachten der Protokollierungsinformationen nach kritischen Informationen wie der veröffentlichten URL jedoch etwas umständlich. Und so wollen wir ein Messaging-System aufbauen um auf diese Informationen einfacher und benutzerfreundlicher zuzugreifen. Also werden wir das tun, indem wir eine schlaffähige gekaufte erstellen. Also habe ich bereits die URL geöffnet, das ist api dot slash.com slash Messaging-Schrägstrich Web-Hooks. Und der erste Schritt ist, deine Slack App zu erstellen. Also klicke ich darauf. Und ich habe mich bereits eingeloggt. Ich habe bereits ein Slack-Konto. Und ich werde diesen Fähigkeitsanteil nennen. Bereitstellen von bop. Und ich werde diese App erstellen. Und wir wollen in eingehende Web-Hooks gehen, können sie aktivieren. Und das erste Beispiel hier ist bereits im Bash-Format. Also lassen Sie uns einen neuen Web-Hook hinzufügen, damit wir diese URL erhalten können. Und ich werde schnell einen neuen Kanal namens Skill Share Test erstellen . Ich glaube, ich muss es. Wir fügen es dem gemeinsam genutzten Fertigkeiten Testkanal hinzu, klicken Sie auf Zulassen. Und großartig, wir erhalten eine tatsächliche Web-Hook-URL. Wie gesagt, ist dies bereits im Bash-Format. So können wir voran gehen und als erstes Beispiel direkt in unser Deploy-Skript gehen. Und wir werden dies zuerst als r. Wir können den Text auf Startpunkt CI Punkt, Punkt, Punkt ändern . Stellen Sie sicher, dass Sie das hinzufügen. Und, und um die Befehle fortzusetzen. Und wir werden auch das Ende ci komplett aufstellen . Und wir brauchen diesen letzten Tag nicht und lassen Sie uns das retten. Und ich habe bereits vorangegangen und eine Lektion für Zweig erstellt. Also müssen wir das hinzufügen. Und der Build selbst bleibt genau gleich. Wir haben uns gerade in diesen Webhook als Nebeneffekt eingehakt . Und so müssen wir Lektion für, für diesen Zweig bedeuten. Und das sollten wir hinzufügen können. Und jetzt, da wir gedrängt haben, sollte das den Build abfeuern. Und wir sollten unsere Botschaften nachlässig sehen. So sehen wir die Start-CI und sehen, dass ich abgeschlossen. Also haben wir in unser Deploy-Skript gebunden. Aber unser ursprüngliches Ziel war auch, den End Grok Link aus dem index.js Skript zu bekommen . Und wieder, ich versuche, diesen Kurs zu halten hat sich auf Pipelines wie möglich konzentriert. Also werde ich einfach den Code hier einfügen und schnell beschreiben, was ich getan habe. Im Wesentlichen habe ich eine Knoten-JS-Version dieses curl-Befehls geschrieben. Wir müssen die Anwendung JSON-Header setzen und die JSON-Daten als Schlüsselwert mit Text und einer Zeichenfolge übergeben . Und natürlich auf die angegebene URL gepostet. Und so habe ich das Knotenabhol-Paket benötigt und eine Wrapper-Funktion um es herum erstellt, bei der alles, was Sie tun müssen, ist die String-Nachricht zu übergeben. Also haben wir unseren JSON-Header für die Anwendung veröffentlicht. Und für den Körper stringieren wir mit dem Schlüsselwert, Text und Nachricht. Und um zu veranschaulichen, dass ich die Funktion neben der console.log eingerichtet habe. In Wirklichkeit können wir wahrscheinlich diese console.log Zeilen entfernen oder in eine lokale Protokolldatei auf dem Server schreiben. Aber jetzt werde ich es einfach lassen. Also sollten wir infolgedessen noch diese beiden Botschaften sehen. Und dann zusätzlich. Das Laufen am lokalen Host 5 Tausend und n grok Tunnel. Und wir werden endlich unsere URL auf slack in bekommen, weil ich Node fetch hinzugefügt habe, müssen wir das unserem Deploy-Skript als Paket hinzufügen . Und das sollte es tun. Und wir können sehen, dass wir die bekommen , was zuvor Konsolenprotokolle jetzt eine Puffermeldung waren. Und obwohl wir dies wie eine normale Zeichenfolge an slack übergeben, ist slack schlau genug, um zu erkennen, dass es sich um URLs handelt und sie für uns formatiert. Sie können sogar andere Dinge tun, wie Emojis übergeben und einige einfache Formatierungen wie fett und kursiv machen. Aber das überlasse ich dir, um in die Docks zu schauen. Aber lassen Sie uns unseren Link überprüfen, um zu sehen, ob es funktioniert. Und perfekt. Die Seite ist oben. Für diejenigen unter euch, die bisher codiert haben. Möglicherweise haben Sie bemerkt, dass es ein kleines Problem mit unserem Deploy-Skript und unserer index.js gibt. Das Problem ist, dass dieses Skript einen Knotenprozess startet, der bei 5 Tausend hört. Und wenn wir für immer starten index.js für immer wird versuchen, eine neue Instanz des Knotens auf diesem Skript zu starten. Und das wird tatsächlich abstürzen, weil es bereits einen Prozess mit 5 Tausend gibt. Und so hat in diesem Fall für immer einen netten Befehl anstelle von Start, um neu zu verwenden. Und das Schöne hier ist, dass es überprüft wird, ob ein Prozess in diesem Ordner mit index.js bereits ausgeführt wird. Wenn nicht, wird es gestartet, aber wenn es ausgeführt wird, wird es neu gestartet. So läuft für immer neu starten. Wir werden das Problem für eine letzte Säuberung hier beheben. Wir sollten diese URL auch in eine Umgebungsvariable verschieben. Kein allzu großes Sicherheitsrisiko, aber wenn jemand diesen Link in den Griff bekommt, kann er deinen Slack-Kanal spammen, was ein bisschen ärgerlich wäre. Also im Fall von Node, können wir dies entfernen. Und das würde so etwas wie verarbeitete dot n dot Slack Web-URL werden. Und wir sollten auch das Äquivalent im Deploy-Skript tun. Also diese beiden, werde ich Slack, Web-Hook URL umbenennen. Und natürlich diese Syntax. Bringt uns zurück zu den Repository-Variablen. So können wir diese Slack Web Hook-URL hinzufügen Slack Web Hook-URL und diese einfügen und auch sichern. Und es gibt einen letzten Schritt, den wir tun müssen. Die Repository-Variable ist also hier in diesem Skript nicht direkt verwendbar, sondern ist in der Bitbucket-Pipelines dot Gamow Datei verfügbar. Also können wir es eigentlich als Argument übergeben. Und wenn es in das Skript übergeben wird. Wie der Bash-Standard ist. Der erste Parameter ist Dollarzeichen eins. Und so den gleichen Namen in diesem Skript als auch in den Prozess des Knotens zu verwenden. Wir können eine Variable mit dem gleichen Namen exportieren , um diesem Umfang äquivalent zu sein. Und weil Forever selbst seine eigenen Umgebungsvariablen hat, müssen wir diesen Befehl auch vor dem Forever Call übergeben. Und diese Syntax funktioniert auch nicht mit Neustart. Es muss mit Anfang sein. Und so werden wir ein Paar tun wird zuerst Forever, stoppen index.js und wir werden mit dem richtigen Parameter neu starten. Jetzt gibt es noch eine letzte Sache, die wir tun müssen. Und das ist, da wir die Repository-Variable in dieser SSH-Zeichenfolge übergeben, damit dies korrekt an die tatsächliche Variable ausgewertet wird, müssen wir doppelte Anführungszeichen verwenden. Und das sollte es tun. Und wir können sehen, dass die gebaute abgeschlossen. Und das haben wir erfolgreich umgestaltet. Und es funktioniert genau gleich. Lassen Sie uns diese neueste Nachricht überprüfen. Toll, das ist unsere statische Seite. Und um sicher zu sein, dass kein anderer separater Prozess läuft , den wir nicht erwarten würden. Dies sollte zu einer Art Fehler führen. Genau. Also ngrok rennt nicht mehr. Unter dieser URL. Wir haben erfolgreich, ich habe einen neuen Zugriff auf unsere Website unter dieser neuesten URL erstellt. Also scheint alles zu funktionieren. In dieser Lektion haben wir unsere hartcodierte Flack-Web-Hook-URL in eine Repository-Variable umgestellt. Und wir haben gesehen, dass, damit dies während der Ausführung auf dem Server zugänglich ist, wir das mit doppelten Anführungszeichen in der SSH-Zeichenfolge übergeben müssen. Und wir müssen natürlich auch diese Variable, dieses Schlüsselwertpaar in der Projektarchiv-Variablen UI auf der Bitbucket-Site setzen. Selbst nachdem wir diese Variable, die Dollarzeichen eins, übergeben haben, mussten wir sie auch für immer übergeben. Und mit dieser Art von Syntax können die Parameter nur mit forever start gesetzt werden. Also machen wir ein Paar von ewig stoppen und für immer beginnen. So können wir sehen, dass diese Art von Layout ein wenig komplex ist. Und wenn wir mit einem komplexeren Framework wie Typskript arbeiten, können wir verschiedene n Dateien nutzen, wie eine Entwicklungsumgebung, eine Stagingumgebung und eine Produktionsumgebung. Um diese Art von Befehlspaaren zu verhindern, wird alles sehr sauber aus einer JSON-Datei der Umgebung fließen. 7. Bootstrapping mit React erstellen: In der letzten Lektion haben wir das Senden von Nachrichten an bestimmten Punkten in der Pipeline durch slack abgeschliffen. Aber wir haben gesehen, wie umständlich es ist, mit nur einer Repository-Variablen umzugehen. Und wie schwierig es ist, wenn wir unsere eigenen Werkzeuge herstellen. Und wir haben uns immer noch nicht von diesem ursprünglichen HTML-Fünf-Boilerplate-Typ-Code entfernt. Die Pipeline-Techniken, die wir bisher verwendet haben, sind Ordnung und die Konzepte werden mit jedem Projekt funktionieren. Aber wir sollten untersuchen, was wir mit einem komplexeren Beispiel tun können. Verwenden Sie React und geben Sie Skript ein. Wir können die Tools nutzen, die diese Sprachen haben und die Tools, die um sie herum gebaut wurden, um unsere Pipelines noch sauberer zu machen. Und wir werden auch endlich eine Pipeline mit einem echten Build in dieser Lektion entwerfen. In diesem Fall führt der Befehl npm build von Create React App aus. Als erstes für diese Lektion erstelle ich drei Zweige, um einen vollständigen CI-CD-Workflow zu simulieren, die Entwicklung, Staging und Master sind. Also lassen Sie uns zuerst einen völlig leeren Zweig erstellen. Da wir keinen Code von unserer HTML5-Site folgen oder nehmen werden. Also werden wir einen verwaiste Zweig erstellen. Und wir wollen hier mit einem sauberen Schiefer beginnen. Also werden wir alle diese Dateien entfernen. Und toll, dass wir übrig geblieben sind, aber das wird ohnehin ignoriert. Damit ich das auch loswerden kann. Okay, und wir sind bereit, Bootstrap mit Create React App. Also, das ist n px. Erstellen Sie React-App. Dislokation und großartig. So ist der Create-Reaktor-Bootstrap fertig. Und wir können das alles sozusagen als erstes Engagement für dieses neue Projekt vorantreiben. Und wir wollen auch sicherstellen, dass unsere Staging- und Master-Zweige dieselbe Codebasis hatten, mit der wir anfangen sollten. Okay, also entwickeln, Master und Staging haben alle die gleiche Codebasis. Und denken Sie daran, dass dieses Setup ein bisschen speziell ist, da ich den gesamten Kurscode für Sie in einem normalen Projekt im selben Repository behalten möchte , Master wird standardmäßig mit git init erstellt. Und so müssten Sie nur einen Zweig- und Staging-Zweig erstellen, entwickeln. 8. Umgebungsdateien definieren und sie in einer Komponente verwenden: Also lasst uns hier in einen Code einspringen. In der letzten Lektion beschäftigten wir uns mit Jonglieren und Übergeben von Repository-Variablen. Um dies auf sauberere Weise zu tun, können wir einige Umgebungsdateien für jeden dieser Zweige definieren, die wir haben. Also zuerst werde ich einen Endordner im Quellordner erstellen. Und ich werde für Umgebungsdateien, Standard EN Punkt JSON und, und entwickeln Punkt JSON Staging von Jason und Esther. Und als einfaches Startbeispiel werden wir einen Site-Name-Schlüssel in jedem JSON setzen. Also für die Entwicklung, sagen Sie etwas wie denken Sie dies als einen Titel. Nur für ein Beispiel, um damit zu beginnen. Staging wäre wie und nennt es auch die Testseite. Im Master wäre der Produktionsstandort. Und für jetzt werden wir die Entwicklung JSON als unser Ende JSON nehmen. Also haben wir diese verschiedenen Umgebungen, aber es wird BB, der normale Punkt n Punkt JSON, die wir in unseren Komponenten im Rest unserer App verwenden würden . Und so, zum Beispiel, wenn wir mit der App TSX-Datei passieren, kann ich diese JSON-Datei importieren, nennen Sie es einfach n. und der Vorteil mit Visual Studio Code und Type Script ist , dass Typ Skript wissen, was Sie haben auf Ihrem AnyObject. So können Sie so etwas tun wie es bereits weiß Site-Name ist eine Eigenschaft dort. Um unsere Entwicklerumgebung lokal zu verwenden, können wir sie dem Befehl pre start in package.json hinzufügen. Und dies ist eine NPM-Namenskonvention, was bedeutet, bevor Sie den Startbefehl auslösen, führen Sie alles aus, was sich im Neustart-Befehl befindet. Und dafür wollen wir einfach, das ist bash. Wir wollen pn dot JSON in die Hauptdatei kopieren . Und jetzt, wenn wir npm start starten, wird Pre-Start ausgelöst. Es wird diese entwickelt in N kopieren, was wir haben, wir haben, haben wir manuell bereits gemacht. Aber wir sollten in den Titel sehen, die Entwicklung lokale Website. Also lassen Sie uns das eine Chance geben. Großartig. Also mein Titel ist Entwicklung lokale Website. 9. Verwendung der Umgebungen in einer Bitbucket Pipeline: Okay, aber wir sind nicht hier, um package.json-Skripte zu schreiben. Wir sind hier, um mehr über Bitbucket-Pipelines zu erfahren. Also lassen Sie uns diese Umgebungen in unsere Pipeline integrieren. Da wir auf einem völlig neuen Schiefer sind, müssen wir eine neue Bucket-Pipeline-Datei erstellen. Und alles fing an, wie wir das andere im Originalbeispiel gemacht haben. Und hier normalerweise hättest du deine Inszenierung und deinen Meister. Und dann hättest du deine Befehle drinnen. Aber da wir dieses spezielle Lektionsbasierte Setup verwenden, haben wir diese Zweignamen. So wie wir den Pre-Start-Befehl hinzugefügt haben, der für uns für die lokale Entwicklung ist. Wir wollen genau das Gleiche tun, aber mit der Inszenierung in Master-Umgebungen. Also sagen wir auch Copy Staging-Umgebung. Jason. Und dasselbe Skript, nur eine andere Datei. Und diese Jason zu Source und JSON inszenieren . Und das gleiche hier für Master und nur gehen, um Einfügen und nehmen Sie die Masterdatei. Da also die Variablen aus dieser Enddatei fließen, ist es wichtig, dass dies der erste Schritt oder einer der ersten Schritte ist. Wenn du andere Dinge tust. Bevor wir irgendwelche Builds machen, wollen wir, dass unsere Variablen vor dem Erstellen oder Testen oder solchen Dingen richtig gesetzt werden. Also jetzt lassen Sie uns tatsächlich definieren, die Build ein Artefakt Schritte. Im Wesentlichen die gleichen Konzepte wie bei unserer einfachen statischen Seite. Aber es ist ein bisschen komplexer, weil wir auch unsere Node-Module sowie den Build Ordner liefern wollen , die Create reagieren, React App erstellt. Also werde ich tatsächlich direkt in die Schritte einfügen, die wir zuvor definiert haben, um sie für dieses Create React App-Projekt zu refactorieren. Statt eines gefälschten Build-Prozesses werden wir einen echten Build-Prozess sagen. Und dieses Skript ist einfach npm run build. Und wir haben ein paar Artefakte hier. Wir haben unseren Build-Ordner, der standardmäßig ist, dass Create React App hat. Und der MPM-Modulordner. Und auch die wir noch nicht erstellt haben, einen Index JS-Server. 10. Den ngrok Server für das React TypeScript überdecken: Und dieser Index JS-Server, ich werde eigentlich auch aus dem HTML5-Site-Beispiel ausleihen. Nur weil ich denke, n grok macht es sehr einfach, Ihre Website sehr schnell auf einer öffentlichen URL zu bekommen und es ist großartig für Prototyping. Also werde ich hier eine index.js als unsere Serverdatei erstellen. Und ich werde das auch kopieren, kopieren und einfügen Sie das Beispiel in. So können wir bereits unsere Umgebungen nutzen, die wir hier erstellt haben. Anstatt einen festen Port zu definieren. Das ist etwas, was wir auch zu unserer Umgebung JSON hinzufügen könnten. Also werde ich das überall mit dem n-ten Punkt-Port ersetzen. Und das müssen wir natürlich importieren. Und wir sollten natürlich den n-ten Schlüssel hinzufügen. Wir können bei 5.001 für die Entwicklung beginnen und dann einfach nach oben gehen. Wieder. Wir werden nur halten , dass dieser Master $5,3 Inszenierung 502 ist. Und wir können sogar, Sie können auch als Hinweis hinzufügen. Und diese Konsolenprotokolle. Diese eine weitere Änderung, bevor wir servieren Handler direkt im Arbeitsverzeichnis verwendet haben. Aber wie wir unsere Pipeline definieren werden wir diese Serverdatei neben dem Build-Verzeichnis setzen, das erstellt wird. Und so gibt es hier einen dritten Parameter, der ein Optionsobjekt ist. Und diese Option ist die öffentliche Option, die Build ist. Und es gibt noch eine Sache, die wir auch hinzufügen können, indem wir diese JSON-Dateien der Umgebung nutzen. Und das ist das. Wir haben jetzt den Vorteil. Wenn wir mehrere Slack-URLs für jeden unserer Zweige erstellen wollten, zum Beispiel, wenn Sie für die Staging gekauft haben und Sie einen Bot für Master wollten , den Sie in separate Kanäle einfügen können. Sie könnten das mit diesem Umgebungs-Setup tun. Und so, anstatt den tatsächlichen Wert zu übergeben, übergeben wir den Schlüssel der Umgebungsvariable zwei, den Prozess Punkt n. Und wir nennen dies den Schlüssel, um zu signalisieren, dass dies der Name des Schlüssels ist. So zum Beispiel, würden Sie für die Entwicklung haben, oder vielleicht Sie, Sie haben vielleicht nicht einmal eine in Entwicklung. Kann das leer lassen. Kopiere das auch. Im Meister. Sie können es nennen, Nennen wir es Skill Share, Master-Arbeitsmappe. Und dann für die Inszenierung, Inszenierung , Slack-Web-Boot. Auf diese Weise können Sie mehrere URLs haben oder denselben Schlüsselnamen beibehalten und den bereits erstellten Schlüsselnamen beibehalten. Ich werde all die retten. 11. Die Pipeline für das Projekt React TypeScript neu: Lasst uns endlich wieder in die Pipeline gehen. Also haben wir unsere Artefakte definiert. Wir haben index.js refactored, um mit den Umgebungsvariablen zu arbeiten, die wir haben. Und jetzt müssen wir jedes dieser Artefakte mit SEP bereitstellen. Und es ist wichtig, dass wir hier einen anderen Ordner haben. Also, jetzt werde ich das nennen, wird ein Type-Skript haben. Ich nenne es Skill Share Typ Script Staging. Und den Build, den wir tatsächlich in den Build-Ordner einfügen möchten. Erstellen Sie einen Ordner. In NPM-Modulen. Lassen Sie uns Fehler finden, da keine Module auch im gleichen Ordnernamen live sind. Und die index.js. Wir gehen einfach in das Stammverzeichnis dieses Ordners auf dem Server. Und das sollte es tun. Wir können diese vier Schritte kopieren und sie auch für einen Master verwenden. Die einzige Änderung hier ist, dass wir einen anderen Ordner haben, der Ester genannt wird. Also möchte ich zuerst auf meinen Server springen und sicherstellen, dass diese Ordner vorhanden sind. Also mache ich den Staging-Ordner und auch den Master-Ordner. Und auch in jedem muss ich das Build-Verzeichnis und auch das Knoten-Modulverzeichnis erstellen. Das sollte es tun. Ich kann wieder aus dem Server. Und der letzte Schritt hier ist, ein Knotenbild hinzuzufügen. Also, bevor wir nur Bash-Skripting verwenden konnten, weil wir nur einige Ordnermanipulation mit diesen statischen Dateien durchführen mussten. Aber hier laufen wir tatsächlich NPM Rebuild in der Cloud. Bitbucket muss also wissen, welche Knotenversion möchten Sie verwenden? Andernfalls wird die Standardeinstellung verwendet. Wie ich zu Beginn des Kurses sagte, verwenden wir Knoten 10.19. Das ist die Bild-Direktive innerhalb der Pipelines YAML-Datei. Und wir können auch im Build-Prozess unter dem Namen eine Cache-Direktive hinzufügen und Knoten angeben. Und das bedeutet, dass, wenn wir dieses Bild bereits für Node heruntergeladen und Bitbucket das sieht, dann wird es dieses Bild verwenden. Es wird nicht jedes Mal erneut heruntergeladen. Dies beschleunigt Ihren Build-Prozess und spart Ihnen Build-Minuten. Also werde ich das auch dem Meister hinzufügen. Und ein Schritt, den ich im Build-Prozess fast vergessen habe, besteht darin, die NPM-Module mit npm install zu installieren. Fügen Sie das also sowohl dem Staging- als auch dem Master-Zweig-Build hinzu. Also erkannte ich auch, dass ich Endeangst schreibe. Dies sollte Port als n-ten Punkt Port sein, nicht n Punkt n. Also lassen Sie mich das schnell beheben. Und ich habe auch die Web-Hook-Umgebung Key auf die Staging für die Entwicklung geändert , die nur so dass wir dies lokal ausführen können , um zu veranschaulichen, was es auf dem Server tun wird. Wir können auch nicht vergessen, die Abhängigkeiten zu installieren, die wir hier benötigen, um unseren Server zu betreiben. Also werden wir das jetzt tun. Speichern. Also müssen wir Handler dienen. Http ist eingebaut, also brauchen wir das nicht. Und Knotenabruf. Und diese werden in der package.json gespeichert. BitBucket wird also dasselbe package.json sehen und sie genauso installieren. Und genau als Test können wir den Server jetzt ausführen. Toll, also bekommen wir die Konsolenprotokolle. Und wir sollten die gleichen Nachrichten in unserem Flack sehen. Ja. Diese B32 und Grok. Das sollte genau dasselbe sein wie ja, genau, genau. Da unser Server diese Umgebungsdatei benötigt, müssen wir diese auch übertragen. Also können wir das im Grunde kopieren. Nur noch ein Sep. Wir können es einfach als Artefakt definieren. Wenn wir die gleiche Struktur beibehalten wollen. Und wir können es so machen. Und das Gleiche. Wieder, für den Meister. Dieser Halter ist anders. Wenn wir also zu weniger als fünf entwickeln, wird natürlich nichts mit unserem Build passieren, weil wir nur eine Pipeline für den Staging- und Master-Zweig definiert haben. Lassen Sie uns das jetzt zusammenführen und sehen, was passiert. Wir werden zur Inszenierungwechseln Inszenierung und verschmelzen, entwickeln und schieben. So hat unser Build-Prozess bisher funktioniert. Der Installations- und Build-Schritt dauert etwa drei Minuten. Dies wird jedoch ein bisschen schneller. Wie Sie sehen können, dass Bitbucket ein neues Cash für Knoten zusammenstellt, wie wir angegeben. Aber hier läuft der Befehl scp für Node-Module seit einigen Minuten und das ist zu lang. In der nächsten Lektion lernen wir, wie wir das Kopieren all dieser Dateien im sep Prozess mit einem Tarball beschleunigen können . 12. Verwendung von Tarballs zum Übertragen der node Tarballs: Was wir also tun können, um die SEP-Geschwindigkeit zu verbessern , ist tatsächlich eine Teerkugel zu erstellen, bevor sie übertragen wird. Also werde ich diese Pipeline stoppen. Und wir gehen zurück zu unserer Pipeline-Datei. Ich werde dafür sorgen, dass wir auf dem richtigen Zweig sind. Und wir werden hier tun, ist nach dem Build-Befehl, erstellen Sie einen Tarball dem gleichen Namen von Node-Modulen. Und die Artefakte. Jetzt brauchen wir keine Node-Module, sondern den Teerball, der erstellt wird. Und wir werden das auch umbenennen. Anstelle eines Ordners. Wir müssen nur dieses Verzeichnis mit dieser Datei treffen. Und wir werden dasselbe für den Master-Zweig tun. Um fertig zu sein, müssen wir einen zusätzlichen Schritt hinzufügen, um diesen Teerball auf der Serverseite zu entpacken. Und wir sind wieder, Sie werden einen SSH-Befehl verwenden , um Befehle auf dem Server ausführen zu können. Das kopieren wir dem Meister. Sie müssen nur den Ordnernamen ändern. Dies sollte also den Build-Prozess erheblich beschleunigen und auch sehen können , wie viel dieser Caching-Prozess spart. So können wir mit diesem neuen Build-Prozess mit dem Tarball sehen, vor allem, es endet am wichtigsten. Aber die Knotenmodule tarball Deployment viel, viel schneller. Es war also eine unbestimmte Zeitspanne. Ich weiß es nicht. Ich habe etwa vier oder fünf Minuten gewartet und dann gestoppt, aber jetzt sind es nur zehn Sekunden. Darüber hinaus sehen wir, dass Bit-Buckets interne Caching-Prozess diese anfängliche Installationszeit reduzieren. Und Knoten ImageDownloader, die etwa drei Minuten bis nur eine Minute war. Das ist also auch dreimal schneller. Jetzt bleiben Sie im Grunde so viel Zeit. Es kann ein bisschen länger sein, wenn Sie ein paar Pakete zu Knoten hinzufügen. Und dann wäre es auch die sehr lange Zeit, wenn Sie Ihr Knotenimage geändert oder aktualisiert haben, dann müsste es das neue Image neu schreiben. Aber sonst sieht das gut aus. Was ist auf den Server zu springen, um sicherzustellen, dass alles in Ordnung aussieht. Toll, also haben wir alles hier. Wir könnten einen zusätzlichen Schritt hinzufügen, um den Teerball zu entfernen, der übertragen wird. Aber ich überlasse das euch, um es hinzuzufügen. 13. „Den Modus auf Server einstellen: Wie im Beispiel für statische Sites haben wir eine erfolgreiche kontinuierliche Bereitstellung erstellt, aber wir bedienen immer noch nichts. Um sicherzustellen, dass wir alle Dateien bereitgestellt haben, die wir brauchen, ist eine gute erste Überprüfung nur, um Knoten Index j s hier auf dem Server auszuführen. Und wir erwarten, diese in Konsolenprotokolle zu bringen und sie auch mit den Stagingvariablen in einer Pufferzeit zu sehen. Da wir uns im Staging-Ordner befinden , stellt unsere Staging-Pipeline zwei bereit. Und wir bekommen diese Konsolenprotokolle sowie die identischen Slack-Logs. Und wir können sogar hier überprüfen, um sicherzustellen, dass die Variablen korrekt sind. Und ja, es heißt Hallo MyTitle Staging-Testing-Website. So sieht es toll aus. Also, natürlich können wir hier nicht manuell kommen und Knoten index.js jedes Mal ausgeben. Und wir sahen von der statischen Seite, obwohl es ein gutes Beispiel für die Verwendung eines SSH-Befehls war. Es war auch ideal, um den Server immer auf diese Weise zu starten. Und der Weg, dies zu tun, wäre mit für immer Watch Index JS. Aber das Problem ist hier. Für immer würden sich zu viele Dateien ansehen. Weil wir die Knotenmodule hier drin haben. Wirklich alles, was wir sehen wollen, ist Quelle und Bauen. Es gibt also einen zusätzlichen Schritt, den wir tun müssen. Und das ist, eine ewig ignorierende Datei zu erstellen, die genau wie die gitignore Datei ist. Und so wollen wir hier Knotenmodule ignorieren. Und natürlich müssen wir das unserer Pipeline hinzufügen. Und tatsächlich im Build-Skript müssen wir es nur als Artefakt definieren. Und dann können wir SEP benutzen. Großartig. Hatte das Gleiche mit dem Meister. erneut sicher, dass dies der richtige Ordner ist. Und füge es als Artefakt hinzu. In Ordnung, also funktionierte die Bereitstellung unserer Datei für immer ignorieren korrekt. Und jetzt können wir für immer starten, ohne dass es Probleme hat , da wir den großen Node Modulordner ignoriert haben. So ist der Befehl für immer Bindestrich W, Start index.js. Und natürlich fängt das im Hintergrund an, aber wir bekommen immer noch Nachrichten. Dies ist unsere Live-Website-Inszenierung. Und nur um eine Änderung zu simulieren, können wir einfach eine neue Datei berühren. Nennen wir es eine neue Datei, TXT. Und sobald ich das tue, bemerkt für immer, dass sich ändern und die Website neu startet. Das ist also großartig. Wann immer wir SCP-Dateien hier auf den Server, für immer neu starten und würde diese Änderungen in der Website widerspiegeln. 14. Der große Vorteil der Pipelines beim Testen, Merging zum Meister,: Jetzt ist es endlich an der Zeit, dass sich all unsere harte Arbeit an diesem Build-Prozess auszahlt. Und das ist das Szenario, in dem Sie zum Master zusammenführen möchten. So können Sie sich all die Arbeit und Änderungen vorstellen, die wir hier bei der Inszenierung gemacht haben. Ein halbes Dutzend Solar begeht als Test. Und wir haben dafür gesorgt, dass alles funktioniert und jetzt sehr zufrieden mit der Funktionsweise der Website sind . Weil wir sowohl die Staging- als auch die Master-Zweige mit den gleichen exakten Schritten verfolgt haben. Außer unseren benutzerdefinierten Ordnern und Umgebungen. Wir erwarten, dass der Build-Prozess auch genau gleich funktioniert. Alles, was wir tun müssen, um genehmigte und vollständige Änderungen von der Staging zu migrieren , ist die Zusammenführung von Staging zu Master und Push auf unsere Fernbedienung. Und dann wird BitBucket den Rest für uns tun. Also lassen Sie es uns eine Chance geben. Also hier jetzt auf dem Server, nicht im Staging-Ordner, sondern im Master-Ordner. Und es sieht so aus, als hätte unser Build-Skript genau so funktioniert, wie es sollte. Und wir können sogar RNs durchführen. Und wir sollten den Master genau die Master-Variablen sehen. Und als erste Tests, wie wir es mit Staging getan haben, können wir Knoten index.js ausführen. Großartig. Kennzeichnungsnachrichten funktioniert. Konsole protokolliert den korrekten Port und greift auf. Und jetzt kann ich den gleichen Befehl übergeben, wie wir es bei der Staging getan haben. Großartig. Und um diese Live-Vorschau zu erhalten, haben wir die Master-Site und die neueste Inszenierung ist hier. Dies ist die Staging-Site. Großartig. Wir haben also zwei Side-by-Side-Web-Apps. Sie sind mit n grok freigelegt. Die Staging läuft an Port 5,002 auf unserem Server und der Master-Zweig läuft bei 5.003. 15. BONUS: NGINX Proxy-Konfiguration und React PUBLIC Proxy: In der letzten Lektion haben wir also eine kontinuierliche Bereitstellung und kontinuierliche Integration für zwei Zweige nebeneinander, einen Staging-Zweig und einen Master-Zweig, erstellt kontinuierliche Integration für zwei Zweige nebeneinander, . Und für diese Aufgabe haben wir immer noch verwendet und grok als ein einfaches Werkzeug, um die Website schnell zu projizieren und sie über eine öffentliche URL im Internet zu erhalten. Aber wie ich bereits ein paar Kurse erwähnt habe, würde ich zeigen, wie ich das mit einem Tool wie Engine X mache. Und so habe ich bereits meine Ingenieure Konfigurationsdatei hier für Chris durch DOT IN geöffnet, was mein Blog ist. Die Wurzel ist also mein Blog hier. Aber wenn Sie diese Subdomains treffen, erhalten Sie, was sich tatsächlich im Hintergrund befindet, eine völlig andere Knotenanwendung. Und ich habe auch mein Portfolio, das ist eine weitere Anwendung. So können wir dasselbe für die beiden Anwendungen tun, die wir gerade erstellt haben. Und ich werde sie im Grunde als den gleichen Pfadnamen setzen, den wir benutzt haben. Also haben wir diese Staging und wir Proxy übergeben 25.002. Und wir haben auch den Meister. Und das ist an Port 5.003. Wir formatieren nur diesen kleinen Tippfehler hier. Und wir können neu starten und Genetik. Es gibt einen kleinen Schritt, den ich vergessen habe, zu konfigurieren, wenn es um Create React App geht. Und wir können sehen, wenn wir NPM-Build ausführen, sie geben Ihnen eine Art Warnung. Das Projekt wurde unter der Annahme erstellt, dass es im Stammverzeichnis gehostet wird. Sie können dies mit dem Homepage-Feld in Ihrer package.json steuern. Und natürlich mit unserer Konfiguration der neuen Ingenieure sind wir bei der Skillshare Type Script Staging-Ordner und Skill Share Type Script Master-Ordner, nicht im Root. Und wir wollen auch keine statische Homepage in package.json setzen, da wir dies verwenden, um das System lokal im GitHub-Repository der Create React App zu verzweigen. Ich konnte einen Weg finden, mit dem Sie diese öffentliche URL-Umgebungsvariable einstellen können, die perfekt für unseren Anwendungsfall ist. So können wir das kurz vor dem Befehl run build hinzufügen. Wir werden die Umgebungsvariable setzen. Und dann sollte unser Setup gut mit unserem Engine X-Proxy funktionieren. Also verwenden wir nur die Standard-Bash-Syntax, exportieren Sie öffentliche URL. Und das ist HTTPS ist verwurzelt IN Skill Share Typ Script Staging. Das ist für den Staging-Zweig oder den Master-Zweig. Meister. Aber natürlich bedeutet das dann, dass wir diesen n grok Code entfernen sollten. So können wir tatsächlich einfach die Funktion ganz entfernen. Und wir wissen, dass die URL unter froude, AT IN Schrägstrich, Skill Share, Type, Skript, Staging und Master verfügbar sein wird. Also werden wir diesen Code einfach durch die typische Kette schieben , beginnend in Dev Ben bis zur Staging, dann um zu meistern, wird immer noch unsere Slack-Nachricht hier bekommen. Und sollte in Ordnung sein. Also werden wir das drängen und sehen, wie es geht. Wenn wir uns also mit dem neuesten Build-Prozess befassen, gehen wir zum Build-Schritt. Wir können in der Ausführung Build-Befehl sehen , dass Create React App versteht, was wir hier tun. Und sie sagen, es wird angenommen, dass hier unter der URL gehostet wird, die wir bereitgestellt haben. Und in Bezug auf die Serverkonfiguration funktioniert es perfekt. Und wir können sehen, dass die Umgebungsvariable für den Website-Titel auch dynamisch gefüllt ist und wir erwarten das gleiche für die Staging-Site. Ja, perfekt. So dienen Sie also dazu, React-Apps auf separaten Zweigen über Engine X, Proxies, zu erstellen. 16. BONUS: Docker als Alternative zu einem as verwenden: Ich habe in der Kursbeschreibung geschrieben, dass Sie, wenn Sie keinen Remote- oder Cloud-basierten Linux-Server haben , stattdessen eine lokale Docker Linux-Instanz als Ersatz verwenden können. In dieser Lektion wird beschrieben und gezeigt, wie Sie das einrichten können. Nach der Installation von Docker auf Ihrem System können Sie diese Docker-Datei verwenden, um eine Ubuntu-Instanz mit allen erforderlichen Anforderungen zu erstellen . Also werde ich, ich werde dies auf den Unterrichtsnotizen posten. Es enthält Dinge wie curl, get, und es installiert die Knotenversion, die wir für diesen Kurs benötigen. Sobald Sie diese Datei erhalten haben, können Sie sie erstellen. Und Sie werden feststellen, dass ich bereits direkt in diesem Ordner bin oder diese Docker-Datei ist. So können wir es mit diesem Befehl bauen. Und jetzt können wir das Bild mit Doctor laufen interaktiv laufen lassen. Und wir werden es an einen Port binden. Also habe ich 777 willkürlich gewählt , weil es einfacher ist, sich zu merken und ich denke nicht, dass es mit anderen Ports kollidieren sollte. Und wir müssen das auf der dunkleren Seite an 22 binden, was der Standardport für SSH ist. Und wir verweisen auf unsere kopierte Bild-ID. Und wir sind dabei. Also, jetzt, da wir auf unserer Ubuntu-Instanz sind, sollten wir sicherstellen, dass die SSH-Dienste auf. Also werden wir diesen Befehl ausgeben. Sieht in Ordnung aus. Und wir sollten auch ein Passwort für diesen Benutzer festlegen. Und das ist, was die Vergangenheit WD Befehl. Wenn Sie also vorhaben, dies für den gesamten Kurs zu verwenden, und Sie werden darauf zugreifen, zum Beispiel von Bitbucket, von einer externen Quelle, sollten Sie hier ein sehr starkes Passwort festlegen, da ich es nur verwende für ein Beispiel jetzt, werde ich ein ziemlich einfaches Passwort setzen. Und dann musst du es bestätigen. Und die Passwörter wurden erfolgreich aktualisiert. Daher ist es wichtig, diese Terminalinstanz am Laufen zu halten. Dies ist unser Ubuntu-Image, das läuft und Docker. Also öffnen wir ein separates Terminal. Und wir können überprüfen, ob wir uns lokal über SSH einloggen können. Das wird also der root-Benutzer sein. Nur, dass unser eigener localhost, eins bis sieben, 0.0.0, 0.1. Und der willkürliche Port, den wir angegeben haben, der 7777 ist. Und geben Sie das Kennwort ein, das Sie mit dem Befehl password festgelegt haben. Und sieht so aus, als wären wir drin. Um nun einen externen Quellzugriff zu haben, dieses Bild wie Bitbucket-Pipelines Port 777 öffnen , um SSH-Verbindungen von der Welt zu akzeptieren. Um dies zu tun, müssen wir zuerst diese lokale Maschine kennen. In meinem Fall, mein Laptop, was es ist IP-Adresse ist in meinem eigenen WLAN-Netzwerk. Und so können wir hier aus SSH aussteigen. Und um das zu bekommen, können Sie IF Config und grep für ion bei 19 zwei ausgeben und das sollte in der Lage sein, Ihre Adresse zu finden. Wenn hier nichts auftaucht, müssen Sie möglicherweise die vollständige IF-Konfiguration ausgeben und die gesamte Auflistung dort durchschauen. Aber wir sehen, dass die lokale Adresse dieses Laptops in meinem Netzwerk dies ist. Damit wir das jetzt kopieren können. Und wir werden eine Port-Weiterleitungsregel auf unserem Router erstellen. So in der Regel können Sie auf die GUI Ihres Wi-Fi-Routers zugreifen , indem Sie nur in einem beliebigen Browser, 19 2.168.1. Möglicherweise müssen Sie sich die technischen Spezifikationen Ihres Routers ansehen , um die Anmeldeinformationen für die Anmeldung zu erhalten. Aber sobald Sie in sind, haben fast alle Router dieses allgemeine Layout. Und was Sie finden möchten, ist entweder in fortgeschrittener oder direkt Weiterleitung. Es hängt vom Hersteller ab. In der Regel müssen Sie zu einer erweiterten Registerkarte gehen und dann die Weiterleitung finden. Und Sie können diese Regeln einrichten. Wir werden also eine IP v4-Weiterleitungsregel erstellen. Und so ignorieren Sie die bekannte Regel Adder. Und wir gehen einfach hier runter. So wissen wir, was unsere lokalen IP-Adressen, wir haben es gerade kopiert. Und wir wollen, dass der lokale Start und das Ende für der Port ist, den wir angegeben haben. Die externe IP. In meinem Fall, für diesen Router, können Sie es als diese 0 lassen, das alle Nullen. Einige Router, Sie müssen es leer lassen. Auch hier müssen Sie in der Dokumentation für Ihren Router lesen, was die Regel ist. Aber nur um es für unsere eigene Achse zu erinnern, werden wir den externen Port auch auf alle Siebener setzen. Und Sie können auch eine Beschreibung angeben. Ich werde einfach SSH zu Docker sagen und wir wollen es aktivieren. Und klicken Sie auf Übernehmen. Großartig, wir sehen unseren Eintrag hier. Das sieht gut aus, jetzt zu gehen, um auf diese von einer externen Website oder von der Öffentlichkeit zugreifen zu können, benötigen Sie Ihre öffentliche IP-Adresse, nicht diese lokale, sondern die, die Ihr Internet-Service-Provider sieht oder dass Du bist es. Router zeigt das Internet an. Der einfachste Weg, dies zu tun, ist nur, um einfach auf Google zu springen und zu suchen, was meine IP-Adressen. Also, nur für ein einfaches Beispiel, sagen wir, Ihre öffentliche IP-Adresse ist 1.5.2, 1.5.2, 1.5.2, 1.5.2, 1.5.2. Die Art und Weise, wie Sie testen können, ob Ihre Port-Weiterleitung funktioniert hat ist fast der gleiche Befehl, den wir für den lokalen Test ausgegeben haben. Also ist es SSH-Wurzel. Und wenn wir davon ausgehen, dass das Ihre öffentliche IP-Adresse ist, dann ist Port 7777 immer noch. Das sollte funktionieren. Was eigentlich im Hintergrund passiert ist ist, dass Sie Ihren Router unter dieser Adresse treffen. Der Router sucht nach der Regel. Es steht, ah, es wird um 7777 angefordert und dann an Ihren lokalen Rechner weitergeleitet. In meinem Fall leitet dieser Computer und Docker dann den 77772 Port 22 weiter, wie wir in unserem Bild eingerichtet haben. Und Sie werden in der Lage sein, zu Ihrem SSH zu gelangen, oder Sie können über SSH auf das Image zugreifen. Also, wenn dieser Befehl funktioniert und Sie können auf Ihr Bild von einem öffentlichen oder externen Ort im Internet zugreifen . Sie sind alle bereit und Sie können das Docker-Image für diesen Kurs verwenden. Es ist wichtig, wenn Sie etwas ausführen oder Bitbucket erwarten, zum Beispiel, sich anzumelden, dass dies immer ausgeführt wird. Und wenn Sie mit diesem Image fertig sind, können Sie einfach die Ausführung mit dem Exit-Befehl beenden und sich von demselben Terminal abmelden, wo Sie gestartet haben, wird es automatisch und seine Ausführung. Und wir können das noch einmal überprüfen, indem wir Docker ps ausgeben. Und wir sehen, dass es keine Bilder gibt. Beachten Sie, dass Sie, wenn Sie diese Docker-Methode verwenden, auch den Serverwert in Ihren Repository-Variablen aktualisieren müssen. So kann der Benutzer als root bleiben, wie wir es im Kurs gesagt haben. Aber der Server muss diese öffentliche IP sein, die Sie zum Beispiel bei Google nachgeschlagen haben. Und dann sollten Ihre Port-Weiterleitungsregeln den Rest der Arbeit für Sie erledigen. Und Sie sollten in der Lage sein, auf Ihre lokale Linux-Instanz in Docker zuzugreifen, genau wie jede andere Art von Remote-Linux-Box. Sie müssen auch die SSH-Schritte wiederholen, die wir in Lektion vier mit dem öffentlichen und privaten Schlüssel durchgeführt haben. Damit Ihre lokale Ubuntu-Instanz SSH-Zugriff von Bitbucket aus vertrauen kann. In dieser Bonusstunde haben wir gelernt, wie wir schnell eine lokal laufende Ubuntu-Instanz mit Docker einrichten können. Wir haben einen Hafen unserer Wahl eröffnet. In diesem Fall war es in diesem Beispiel 7777 an das Internet, indem eine Port-Weiterleitungsregel auf unserem Router erstellt wurde. Weiterleiten des externen Ports 777 an den lokalen Port 777 auf unserem lokalen Rechner.