Der ultimative Leitfaden für die Bereitstellung von Docker-Anwendungen

Docker hat die Art und Weise, wie Software entwickelt, getestet und bereitgestellt wird, revolutioniert. Es beseitigt viele der üblichen Probleme bei der Softwarebereitstellung, wie Kompatibilitätsprobleme und Umgebungsunterschiede zwischen Entwicklungs- und Produktionsumgebung.

In diesem Artikel werden wir den Prozess der Bereitstellung eines Docker-Containers in einer Produktionsumgebung untersuchen. Wir werden über Container, Docker, die Vorteile der Verwendung von Docker und die Bereitstellungsoptionen sprechen. Schließlich zeigen wir Ihnen, wie Sie eine Next.js-App erstellen, docken und in Back4app Containern bereitstellen können – und das völlig kostenlos!

Was sind Container?

Ein Container ist ein eigenständiges ausführbares Paket, das alles enthält, was zur Ausführung einer Anwendung erforderlich ist. Das heißt, Code, Laufzeit, Bibliotheken, Umgebungsvariablen und Konfigurationsdateien. Das Tolle an Containern ist, dass sie überall eingesetzt werden können und dass sie klein, schnell und effizient sind.

Vorteile der Verwendung von Containern

Der Einsatz von Containern kann für Ihr Unternehmen von großem Nutzen sein. Sie können sowohl Entwicklern als auch dem IT-Betriebsteam helfen. Einige der Vorteile der Verwendung von Docker sind:

• Portabilität: Container können überall eingesetzt werden!
• Anwendungsisolierung: Container isolieren die Anwendung und ihre Abhängigkeiten vom Hostsystem.
• Trennung der Verantwortlichkeiten: Die Arbeit wird zwischen Entwicklern und dem IT-Betriebsteam aufgeteilt.
• Schnellere Anwendungsentwicklung: keine Notwendigkeit, sich mit lokalen Entwicklungsumgebungen herumzuschlagen, CI/CD.
• Einfache Skalierung: Container lassen sich in Kombination mit Orchestrierungssoftware leicht skalieren.

Weitere Informationen über Container finden Sie unter Was sind Container im Cloud Computing?

Container vs. Virtuelle Maschinen

Virtuelle Maschinen (VMs) sind eine Abstraktion der physischen Hardware, während Container auf der Ebene des Betriebssystems virtualisiert werden. VMs bieten mehr Isolation und Sicherheit, während Container wenig Platz benötigen und effizienter und skalierbarer sind.

Es ist möglich, Container und VMs zu kombinieren, um das Beste aus beiden zu erhalten.

Was ist Docker?

Docker ist ein Linux-basiertes Open-Source-Tool, mit dem Entwickler Anwendungen in leichtgewichtigen Containern erstellen, bereitstellen und ausführen können. Es bietet Ihnen alle Vorteile der Containertechnologie und ermöglicht es Ihnen, Ihre Software schneller als je zuvor zu programmieren, zu liefern und bereitzustellen!

Es ist eine stabile und kampferprobte Technologie, die 2013 veröffentlicht wurde. Seitdem wurde sie von vielen großen Unternehmen wie Google, AWS und Microsoft übernommen. Sie wird von einer großen Gemeinschaft von Entwicklern unterstützt, was bedeutet, dass Sie leicht Hilfe finden können, wenn Sie einmal nicht weiterkommen.

Docker ist nicht das einzige Containerisierungswerkzeug auf dem Markt, aber es ist das beliebteste. Einige der großartigen Alternativen sind Podman, LXD, containerd und Buildah.

Vorteile der Verwendung von Docker

Neben all den Vorteilen der Containerisierungstechnologie bietet Docker noch weitere Vorteile. Schauen wir sie uns an.

Leichtgewicht

Durch seine Leichtigkeit und Schnelligkeit ist Docker ein praktischer und budgetfreundlicher Ersatz für virtuelle Maschinen. Docker eignet sich für Umgebungen mit hoher Dichte und für kleine und mittlere Implementierungen, bei denen Sie mit weniger Ressourcen mehr erreichen müssen.

Versionskontrolle

Docker ermöglicht die Versionierung von Anwendungen, so dass es einfach ist, bei Bedarf auf eine frühere Version zurückzugreifen. Dies kann dazu beitragen, Ausfallzeiten zu reduzieren und die Auswirkungen von Problemen im Zusammenhang mit Aktualisierungen oder Änderungen an einer Anwendung zu minimieren.

Verbesserte Zusammenarbeit

Docker Hub ist ein Cloud-basiertes Repository zum Speichern, Freigeben und Verwalten von Docker-Images, ohne dass Sie ein Docker-Image von Grund auf neu erstellen müssen. Es bietet einen zentralen Ort für die Entdeckung und gemeinsame Nutzung beliebter Docker-Images, einschließlich der von der Docker-Community erstellten und der offiziellen Images von Softwareanbietern. Es ist eng mit Docker CLI und Docker Desktop integriert.

Skalierbarkeit

Docker bietet eine skalierbare Architektur, die für die Bereitstellung von Anwendungen auf großen verteilten Systemen wie Clustern oder Cloud-Plattformen verwendet werden kann. Die Fähigkeit von Docker, eine große Anzahl von Containern zu handhaben und sie durch Tools wie Docker Swarm oder Kubernetes zu orchestrieren, ermöglicht eine einfache Skalierung nach oben oder unten je nach Bedarf.

Docker und lokale Entwicklung

Der einfachste Weg, um Docker auf Ihrem lokalen Rechner zum Laufen zu bringen, ist die Installation von Docker Desktop. Docker Desktop ist eine Anwendung, die eine einfach zu bedienende Benutzeroberfläche und die erforderlichen Tools zum Erstellen, Testen und Bereitstellen von containerisierten Anwendungen auf Ihrem lokalen Computer bietet. Es ermöglicht Ihnen die Verwaltung von Containern, Images und Volumes. Es verfügt über eine integrierte Docker-Engine, Docker CLI und Docker Compose.

Außerdem können Sie Docker Extensions verwenden, die Ihnen bei der Automatisierung Ihrer Arbeitsabläufe und Aufgaben helfen können. Docker Desktop erleichtert Ihnen die Zusammenarbeit mit anderen Entwicklern und bietet eine hervorragende integrierte Docker Hub-Unterstützung.

Docker Desktop ist sowohl für Windows, Mac als auch für Linux verfügbar.

Optionen für die Docker-Bereitstellung

Die Entwicklung einer Anwendung mit Docker ist einfach und Container können auf verschiedenen Plattformen bereitgestellt werden. Wir können sie im Allgemeinen in die folgenden Gruppen unterteilen:

1. Konventionelles Hosting
2. Infrastruktur als Dienstleistung (IaaS)
3. Plattform als Dienstleistung (PaaS)
4. Container als Dienstleistung (CaaS)

Auf der Grundlage ihrer Abstraktion können wir sie in einem Pyramidendiagramm wie folgt veranschaulichen:

Analysieren wir jeden einzelnen von ihnen.

Docker und herkömmliches Hosting

Wie Sie vielleicht schon vermutet haben, können Docker-Container ganz einfach auf Ihrem eigenen Server bereitgestellt werden. Um Docker auf Ihrem Server zum Laufen zu bringen, müssen Sie Folgendes tun:

1. Installieren Sie die Docker-Engine.
2. Erstellen Sie die Docker-Images (lokal) oder ziehen Sie sie aus einer Container-Registry.
3. Verwenden Sie die Bilder, um Container zu spinnen.
4. Einrichten von Netzwerken, Datenträgern, Firewall und so weiter.

Wenn Sie den Bereitstellungsprozess noch weiter vereinfachen möchten, können Sie Docker Compose verwenden. Mit Docker Compose können Sie Dienste, Netzwerke und Volumes in einer einzigen Datei deklarieren. Außerdem eignet es sich hervorragend für Docker-Anwendungen mit mehreren Containern.

Docker auf IaaS

Infrastructure as a Service (IaaS) ist ein Cloud-Computing-Dienstmodell, das Rechenressourcen wie Server, Netzwerke, Betriebssysteme und Speicher in einer virtualisierten Umgebung bereitstellt. Diese Cloud-Server werden dem Unternehmen in der Regel über hochentwickelte APIs oder erweiterte Dashboards zur Verfügung gestellt, die den Kunden die vollständige Kontrolle über die gesamte Infrastruktur geben.

Docker auf IaaS unterscheidet sich nicht wesentlich von der Verwendung eines eigenen Servers. Wenn Sie sich für diesen Ansatz entscheiden, müssen Sie ähnliche Schritte befolgen wie beim herkömmlichen Hosting.

Zu den IaaS-Anbietern gehören AWS, GCP und Azure.

Docker auf PaaS

Platform as a Service (PaaS) ist ein Cloud-Computing-Dienstmodell, das Nutzern eine Cloud-Umgebung bietet, in der sie Anwendungen entwickeln, verwalten und bereitstellen können. Neben der Bereitstellung von Computerressourcen enthält PaaS eine Reihe von vorgefertigten Tools für die Entwicklung, Anpassung und Prüfung von Anwendungen. Bei den meisten PaaS-Anbietern können Sie Ihre Anwendung mit wenigen Klicks zum Laufen bringen!

PaaS-Plattformen, die Docker unterstützen, vereinfachen den Bereitstellungsprozess noch weiter. PaaS-Anbieter stellen in der Regel großartige Tools zur Verfügung, mit denen Sie Ihre Docker-Anwendung ohne Probleme bereitstellen können.

Um mehr über PaaS zu erfahren, lesen Sie bitte Was ist PaaS – Platform as a Service?

Docker auf CaaS

Container as a Service (CaaS) ist eine Art von Platform as a Service (PaaS), die speziell eine Plattform für die Ausführung und Verwaltung von containerisierten Anwendungen bietet. Es wurde entwickelt, um die Ausführung, Verwaltung und Skalierung von Docker-Containern und Microservices in der Cloud zu erleichtern.

CaaS ist die einfachste Option, da sie auf Container spezialisiert ist und die zugrunde liegende Infrastruktur abstrahiert, so dass sich die Entwickler nicht um die Verwaltung der zugrunde liegenden Server und Netzwerke kümmern müssen. Zusätzliche Funktionen, die die meisten CaaS-Anbieter anbieten, sind Skalierung, Lastausgleich, automatisches Failover, Zero-Time-Deployments und so weiter!

Beispiele für CaaS sind Back4app Containers, AWS ECS, Azure ACI und Google GKE.

Um mehr über CaaS zu erfahren, lesen Sie bitte Was ist CaaS – Container as a Service?

Bereitstellen eines Docker-Containers auf Back4app Containers

In diesem Abschnitt des Artikels werden wir eine einfache Next.js-Anwendung programmieren, andocken und in Back4app Containern bereitstellen.

Was ist Back4app Containers?

Back4app Containers ist eine kostenlose Open-Source-Plattform für die Bereitstellung und Skalierung von Anwendungen auf global verteilten Containern. Sie ermöglicht es Ihnen, sich auf Ihre Software zu konzentrieren und sie schneller zu liefern, ohne sich um DevOps kümmern zu müssen. Die Plattform ist eng mit GitHub integriert, verfügt über ein integriertes CI/CD-System und ermöglicht es Ihnen, Ihre App in wenigen Minuten zum Laufen zu bringen!

Warum Back4app-Container verwenden?

• Gut mit GitHub integrierbar
• Bereitstellungen ohne Ausfallzeiten
• Einfach zu benutzen & hat eine kostenlose Stufe
• Ausgezeichnete Kundenbetreuung

Projekt-Einführung

Wir werden eine einfache TODO-Webanwendung mit persistenter Speicherung erstellen. Die Anwendung wird es den Benutzern ermöglichen, Aufgaben hinzuzufügen, zu entfernen und als erledigt zu markieren. Wir werden sie mit Next.js, React und Zustand für die Zustandsverwaltung und -persistenz erstellen. Zum Schluss werden wir die App andocken und in Back4app Containern bereitstellen.

Das Endprodukt wird wie folgt aussehen:

Voraussetzungen:

• Erfahrung mit JavaScript ES6
• Grundlegendes Verständnis von React und Next.js
• Fähigkeit zur Nutzung von Git und GitHub

Code App

Projekt-Initialisierung

Beginnen wir mit der Erstellung eines neuen Next.js-Projekts.

Der einfachste Weg, ein Next.js-Projekt zu booten, ist die Verwendung des Dienstprogramms create-next-app. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

$ npx create-next-app@latest

√ What is your project named? ... nextjs-todo
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use `src/` directory with this project? ... No
√ Would you like to use experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Success! Created a new Next.js app in C:\Users\Nik\WebstormProjects\nextjs-todo.

Starten Sie dann den Server:

$ npm run dev

Navigieren Sie zu http://localhost:3000 und Sie sollten die standardmäßige Next.js Landing Page sehen.

Material UI

Mit Material UI – einer React-Komponentenbibliothek, die dem Material Design von Google folgt – können wir den UI-Erstellungsprozess vereinfachen. Diese Bibliothek bietet eine vielfältige Auswahl an gebrauchsfertigen Komponenten, mit denen sich Benutzeroberflächen einfach und effizient erstellen lassen.

Es steht Ihnen frei, Material UI gegen ein anderes UI-Framework wie React Bootstrap oder Ant Design auszutauschen.

Um Material UI zu Ihrem Projekt hinzuzufügen, führen Sie aus:

$ npm install @mui/material @emotion/react @emotion/styled

Material UI verwendet standardmäßig die Schriftart Roboto. Installieren wir sie mit:

$ npm install @fontsource/roboto

Navigieren Sie dann zu _app.js und fügen Sie die folgenden Importe am Anfang der Datei hinzu:

Benutzeroberfläche

Unsere Webanwendung wird die folgenden zwei Seiten haben:

1. / wird die Aufgabenliste angezeigt
2. /add ermöglicht es Benutzern, eine neue Aufgabe hinzuzufügen

Beginnen wir mit der Indexseite.

Um unseren Code übersichtlicher zu gestalten, erstellen Sie im Stammverzeichnis des Projekts ein neues Verzeichnis namens components. Erstellen Sie in diesem Verzeichnis eine neue Datei namens Task.js mit folgendem Inhalt:

Verwenden Sie anschließend die neu erstellte Komponente in index.js, um die Aufgaben anzuzeigen:

1. Wir haben den React-Hook useState() verwendet, um einen Status für Aufgaben zu erstellen.
2. Wir haben das Aufgaben-Array mit einigen Dummy-Daten aufgefüllt.
3. Wir haben MUI-Komponenten und die Task-Komponente verwendet, um die Aufgaben anzuzeigen (oder eine Meldung, wenn noch keine Aufgaben vorhanden sind).

Starten Sie den Entwicklungsserver:

$ npm run dev

Navigieren Sie zu http://localhost:3000 und Sie sollten die Aufgabenliste sehen:

Lassen Sie uns nun eine Seite zum Hinzufügen von Aufgaben erstellen.

Legen Sie eine neue Datei namens add.js im Verzeichnis pages an:

Dieser Code zeigt ein einfaches Formular an, mit dem Benutzer neue Aufgaben hinzufügen können.

Starten Sie den Server neu und navigieren Sie zu /add oder klicken Sie auf die Schaltfläche “Aufgabe hinzufügen” oben rechts auf dem Bildschirm. Sie sollten etwas wie dieses sehen:

Großartig, unsere Benutzeroberfläche ist nun vollständig. Im nächsten Schritt werden wir die eigentliche Logik und den Zustand implementieren.

Staatliches Management

Um den globalen Zustand zu handhaben, werden wir Zustand verwenden – eine kleine, schnelle und skalierbare Zustandsverwaltungsbibliothek für React-Anwendungen.

Installieren Sie es zunächst über npm:

$ npm install zustand

Als Nächstes müssen wir einen Speicher erstellen.

Um unseren Code übersichtlicher zu gestalten, legen wir einen eigenen Ordner namens store für den globalen Status an. In diesem Ordner erstellen wir eine Datei namens storage.js mit folgendem Inhalt:

1. Zustand create() erstellt den Speicher.
2. Um den Status in localStorage zu speichern, haben wir die Middleware persist() verwendet.
3. tasks ist ein Array, das die Aufgaben des Benutzers enthält.
4. addTask, deleteTask, markTaskAsDone sind Methoden zur Bearbeitung des Aufgaben-Arrays.

Als Letztes müssen wir alle Seiten und Komponenten durchgehen, die den globalen Status benötigen, und sie binden.

Beginnen Sie damit, zu index.js zu navigieren und es wie folgt zu ändern:

Vergessen Sie nicht, den Import am Anfang der Datei hinzuzufügen:

import useGlobalStore from "@/store/storage";

Navigieren Sie anschließend zu components/Task.js und ändern Sie die Datei wie folgt:

Navigieren Sie schließlich zu pages/add.js und lassen Sie handleSubmit() die Aufgabe übermitteln:

Auch hier gilt: Vergessen Sie nicht die Einfuhr:

import useGlobalStore from "@/store/storage";

Großartig, unsere Webanwendung verwendet nun Zustand, um den globalen Speicher zu verwalten und persistiert ihn über localStorage. Starten Sie die App erneut und stellen Sie sicher, dass alles funktioniert.

Dockerize-App

Für die folgenden Schritte ist es erforderlich, dass Sie Docker installiert haben. Der einfachste Weg, Docker zu installieren, ist der Download von Docker Desktop.

Stellen Sie sicher, dass Docker läuft:

$ docker --version

Docker version 20.10.22, build 3a2c30b

Next.js konfigurieren

Gehen Sie zunächst zu Ihrer next.config.js und setzen Sie die Ausgabe auf "standalone" wie folgt:

Wenn Sie diese Einstellung ändern, wird mit dem nächsten Build eine eigenständige Version unserer Next.js-App erstellt. Eine Standalone-Anwendung kann ohne Installation von node_modules bereitgestellt werden. Der Standalone-Build enthält auch einen integrierten Webserver.

Dockerdatei

Zur Dockerisierung unserer Anwendung verwenden wir ein Dockerfile. Ein Dockerfile ist eine einfache Textdatei, mit der wir das Basis-Image, die Umgebung, Umgebungsvariablen, Befehle, Netzwerkeinstellungen, Volumes und so weiter definieren können.

Erstellen Sie ein Dockerfile in Ihrem Projektstamm mit folgendem Inhalt:

Dieses Dockerfile nutzt die Vorteile von Multi-Stage-Builds. Mit mehrstufigen Builds können wir die Größe des Images erheblich reduzieren und unsere Images schneller erstellen. Wir haben die folgenden drei Stufen erstellt:

1. In der Phase der Abhängigkeiten wird die Abhängigkeitsdatei kopiert und die Abhängigkeiten werden installiert.
2. Die Builder-Phase kopiert die Abhängigkeiten und baut das Projekt über npm.
3. Die Runner-Stufe kopiert den Standalone-Build und stellt ihn über den Standalone-Server bereit.

Schließlich haben wir einen Port freigelegt, den Back4app Containers für die Abbildung der App verwenden wird.

Weitere Informationen zur Verwendung von Docker mit Next.js finden Sie im With-Docker-Repository.

.dockerignore

Bevor Docker ein Abbild erstellt, sucht es nach einer .dockerignore-Datei. Mit einer .dockerignore-Datei können wir festlegen, welche Dateien nicht in das Abbild aufgenommen werden sollen. Dies kann die Größe des Images erheblich reduzieren. Sie funktioniert ähnlich wie eine .gitignore-Datei.

