© Visual Generation/Shutterstock.com
React und GitLab, passt das zusammen?

DevOps für JavaScript-Entwickler


Wie kann ich als Webentwickler DevOps für mich nutzen? Wo fängt DevOps an und was gehört dazu? Wie gestalte ich meinen Alltag so, dass der maximale Nutzen für die Softwareentwicklung und den Betrieb der Anwendung entsteht? Dieser Artikel zeigt, wie einfach wir mit React und GitLab eine Single Page Application (SPA) erstellen, testen und in die Produktion bringen können.

Nehmen wir zunächst den Begriff DevOps auseinander. Er besteht aus Dev (Development, also der Entwicklung) und Ops (Operations, dem Betrieb einer Software). Hierbei ist wichtig, dass die Akteure nicht dieselben sein müssen. Es ist sogar empfehlenswert, dass Fachleute aus Entwicklung und Administration ihre Schwerpunkte zusammenbringen, um den maximalen Erfolg des Ansatzes zu gewährleisten. Wikipedia sagt dazu: „DevOps soll durch gemeinsame Anreize, Prozesse und Softwarewerkzeuge (englisch: tools) eine effektivere und effizientere Zusammenarbeit der Bereiche Dev, Ops, Qualitätssicherung und Fachbereichen ermöglichen.“ [1] Mit GitLab ist es jedoch auch möglich, die gesamte Strecke von der Entwicklung über das automatisierte Testen bis zum Rollout in die Produktion als Frontend-Entwickler allein zu meistern.

Im Bereich der Frontend-Applikationen können wir sogar sehr einfach die ganze Strecke zwischen Development und Operations abbilden. Durch die zahlreichen Frameworks und Services sind nicht mehr viele Kenntnisse nötig, um eine SPA zu erstellen und diese auch kontinuierlich zu testen und vollautomatisiert zu installieren. Der Begriff der Installation ist insofern zutreffend, da wir die Software bspw. durch npm (Node Package Manager) erstellen lassen und dann wie ein Paket auf den Webserver kopieren. Das fertige Paket, das mit einem JavaScript Framework erstellt worden ist, bringt alle Abhängigkeiten mit und bedarf dann keiner weiteren Besonderheiten auf dem Server selbst. Damit ist es in vielen Fällen möglich, diese Applikation direkt auf einem Dienst wie GitLab Pages [2] zu hosten. Als Frontend-Entwickler können wir also mit unserem Coderepository arbeiten, die Software testen und ausrollen/installieren. Das bedeutet, dass wir keine weitere Unterstützung brauchen, um ein Projekt in Gänze betreuen zu können. Früher sprach man in diesem Fall von der klassischen One-Man-Show, heute dürfen wir den Ansatz DevOps nennen.

Was benötigen wir für DevOps?

Ein neues Projekt „from scratch“, also auf der grünen Wiese, zu erstellen, kommt immer seltener vor. Wenn wir jedoch einmal diesen Komfort genießen dürfen, sollten wir direkt beim initialen Set-up der Umgebung an alles Nötige denken. Was wäre das?

  1. das Coderepository

  2. ein Framework für die Entwicklung

  3. ein Framework zum Testen der Applikation

  4. Continuous Integration – automatisiertes Testen der Applikation

  5. Continuous Delivery – automatisiertes Installieren der Applikation

Das DevOps-Set-up für das Web

Als Coderepository verwenden wir GitLab. Privatpersonen stehen dort unendlich viele private Repositorys zur Verfügung, die alle nötigen Funktionen für die Verwaltung des Codes und die Erstellung der CI/CD Pipeline bieten [3]. Das Framework für die Applikation soll React sein. Damit ist es JavaScript-Entwicklern schnell und leichtgewichtig möglich, komplexe SPAs zu erstellen, zu testen und durch eine Vielzahl von verfügbaren Komponenten und UI-Bibliotheken zu erweitern. In diesem Beispiel verwenden wir für das UI die Bibliothek von Material UI.

Als Test-Framework kommt die React Testing Library zum Einsatz, die in der Community sehr etabliert ist. CI und CD werden von GitLab bereitgestellt. Die Shared Runner des Anbieters sorgen dafür, dass bei jedem Commit in unser Coderepository entsprechende Regeln gepr...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang