In diesem Blogbeitrag werden wir Docker erkunden und durch die Erstellung eines mehrstufigen Docker-Builds mit einer einfachen Nginx-Anwendung gehen. Wenn Sie gerade erst mit Docker anfangen, machen Sie sich keine Sorgen, ich werde alles Schritt für Schritt aufschlüsseln, damit Sie mitmachen können!

Die Docker-Datei

Hier ist die Docker-Datei, mit der wir arbeiten werden:

FROM node:18-alpine AS installer

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:latest AS deployer

COPY --from=installer /app/build /usr/share/nginx/html

Entpacken der Docker-Datei

Lassen Sie uns nun Schritt für Schritt entpacken, was in dieser Docker-Datei passiert:

1. FROM node:18-alpine AS installer

Diese Zeile ruft das offizielle Node.js-Image (Version 18 unter Alpine Linux) vom Docker Hub ab. Stellen Sie sich Docker Hub als eine Bildbibliothek vor. Durch die Verwendung dieser Zeile geben wir an, dass wir Node.js als Basis-Image für die erste Phase unseres Builds verwenden möchten.

2. WORKDIR /app

Dieser Befehl legt das Arbeitsverzeichnis im Container auf /app fest. Sie können sich das so vorstellen, als würden Sie einen dedizierten Ordner für Ihre Anwendung innerhalb des Containers erstellen, ähnlich wie Sie Dateien auf Ihrem Desktop organisieren könnten.

3. COPY package*.json ./

Hier kopieren wir die Dateien package.json und package-lock.json aus unserem lokalen Verzeichnis in das Arbeitsverzeichnis des Containers. Diese Dateien enthalten Informationen über die Abhängigkeiten, die unsere Anwendung benötigt.

4. RUN npm install

Dieser Befehl führt npm install aus, wodurch alle in package.json angegebenen Abhängigkeiten installiert werden.

5. KOPIEREN . .

Diese Zeile kopiert den Rest unserer Anwendungsdateien in den Container. Es bringt alles aus unserem lokalen Verzeichnis in das /app-Verzeichnis im Container.

6. RUN npm run build

Jetzt kompilieren wir unsere Anwendung mit dem Befehl npm run build. Dieser Schritt wandelt normalerweise unseren Code (in diesem Fall oft React) in ein statisches Paket um, das den Benutzern bereitgestellt werden kann. Die Ausgabe dieses Befehls wird in einem Build-Verzeichnis innerhalb von /app.

7. VON nginx:neuester AS-Deployer

In dieser Zeile wechseln wir zu einem neuen Basis-Image: Nginx. Nginx ist ein leistungsstarker Webserver, der statische Dateien wie die, die wir gerade erstellt haben, bereitstellen kann. Dies ist der Beginn unserer zweiten Phase im mehrstufigen Build-Prozess.

8. COPY --from=installer /app/build /usr/share/nginx/html

Hier kopieren wir die erstellten Anwendungsdateien aus der vorherigen Phase (Installationsprogramm) in das Nginx-Bereitstellungsverzeichnis. Das Flag --from=installer weist Docker an, Dateien aus der soeben definierten Installationsphase abzurufen.

Ausführen Ihres Docker-Containers

Sobald Ihre Docker-Datei eingerichtet ist, können Sie Ihren Docker-Container mit den folgenden Befehlen erstellen und ausführen:

docker build -t your-app-name .
docker run -dp 3000:80 your-app-name

Stellen Sie sicher, dass Sie Ihren App-Namen durch einen Namen Ihrer Wahl ersetzen. Das Flag -dp trennt Ihren Container und ordnet Port 3000 auf Ihrem Host-Computer Port 80 im Container zu, sodass Sie unter http://localhost:3000 auf Ihre App zugreifen können.

Abschluss

Und da haben Sie es! Sie haben gerade einen mehrstufigen Docker-Build erstellt, der Ihre Anwendung mit Nginx von der Entwicklung bis zur Produktion führt. Wenn Sie Fragen oder Gedanken zum Prozess haben, können Sie unten gerne einen Kommentar hinterlassen!

Fallstricke: Dinge, auf die Sie achten sollten

Ein häufiges Problem bei der Arbeit mit diesem Setup ist das Vergessen, die richtigen Portnummern zuzuordnen. Nginx überwacht normalerweise Port 80 im Container. Wenn Sie jedoch versuchen, auf die App auf Ihrem lokalen Computer zuzugreifen, müssen Sie den richtigen Port vom Container an Ihren Computer weiterleiten. Wenn Sie beispielsweise auf localhost:3000 auf die App zugreifen möchten, müssen Sie den Container mit der Flagge -p 3000:80 ausführen, um Port 3000 auf Ihrem Computer dem Port 80 im Container zuzuordnen.

Wenn Sie diesen Schritt verpassen, werden Sie sich fragen, warum alles perfekt funktioniert, Sie die App aber in Ihrem Browser nicht erreichen können!

Tags und Erwähnungen

@piyushsachdeva
Video von Tag 3