• Zuhause
  • Artikel
  • Führen Sie die folgenden Schritte aus, um mit Docker und React einen Workflow in Produktionsqualität zu erstellen
Veröffentlicht am 13-03-2019

Führen Sie die folgenden Schritte aus, um mit Docker und React einen Workflow in Produktionsqualität zu erstellen

Foto von Frank McKenna auf Unsplash

Vor kurzem habe ich beschlossen, meine Fähigkeiten auf die Erstellung von Software-Images mit Docker-Containern auszuweiten. Ich hatte Schwierigkeiten, die verschiedenen Puzzleteile miteinander zu verbinden, aber schließlich danke ich für Stephen Griders Udemy-Kurs „Docker and Kubernetes: The Complete Guide“. Ich werde also wie üblich dokumentieren, was ich gelernt habe, so dass es für mich und jeden leicht ist, dasselbe Konzept in ihrer Anwendung zu implementieren.

In diesem Beitrag werde ich Ihnen zeigen, wie Sie die Dockerfile für die Entwicklungs- und Produktionsumgebung konfigurieren. Außerdem werde ich Sie durch das Einrichten der Travis-Datei für die Verwendung des Travis-CI-Integrationstools führen. Der Projektordner ist in meinem GitHub-Konto als Referenz verfügbar.

Was ist in diesem Tutorial enthalten?

Wir werden folgende Themen behandeln:

1. Erstellen eines einzigen Docker-Containers für die Entwicklungsumgebung - einschließlich Port-Mapping mit dem Paket create -react-app npm.

  • Konfigurieren Sie die Datei "Dockerfile.dev"
  • Konfigurieren Sie die Datei docker-compose.yml, um die Dienste im Container zuzuordnen.
  • Konfigurieren Sie die Datei travis.yml zum Testen der Codebase als Vorbereitungsschritt für die Bereitstellung.

2. Stellen Sie das Anwendungs-Image für die AWS Cloud Services bereit. das beinhaltet:

  • Erstellen Sie eine Docker-Datei für die Produktionsumgebung.
  • Erstellen Sie ein Konto bei AWS
  • Konfigurieren Sie travis.yml für die Bereitstellung.
Dieses Tutorial behandelt nicht das Erstellen komplexer Bilder mit mehreren Containern - es wird in einem separaten Beitrag enthalten sein.

Voraussetzungen

Dieses Tutorial setzt voraus, dass Sie über Folgendes verfügen:

  1. npm - Das Paket create -react-app wurde bereits installiert.
  2. Vertraut mit React-js
  3. Git und GitHub Vertrautheit.
  4. Docker Basics, wie es funktioniert.
  5. Docker auf Ihren lokalen Computer heruntergeladen - einschließlich Docker-CLI, Download hier.
  6. DockerHub-Konto - hier herunterladen.
  7. YMAL-Syntax, wenn nicht, können Sie auf diese Site verweisen.
  8. Travis-CI-Konto können Sie sich hier mit Ihrem GitHub-Konto anmelden
  9. AWS-Konto - hier, wenn Sie noch keinen haben.

Was ist Docker ???

Seit ich zum ersten Mal von Docker gehört habe, war ich neugierig, es zu lernen und zu nutzen. Docker ist für keine Anwendung erforderlich; Es ist jedoch ein Werkzeug im normalen Entwicklungsablauf, das dem Entwickler das Leben viel angenehmer macht.

Nicht nur Entwickler, sondern auch Endbenutzer, die diese Software verwenden sollen und mit Redis vertraut sind, wissen, wie schmerzhaft es ist, sie ohne Docker auf dem lokalen Computer zu installieren. Außerdem können Sie mit dem Andockfenster die Anwendungsinfrastruktur-Pipeline einmal einrichten. Kleine Änderungen können schnell vorgenommen werden, ohne dass Sie Ihre Anwendungsinfrastruktur neu strukturieren müssen.

Kurz gesagt: Docker macht es einfach, Software zu installieren und auszuführen, ohne sich um Einstellungen oder Abhängigkeiten kümmern zu müssen.

EINS: Generieren Sie das React-Projekt

In diesem Tutorial ziehe ich es vor, das npm-Paket (create -react-app) zu verwenden, da es viele vorkonfigurierte Dateien enthält, die uns auf Docker als Konzept konzentrieren. Beginnen Sie mit dem Öffnen Ihres Terminals und geben Sie create -rease-app Projektname ein. Weisen Sie dann dieses Verzeichnis als aktuelles Arbeitsverzeichnis zu.

ZWEI: Dockerfile for Development

In diesem Lernprogramm müssen drei Befehle behandelt werden:

  1. npm run start: Nur gültig für die Entwicklungsumgebung - Start des Servers auf localhost.
  2. npm run test: Führt alle mit der Codebase verknüpften Tests aus.
  3. npm run build: Erstellen einer für die Produktion geeigneten Produktionsversion der Anwendung - Zippen aller Anwendungen in einem für die Bereitstellung geeigneten Ordner.

Ich werde mich für die AWS-Cloud bereitstellen, daher folge ich dem Ansatz, eine separate Docker-Datei für die Entwicklungsumgebung zu erstellen. Es ist für die Ausführung des Image-Containers in der Entwicklungsumgebung verantwortlich. Das andere Dockerfile ist dafür verantwortlich, das Image innerhalb der Produktionsumgebung zu erstellen - wir erstellen es später. Für den Befehl npm run test schreiben wir eine Konfiguration für Travis-CI.

Erstellen Sie JETZT eine neue Datei im Stammverzeichnis des Projekts, und nennen Sie sie Dockerfile.dev.

Hinweis: Die Konfigurationsschritte sind für andere Anwendungen, die in verschiedenen Sprachen geschrieben sind, nahezu identisch.

DREI: Die erforderlichen Bilder abrufen

Um die Anwendung als Docker-Container-Image auf einem beliebigen Computer auszuführen und das Image fehlerfrei ausführen zu können, müssen wir Docker anweisen, welches Basis-Image verwendet werden soll. Stellen Sie sich vor, welches Betriebssystem der Benutzer zum Ausführen der Software verwenden soll und welches zum erfolgreichen Ausführen des Images verwendet werden soll.

Gehen Sie zu dockerhub.com und melden Sie sich an. Navigieren Sie dann zum Explorer-Button - es werden alle verfügbaren Bilder im Alpin-Basisbild angezeigt. Suchen Sie nach dem Node-Repository-Image. Wenn Sie auf das offizielle Image-Repo klicken, scrollen Sie zum Titel "So verwenden Sie dieses Image", und Sie werden feststellen, dass dieses Image auf dem beliebten Alpine Linux-Projekt basiert.

hub.docker.com

Kehren Sie zur Dockerfile.dev zurück und beginnen Sie mit dem Schreiben der Befehle, um das Image ausführen zu können. Schreiben Sie in die Dockerfile.dev die folgenden Befehle:

Dockerfile.dev

Lassen Sie uns aufschlüsseln, was jeder Befehl in dieser Datei bedeutet. Die linke Seite enthält Anweisungen, die dem Docker-Server mitteilen, was er tun soll. Dementsprechend ist die rechte Seite das Argument der Anweisung. Also, aus alpine nehmen Sie die Node Image Version 11.10.1.

Der zweite Befehl besteht darin, das Arbeitsverzeichnis innerhalb des Containers anzugeben. Denken Sie daran, dass wir ein Image der Anwendung in einer Linux-VM ausführen. Mit diesem Befehl wird sichergestellt, dass alle folgenden Befehle nach WORKDIR relativ zu diesem Pfad im Container ausgeführt werden. Denken Sie daran, dass wir unsere Anwendung als Image in das Linux VM-Dateisystem ausführen.

Für dieses Projekt ist das Arbeitsverzeichnis "/ app", um Konflikte zwischen dem Container-Dateisystem und dem Anwendungsdateisystem zu entfernen. Sie können "/ usr / app" wählen.

VIER: Das Bild bauen

Jetzt können wir das Anwendungsimage erstellen, indem Sie Folgendes ausführen:

Docker-Build -f .
ODER
Docker-Build -t  / .
  • (- f) bedeutet, dass diese bestimmte Datei als Docker-Konfigurationsdatei ausgeführt wird.
  • (- t) bedeutet, das Build nach Ihrem Namen zu kennzeichnen - Sie müssen sich also keine Gedanken darüber machen, welche ID Sie verwenden müssen.
  • (.) im aktuellen Kontext bauen - vergiss nicht "Ich mache das immer"

Für dieses Projekt war der Befehl wie folgt:

Docker-Build -f Dockerfile.dev.

Docker erstellt den Image-Container.

Das Bild wurde erfolgreich erstellt

FIVE: Zuordnen des Serverports

Wenn Sie bei 3000 versucht haben, zum lokalen Host zu navigieren, wird an dieser Stelle ein großes "Diese Site kann nicht erreicht werden" angezeigt. Um die Portnummer zuzuweisen, können Sie den Docker-CLI-Befehl verwenden. Dies ist jedoch unerträglich und verwirrend. Ich werde es sowohl mit der Docker-CLI als auch mit Docker-Compose demonstrieren.

1. Docker-CLI verwenden (nicht bevorzugt)

Docker-Run -p (Portnummer auf Ihrem lokalen Computer) :( Port in Container) -v / app / node_modules -v $ (pwd): / app 

Vor dem Ausführen dieses langen Befehls müssen Sie jedoch die Container-ID abrufen. Um diese ID zu erhalten, geben Sie den folgenden Befehl in das Terminal ein.

Docker-Build -f Dockerfile.dev.
  • (- f) bezeichnet den Namen der Dockerfile (Standardeinstellung ist "PATH / Dockerfile"). Hier weisen wir Docker an, ein Bild aus dieser Datei zu erstellen.
Erstellen von Ausgaben nach dem Erstellen von Dockerfile.dev

Ignorieren Sie diese Warnungen vor Ablehnung - es ist in Ordnung.

Andocklauf 

Nehmen Sie die Container-ID, nachdem das Docker das Image erfolgreich erstellt hat, und führen Sie diesen Container aus.

Andocklauf b482e22ef417
#dies sollte einzigartig sein, das funktioniert nicht für Sie - Sie müssen sich eines besorgen

Öffnen Sie eine neue Terminalregisterkarte und ordnen Sie den Serverport des lokalen Computers dem Container zu.

Docker-Run -p 3000: 3000 -v / app / node_modules -v $ (pwd): / app b482e22ef417

Wenn Sie nun zu http: // localhost: 3000 / navigieren, wird das schöne reag Logo in Ihrem Browser angezeigt. Puh!!

2. Docker-Compose verwenden (bevorzugt)

Die bisherige Kartierungsmethode ist nicht zuverlässig und ist schmerzhaft. Selbst als ich dieses Tutorial schrieb, um die Ausgaben zu überprüfen, musste ich einige Fehler beheben. Bei skalierbaren Anwendungen ist diese Methode keine funktionierende Lösung. Dank der Docker-Compose-CLI können wir unseren localhost auch ohne Tests ausführen, ohne komplizierte Befehle ausführen zu müssen.

Wenn Sie eine Docker-CLI haben, befindet sich diese bereits auf Ihrem Computer.

Erstellen Sie im Stammverzeichnis des Projektordners eine neue Datei mit dem Namen docker-compose.yml. Schreiben Sie die folgenden Befehle auf:

docker-compose.yml

Seien Sie vorsichtig mit den Einrückungen, da YMAL empfindlich gegenüber Einrückungen ist. Wenn Sie VScode verwenden, verwenden Sie die YMAL-Sprachunterstützung von Red Hat.

Öffnen Sie jetzt Ihr Terminal und starten Sie

Docker zusammenstellen

Fertig, und Sie können zu Ihrem lokalen Gastgeber navigieren und das fröhliche React-Logo sehen.

SIX: Zuordnung der Testsuite

Um die Testsuite abzubilden, müssen Sie lediglich die Konfiguration für die Testsuite als Dienst in der Docker-Compose-Datei hinzufügen:

docker-compose.yml nach dem Hinzufügen von Testservices

Wenn Sie Ihrer Anwendung weitere Testfälle hinzufügen, wird diese auf diese Weise schnell ausgeführt, ohne dass das Image neu erstellt werden muss, da Sie etwas geändert haben.

Docker zusammenstellen
Terminal im Docker-Compose-Up-BefehlLokaler Host an Port 3000 nach dem Ausführen von Docker-Compose

