Moderne Apps mit OpenShift, Teil 1: Web-Apps in nur zwei Befehlen

Wir starten eine Reihe von Beiträgen, in denen wir Ihnen zeigen, wie Sie moderne Web-Apps wie React oder Angular für Red Hat OpenShift mithilfe des neuen S2I-Builder-Images (Source-to-Image) bereitstellen.







Was kommt in dieser Reihe von Beiträgen:



  • 1: - ;
  • 2: S2I HTTP-, NGINX, OpenShift -;
  • 3: OpenShift .




Zunächst muss OpenShift installiert werden. Wir werden Minishift verwenden, mit dem Sie OpenShift in einer virtuellen Maschine auf Windows-, Mac- oder Linux-Computern ausführen können. Laden Sie das Red Hat Container Development Kit (CDK) herunter und befolgen Sie diese Anweisungen , um es zu installieren und auszuführen. Weitere Informationen finden Sie im finden CDK - Dokumentation und in der Dokumentation auf der OKD.io Website .



Nach dem Start von minishift müssen Sie sich anmelden und das Projekt konfigurieren. Dies erfolgt in nur zwei Befehlen:



$ oc login

$ oc new-project web-apps


Dies setzt voraus, dass Sie Node.js 8+ und npm 5.2+ bereits installiert haben.



Wenn Sie diesen Artikel geöffnet haben, um herauszufinden, was diese beiden magischen Befehle sind, fahren Sie mit dem letzten Teil fort. Ansonsten gehen Sie weiter entlang des Textes!



Was ist eine moderne Webanwendung?



Zunächst müssen wir entscheiden, was wir unter "moderner Webanwendung" verstehen und wie sie sich von der sogenannten "reinen" Node.js-Anwendung unterscheidet.



Für uns ist eine moderne Webanwendung so etwas wie React, Angular oder Ember mit einem Build-Schritt, der statisches HTML, JavaScript und CSS generiert. Während der Erstellungsphase werden normalerweise mehrere Aufgaben ausgeführt, z. B. Verkettung, Transpilation (Babel oder Typescript) und Dateiminimierung. Jedes der wichtigsten Frameworks verfügt über einen eigenen Erstellungsprozess und eine eigene Pipeline. Tools wie Webpack, Grunt und Gulp fallen jedoch ebenfalls in diese Kategorie. Alle diese Tools verwenden Node.js, um Build-Prozesse auszuführen.



Der in dieser Phase generierte (kompilierte) statische Inhalt benötigt jedoch nicht unbedingt einen Knotenprozess, um ihn bereitzustellen. Ja, Sie können hier so etwas wie das Serve-Modul verwenden , das sich hervorragend für die Entwicklung eignet, da Sie schnell sehen können, wie die Site aussieht. Für Produktionsbereitstellungen wird jedoch normalerweise empfohlen, NGINX oder Apache HTTP Server zu verwenden.



Andererseits verwendet eine "reine" Knotenanwendung den Node.js-Prozess zum Starten und kann so etwas wie eine Express.js- Anwendung (d. H. Ein REST-API-Server) sein - sie hat normalerweise keinen Erstellungsschritt (ja) ja, wir kennen Typescript). Entwicklungsabhängigkeiten werden normalerweise nicht installiert, da wir nur diejenigen benötigen, die zum Ausführen der Anwendung verwendet werden.



Sie können lesen , wie eine „saubere“ Knoten - Anwendung auf Openshift implementieren unser Node.js S2I Bild unter Verwendung von zum Beispiel hier .



Bereitstellen einer Webanwendung unter OpenShift



Nachdem wir den Unterschied zwischen einer modernen Web-App und einer Node.js-App beschrieben haben, zeigen wir Ihnen, wie Sie unsere Web-App tatsächlich für OpenShift bereitstellen.



Hier werden wir sowohl eine React-App als auch eine moderne Angular-App bereitstellen. Beide Projekte können mit den entsprechenden CLI-Tools relativ schnell erstellt werden: create-react-app undeckig/ cli. Dies ist einer der beiden Befehle, die im Titel dieses Artikels erscheinen.



App reagieren



Wenn die Create-React-App bereits global installiert ist, ist das großartig. Wenn nicht, führen Sie einfach den entsprechenden Befehl mit npx wie folgt aus:



$ npx create-react-app react-web-app


Hinweis: npx ist ein einmaliger Befehlsläufer, der in npm 5.2+ enthalten ist. Weitere Informationen finden Sie hier .



Dieser Befehl erstellt eine neue React-App, und auf dem Bildschirm sollte Folgendes angezeigt werden:







Angenommen, Sie befinden sich im neu erstellten Projektverzeichnis, können Sie den zweiten Befehl ausführen, um unsere Anwendung für OpenShift bereitzustellen:



$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose


Jetzt sieht die OpenShift-Konsole ungefähr so ​​aus:







Und dies ist die Webkonsole nach dem Start der Anwendung:







Bevor wir zur Angular-App übergehen, schauen wir uns an, was unser letzter Befehl bewirkt.



Es beginnt mit npx nodeshift - hier führen wir das nodeshift- Modul mit npx aus , wodurch es einfach ist, Knotenanwendungen für OpenShift bereitzustellen.



Lassen Sie uns nun die Optionen analysieren, die an nodeshift übergeben werden. Der erste ist --strictSSL = false.



Da wir ein Minishift haben und es ein selbstsigniertes Zertifikat verwendet, müssen wir nodeshift dies mitteilen, damit keine Sicherheitsfehler auftreten (tatsächlich sagen wir dies der unter der Haube versteckten Anforderungsbibliothek).



Als nächstes kommt die lange Option --dockerImage = nodeshift / ubi8-s2i-web-app --imageTag = 10.x. Sie weist nodeshift an, das neue Web App Builder-Image mit einem 10.x-Tag zu verwenden.



Jetzt teilen wir dem S2I-Bild mit, dass wir Garn verwenden möchten: --build.env YARN_ENABLED = true. Schließlich weist das Flag --expose nodeshift an, eine OpenShift-Route für uns zu erstellen, damit wir eine über das Internet zugängliche URL zu unserer Anwendung erhalten können.



Da dies ein Artikel in der OpenShift Fast Track-Reihe ist, verwendet das S2I-Image hier das Serve-Modul , um die generierten statischen Dateien bereitzustellen . Im nächsten Beitrag werden wir zeigen, wie dasselbe S2I-Image mit NGINX verwendet wird.



Winkel App



Jetzt erstellen wir eine Angular-App. Der erste Schritt besteht darin, unsere neue Anwendung mithilfe der Angular CLI zu erstellen. Wenn Sie es nicht global installiert haben, können Sie es mit npx starten:



$ npx @angular/cli new angular-web-app


Dieser Befehl erstellt ein neues Angular-Projekt, und wir führen, wie bei der React-Anwendung, einfach einen anderen Befehl aus, um es bereitzustellen:



$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose


Ähnlich wie im Fall React sieht die OpenShift-Webkonsole ungefähr so ​​aus:







Dies ist jeweils die Webkonsole, wenn Sie die Anwendung starten:







Schauen wir uns nun den Bereitstellungsbefehl an. Es ist React sehr ähnlich, aber es gibt wichtige Unterschiede.



Die Unterschiede liegen im build.env-Flag: Für Angular schreiben wir --build.env OUTPUT_DIR = dist / angle-web-app, und hier gibt es zwei Punkte.



Zuerst haben wir die Variable YARN_ENABLED entfernt, da wir für unser Angular-Projekt kein Garn verwenden.



Zweitens haben wir die Variable OUTPUT_DIR = dist / angle-web-app hinzugefügt. Daher sucht das S2I-Image standardmäßig im Build-Verzeichnis nach Ihrem kompilierten Code. React verwendet standardmäßig Build, daher haben wir diesen Parameter im vorherigen Beispiel nicht konfiguriert. Aber Angular verwendet andere Dinge für seine kompilierte Ausgabe. Daher schreiben wir, dass der Parameter ist / <PROJECT_NAME> in unserem Fall gleich dist / angle-web-app ist.



Fazit



Für diejenigen, die das Parsen der obigen Beispiele übersprungen haben und gleich zu Beginn des Artikels hierher gegangen sind, zeigen wir die beiden Befehle, mit denen die Bereitstellung ausgeführt wird:



Reagieren:



$ npx create-react-app react-web-app

$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose


Winkel:



$ npx @angular/cli new angular-web-app

$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose


Zusätzliche Ressourcen



Heute haben Sie gesehen, wie Sie mit dem neuen S2I Web App Builder-Image schnell und mühelos eine moderne Webanwendung unter OpenShift bereitstellen können. In unseren Beispielen wird die Community-Version dieses Bildes verwendet, aber Red Hat hat bereits die Red Hat Openshift Application Runtime (RHOAR) veröffentlicht. Seien Sie also vorsichtig.



Im nächsten Beitrag zeigen wir Ihnen, wie Sie ein neues S2I-Image zusammen mit einem vorhandenen HTTP-Server-Image wie NGINX verwenden und die OpenShift-Buildkette zum Organisieren von Produktionsbereitstellungen verwenden.



Der dritte Teil dieser Reihe befasst sich mit der Organisation eines Entwicklungsworkflows für eine Anwendung auf der OpenShift-Plattform.



Wir empfehlen außerdem, das kostenlose E-Book Deploying to OpenShift herunterzuladen und zu überprüfen .



All Articles