Erstellen Sie eine .dockerignore-Datei im Stammverzeichnis des Projekts mit folgendem Inhalt:

Fügen Sie alle zusätzlichen Verzeichnisse oder Dateien hinzu, die Sie ausschließen möchten.

Erstellen und Ausführen des Abbilds

Lassen Sie uns nun unser Docker-Image erstellen und markieren:

$ docker build -t nextjs-todo:1.0 .

Wenn Sie Ihre Bilder auflisten, sollten Sie das neue Bild sehen:

$ docker images

REPOSITORY        TAG       IMAGE ID       CREATED       SIZE
nextjs-todo       1.0       7bce66230eb1   2 hours ago   160MB

Schließlich verwenden Sie das Image, um einen neuen Docker-Container zu starten:

$ docker run -it -p 3000:3000 -d nextjs-todo:1.0

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Sie können -d verwenden, um den Docker-Container im losgelösten Modus zu starten. Das bedeutet, dass der Container im Hintergrund Ihres Terminals läuft und keine Eingaben empfängt oder Ausgaben anzeigt.

Gut gemacht, Ihre Anwendung läuft jetzt in einem Container! Navigieren Sie zu http://localhost:3000 und Sie sollten Ihre TODO-App sehen.

GitHub

Um die App auf Back4app Containers bereitzustellen, müssen Sie Ihren Quellcode in ein GitHub-Repository hochladen. Legen Sie ein neues Repository auf GitHub an, fügen Sie die Remote hinzu, fügen Sie .gitignore hinzu und übertragen Sie Ihren Code. Sobald sich Ihr Code auf GitHub befindet, fahren Sie mit dem nächsten Schritt fort.

Wenn Sie Back4app Containers einfach nur testen möchten, können Sie das back4app-containers-nextjs Repo forken und stattdessen dieses einsetzen.

Stellen Sie Ihre App in Back4app Containern bereit

Für die folgenden Schritte benötigen Sie ein Back4app-Konto. Wenn Sie bereits ein Konto haben, loggen Sie sich ein, ansonsten melden Sie sich für das kostenlose Konto an.

Um mit Back4app zu arbeiten, müssen wir zunächst eine App erstellen. Wenn Sie sich in Ihrem Dashboard anmelden, sehen Sie die Liste Ihrer Apps. Klicken Sie auf “Build a new app”, um eine neue App zu erstellen.

Wählen Sie dann “Container als Dienst”.

Wenn Sie es noch nicht getan haben, verbinden Sie Ihr GitHub mit Back4app und importieren Sie die Repositories, die Sie bereitstellen möchten. Sobald Ihr GitHub verbunden ist, werden Ihre Repositories in der Tabelle angezeigt.

Wählen Sie das Repository, das Sie bereitstellen möchten, indem Sie auf “Auswählen” klicken.

Als nächstes wird Back4app Sie bitten, die Umgebung zu konfigurieren. Wählen Sie einen App-Namen, ich nehme nextjs-todo. Alles andere können Sie als Standard belassen.

Klicken Sie abschließend auf “App erstellen”, um die App automatisch zu erstellen und bereitzustellen.

Sie werden dann zu den Details Ihrer Anwendung weitergeleitet, wo Sie die Bereitstellungsprotokolle sehen können.

Warten Sie ein paar Minuten auf die Bereitstellung der App und voila! Ihre App ist nun live auf Back4app Containers. Um Ihre App in Aktion zu sehen, klicken Sie auf die grüne URL auf der linken Seite.

Schlussfolgerung

In diesem Artikel haben wir erklärt, was Docker ist, welche Vorteile es bietet und wie Sie es in Ihren Arbeitsablauf integrieren können. Inzwischen sollten Sie in der Lage sein, Ihre eigenen Next.js-Anwendungen zu programmieren, zu docken und in Back4app-Containern bereitzustellen.

Der endgültige Quellcode ist auf dem back4app-containers-nextjs GitHub-Repository verfügbar.

FAQ