Heim >Web-Frontend >js-Tutorial >CKA-Vollkurs-Tages-Ulti-Stage-Docker-Build
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!
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
Lassen Sie uns nun Schritt für Schritt entpacken, was in dieser Docker-Datei passiert:
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.
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 würden.
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.
Dieser Befehl führt npm install aus, das alle in package.json angegebenen Abhängigkeiten installiert.
Diese Zeile kopiert den Rest unserer Anwendungsdateien in den Container. Es bringt alles aus unserem lokalen Verzeichnis in das /app-Verzeichnis im Container.
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.
abgelegtIn 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.
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.
Sobald Ihre Docker-Datei eingerichtet ist, können Sie Ihren Docker-Container mit den folgenden Befehlen erstellen und ausführen:
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
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.
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!
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!
@piyushsachdeva
Video von Tag 3
Das obige ist der detaillierte Inhalt vonCKA-Vollkurs-Tages-Ulti-Stage-Docker-Build. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!