Bitte geben Sie Ihren Code in Ihr GitHub-Konto ein - Sie benötigen ihn in den nächsten Schritten.

SIEBEN: Testen Sie unsere Codebase mit Travis-CI

Travis-CI ist eine Integrationsplattform, mit der Sie Ihre Codebase testen können, um sich auf die Bereitstellung in der Cloud vorzubereiten. Ich gehe davon aus, dass Sie ein Konto bei Travis erstellen können - es ist einfach und unkompliziert.

Suchen Sie nach der Anmeldung nach dem kürzlich hinzugefügten Repository und wählen Sie es aus. Wenn es nicht angezeigt wird, klicken Sie links unter Ihrem Namen auf Konto synchronisieren. Aktivieren Sie anschließend die Build-Funktion, indem Sie auf die grüne Schaltfläche für das Repository aktivieren klicken.

den Projektordner bei travis-ci, bevor Sie das Repo aktivieren

An diesem Punkt müssen wir einige Konfigurationen / Anweisungen für Travis schreiben, um zu wissen, was genau wir wollen. Wir können dies tun, indem Sie eine neue Datei im Stammverzeichnis unseres Projektordners erstellen und diese Datei .travis.yml nennen. Beachten Sie, dass der Punkt vor dem Dateinamen wichtig ist.

.travis.yml-Dateikonfiguration

Wie Sie sehen, ist es einfach. Das einzig Neue daran ist, dass wir die Testabdeckung mit einschließen. Der letzte Schritt hier ist, den Code zu übergeben, ihn an GitHub zu übergeben und den Build für Travis auszulösen - dies kann je nach Verbindung mehrere Minuten dauern.

travis protokolliert nach dem Auslösen des Builds

In der Entwicklungsumgebung sind Sie mit Docker und Travis fertig. Als Nächstes erläutere ich Ihnen, was in der Produktionsumgebung zu tun ist und wie wir AWS bereitstellen können.

ACHT: Konfigurieren Sie Dockerfile für die Produktionsumgebung

Wie bereits erwähnt, gibt es beim Entwickeln von Reakt-Anwendungen drei Befehle: npm run start, npm run test und npm run build. Wir haben die ersten beiden behandelt. Jetzt ist es an der Zeit, den letzten Prozess zu verarbeiten, nämlich npm run build.

Nginx ist ein Docker-Image, das für die Ausführung des Servers im Container verantwortlich ist.

Erstellen Sie dazu im Stammverzeichnis Ihres Projektordners eine neue Datei mit dem Namen Dockerfile und schreiben Sie Folgendes:

Dockerfile-Konfiguration für die Produktionsumgebung

Die COPY-Befehlsstruktur stammt aus der Nginx Dockerhub-Dokumentation. Die vollständige Dokumentation finden Sie hier (Hosting einiger einfacher statischer Inhalte).

Öffne das Terminal und starte:

Docker bauen.
Bauen mit Nginx

Wenn Sie nun zu http: // localhost: 8080 / navigieren, können Sie den Server vollkommen sehen.

Übertragen Sie Ihren Code in git und drücken Sie ihn zu Ihrem GitHub-Konto.

NEUN: Bereitstellung in der AWS-Cloud

Der letzte Schritt besteht darin, diese Beispielanwendung in der Cloud bereitzustellen. Die Verwendung von AWS ist mit Digital Ocean und der Google Cloud identisch. Es gibt ein 12-monatiges kostenloses Abonnement, aber Sie müssen eine gültige Kreditkarte vorlegen. Sobald Sie Ihr Konto erstellt haben, melden Sie sich mit der Oange-Taste oben rechts an der Konsole an. Suchen Sie nach der Anmeldung nach Elastic Beanstalk.

Suche nach Elastic BeanStalk

Elastic Beanstalk ist geeignet, wenn Sie jeweils genau einen Container betreiben. Es verfügt über einen Load Balancer, der alles für Sie skaliert und den Server startet.

Fahren Sie fort und wählen Sie Neue Anwendung erstellen.

Begrüßungsbildschirm von AWS Elastic Beanstalk

Geben Sie den Anwendungsnamen und die Beschreibung ein. Für dieses Tutorial rief ich meine Dockerreakte an. Klicken Sie auf Erstellen, und Sie werden umgeleitet, um eine neue Umgebung für diese Anwendung zu erstellen. Klicken Sie auf Jetzt erstellen und wählen Sie die Webserverumgebung aus.

Auswahl des Webservers env.

Wählen Sie in der Basiskonfiguration Docker als vorkonfigurierte Plattform.

Konfigurieren der Umgebung in der AWS-Cloud

Hit schaffen Umgebung

AWS generiert die erforderlichen Infrastrukturressourcen für unsere Anwendung

Das Erstellen der Infrastrukturressourcen für Ihre Anwendung dauert einige Minuten. Sie müssen warten.

SEHR WICHTIG: Löschen Sie nach Beendigung des Tutorials die Anwendung von Ihrem Konto. Andernfalls werden Ihnen die generierten Ressourcen in Rechnung gestellt. Ich werde Ihnen am Ende des Tutorials sagen, wie Sie es löschen können.
Die Anwendung wurde erfolgreich auf der AWS bereitgestellt

Wenn Sie zur angegebenen URL navigieren, wird der Standardbildschirm von Elastic BeanStalk angezeigt:

der BeanStalk-Begrüßungsbildschirm

Suchen Sie bei Services nach S3 - Scalable Storage in der Cloud. Verwenden Sie diese, um den Bucket-Namen abzurufen:

Suche nach S3 auf Dienstenden Eimernamen von S3-Eimer erhalten

Wir benötigen einige API-Schlüssel, um Travis-CI-Zugriff für die Bereitstellung über die Cloud zu gewähren. Suchen Sie also nach IAM (Verwalten des Benutzerzugriffs und der Verschlüsselungsschlüssel):

Suche nach IAM in Diensten

Dann fügen Sie einen Benutzer hinzu:

Erstellen eines neuen Benutzers, um travis den Zugriff auf die Cloud zu ermöglichenZugriffsart konfigurieren

Zum Schluss erhalten Sie einen Zugangsschlüssel und einen geheimen Schlüssel. Speichern Sie sie in einer Notiz. Wir werden einen Trick machen, um diese Schlüssel zu verstecken, während Sie Travis-CI testen.

Navigieren Sie auf der Travis-Plattform zum Projekt und suchen Sie nach der Schaltfläche "Weitere Optionen". Wählen Sie dann "Einstellungen" und "Umgebungsvariablen". Fügen Sie Namen und Wert hinzu und deaktivieren Sie den Anzeigewert im Build-Protokoll.

Hinzufügen von geheimen / Zugriffsschlüsseln zu travis als Umgebungsvariablen

Öffnen Sie die Datei .travis.yml, um die Bereitstellungskonfiguration aufzuschreiben:

.travis.yml Konfiguration für die Bereitstellung

Übertragen Sie Ihren Code in git und drücken Sie ihn zu Ihrem GitHub-Konto. Löst den Build auf Travis-CI aus, wenn er nicht von alleine ausgelöst

Erfolgreiche Build-Protokolle auf Travis-ci

Wenn Sie nun zur angegebenen URL navigieren, können Sie sehen, dass Ihre Anwendung erfolgreich in der AWS-Cloud bereitgestellt wurde.

Anwendung erfolgreich in AWS implementiert

OPTIONAL: Löschen der Anwendung aus der AWS-Cloud

Löschen der Anwendung aus AWS

Es braucht Zeit, also machen Sie sich keine Sorgen, wenn es nicht sofort gelöscht wird. Für mich dauerte es etwa 5 Minuten und ich musste die Anwendung mehrmals löschen.

Schlussnotizen:

Ich hoffe, ich habe meine Erfahrung vermittelt, als ich die Grundlagen für das Erstellen eines Docker-Images erlernte, testete und schließlich in der Cloud implementierte. Als Nächstes werde ich immer wieder lernen, wie man ein Image aus mehreren Containern erstellt - in Kürze.

Wenn Ihnen mein Beitrag gefallen hat, folgen Sie mir bitte hier auf Medium oder hinterlassen Sie einen Kommentar. Sie können mir auf Twitter @salmaneg folgen. Danke fürs Lesen und weiter lernen !!!