Erfahren Sie, wie Sie ein Vue-Projekt mit Docker bereitstellen

1.Schreiben Sie davor:

Als leichtgewichtige Virtualisierungstechnologie bietet Docker die Vorteile der kontinuierlichen Integration, Versionskontrolle, Portabilität, Isolation und Sicherheit. In diesem Artikel wird Docker zum Bereitstellen einer Vue-Front-End-Anwendung verwendet. Die Implementierungsideen und spezifischen Schritte werden so detailliert wie möglich vorgestellt, um Studierenden mit ähnlichen Anforderungen das Nachschlagen zu erleichtern.

Docker ist eine Open-Source-Container-Engine für Anwendungen, mit der Entwickler ihre Anwendungen und abhängige Pakete in einem portablen Container verpacken können. Der Container enthält den Anwendungscode, die Laufzeitumgebung, abhängige Bibliotheken, Konfigurationsdateien und andere erforderliche Ressourcen. Mit dem Container kann eine bequeme, schnelle und plattformunabhängige Methode zur automatischen Bereitstellung implementiert werden. Unabhängig von der Umgebung, in der Sie bereitstellen, wird die Anwendung im Container in derselben Umgebung ausgeführt. (Weitere Einzelheiten finden Sie auf der offiziellen Docker-Website.)

Docker und @vue/cli sind standardmäßig installiert.

Verwandte Versionen:

• Docker-Version 18.09.2, Build 6247962
• vue-cli --version 3.3.0
• macOS Mojave Version 10.14.1

Die Betriebsumgebung ist macOS. Wenn es einen Unterschied zwischen Ihrem Betriebssystem und dem des Readers gibt, passen Sie ihn bitte selbst an

Verwandte Bilder:

• nginx:neueste
• Knoten: neueste

2. Konkrete Umsetzung:

• Verwenden Sie Vue CLI, um ein Vue-Projekt zu erstellen, das erstellte Projekt zu ändern, eine Front-End-Schnittstellenanforderung auf die Seite zu schreiben, eine Version der Online-Ressourcen zu erstellen, ein Front-End-Engineering-Image basierend auf dem Nginx-Docker-Image zu erstellen und dann einen Container Vuenginxcontainer basierend auf diesem Front-End-Engineering-Image zu starten.
• Starten Sie einen Container-Node-Webserver basierend auf dem Node-Image, um eine Backend-Schnittstelle bereitzustellen.
• Ändern Sie die Nginx-Konfiguration von Vuenginxcontainer, um die Schnittstellenanforderung der Front-End-Seite an den Node-Webserver weiterzuleiten.
• Kleinere Optimierungen und Verbesserungen.

3. Erstellen Sie eine Vue-Anwendung

3.1 Vue CLI erstellt ein Vue-Projekt

Befehl ausführen

Garn servieren / npm ausführen servieren 

Besuchen Sie http://localhost:8081

3.2 Umschreiben

Schreiben Sie die Seite leicht um, ändern Sie die an die HelloWorld-Komponente in App.vue übergebene Nachricht in „Hello Docker“ und fügen Sie dem erstellten Lebenszyklus eine Schnittstellenanforderung hinzu

importiere Axios von „Axios“;

…

axios.get('/api/json', {
 Parameter: {}
}).Dann(
 res => {
 konsole.log(res);
 }
).fangen(
 Fehler => {
  konsole.log(Fehler);
 }
)

…

Zu diesem Zeitpunkt wird in der Seitenkonsole eine Fehlermeldung angezeigt:

/api/json-Schnittstelle 404. Natürlich existiert diese Schnittstelle derzeit nicht. Ich werde sie vorerst hier schreiben und diese Schnittstelle später aufrufen.

3.3 Erstellen eines Vue-Projekts

Befehl ausführen

Garn-Build / NPM-Run-Build 

Zu diesem Zeitpunkt gibt es eine zusätzliche dist im Stammverzeichnis des Projekts

Ordner

Wenn Sie das gesamte „Dist“-Verzeichnis auf den Server übertragen und als statische Ressourcensite bereitstellen, können Sie direkt auf das Projekt zugreifen.

Als Nächstes erstellen wir eine solche statische Ressourcensite.

4 Erstellen Sie das Vue-Anwendungsimage

nginx ist ein leistungsstarker HTTP- und Reverse-Proxy-Server. Hier verwenden wir das nginx-Image als Grundlage zum Erstellen unseres Vue-Anwendungsimages.

4.1 Holen Sie sich das Nginx-Image

Docker-Pull Nginx

• docker -Image (Image) ist ein spezielles Dateisystem. Ein Docker-Image ist ein spezielles Dateisystem, das neben den für die Ausführung des Containers erforderlichen Programmen, Bibliotheken, Ressourcen, Konfigurationen und anderen Dateien auch einige für die Laufzeit vorbereitete Konfigurationsparameter enthält (z. B. anonyme Volumes, Umgebungsvariablen, Benutzer usw.). Bilder enthalten keine dynamischen Daten und ihre Inhalte werden nach der Erstellung nicht mehr geändert.
• Zu den mit Docker-Images verbundenen Vorgängen zählen: Suchen nach Images docker search [REPOSITORY[:TAG]] , Abrufen von Images docker pull [REPOSITORY[:TAG]] , Anzeigen von Image-Listen „ docker image ls “, Löschen von Images: docker image rm [REPOSITORY[:TAG]] / docker rmi [REPOSITORY[:TAG]] usw.
• Der Name des Docker-Image besteht aus REPOSITORY und TAG [REPOSITORY[:TAG]] , wobei TAG standardmäßig auf „latest“ eingestellt ist.

4.2 Erstellen Sie eine Nginx-Konfigurationsdatei

Erstellen Sie einen nginx -Ordner im Stammverzeichnis des Projekts und erstellen Sie eine neue Datei default.conf im Ordner

Server {
 hören Sie 80;
 Servername localhost;

 #Zeichensatz koi8-r;
 Zugriffsprotokoll /var/log/nginx/host.access.log Haupt;
 error_log /var/log/nginx/error.log Fehler;

 Standort / {
  root /usr/share/nginx/html;
  Index Index.html Index.htm;
 }

 #Fehlerseite 404 /404.html;

 # Server-Fehlerseiten auf die statische Seite /50x.html umleiten
 #
 Fehlerseite 500 502 503 504 /50x.html;
 Standort = /50x.html {
  root /usr/share/nginx/html;
 }
}

Diese Konfigurationsdatei definiert, dass die Homepage auf /usr/share/nginx/html/index.html verweist, sodass wir die erstellte Datei „index.html“ und die zugehörigen statischen Ressourcen später im Verzeichnis /usr/share/nginx/html ablegen können.

4.3 Erstellen eines Dockerfiles

VON nginx
KOPIEREN Sie dist/ /usr/share/nginx/html/
KOPIEREN Sie nginx/default.conf /etc/nginx/conf.d/default.conf

• Beim benutzerdefinierten Erstellen eines Images wird es auf Basis einer Docker-Datei erstellt.
• Der Befehl FROM nginx bedeutet, dass das Image basierend auf dem Image nginx:latest erstellt wird.
• Der Befehl COPY dist/ /usr/share/nginx/html/ kopiert alle Dateien im Ordner „dist“ im Stammverzeichnis des Projekts in das Verzeichnis /usr/share/nginx/html/ im Image.
• Der Befehl COPY nginx/default.conf /etc/nginx/conf.d/default.conf bedeutet, dass die Datei default.conf im Verzeichnis nginx nach etc/nginx/conf.d/default.conf kopiert wird und die Standardkonfiguration im nginx-Image durch die lokale Konfiguration default.conf ersetzt wird.

4.4 Erstellen Sie ein Vue-Anwendungsimage basierend auf der Docker-Datei

Führen Sie den Befehl aus (beachten Sie, dass der letzte „.“ fehlt).

Docker-Build -t vuenginxcontainer.

-t dient zum Benennen des Images . Es basiert auf der Docker-Datei im aktuellen Verzeichnis, um das Image zu erstellen

Zeigen Sie das lokale Image an und führen Sie den Befehl aus

Docker-Image ls | grep vuenginxcontainer

An diesem Punkt wurde unser vue -Anwendungsimage vuenginxcontainer erfolgreich erstellt. Als nächstes starten wir einen docker basierend auf diesem Image

Container.

4.5 Starten Sie den Vue-App-Container

Docker-Container: Die Entität zur Laufzeit des Images. Die Beziehung zwischen einem Bild und einem Container ähnelt der zwischen einer Klasse und einer Instanz in der objektorientierten Programmierung. Ein Bild ist eine statische Definition und ein Container ist eine Entität zur Laufzeit des Bildes. Container können erstellt, gestartet, gestoppt, gelöscht, angehalten usw. werden.

Starten Sie den Container basierend auf dem vuenginxcontainer-Image und führen Sie den Befehl aus:

Docker-Ausführung \
-p 3000:80 \
-d --name vueApp \
Abonnieren

docker run startet einen Container basierend auf einem Image
-p 3000:80 Port-Mapping, ordnet den Port 3000 des Hosts dem Port 80 des Containers zu
-d Im Hintergrundmodus ausführen
--name Containername zum Anzeigen des Docker-Prozesses

Docker PS

Sie können feststellen, dass der Container mit dem Namen vueApp bereits ausgeführt wird. Besuchen Sie jetzt http://localhost:3000

Sie sollten auf die Vue-Anwendung zugreifen können:

Bisher wurde ein statischer Ressourcendienst über den docker Container bereitgestellt und es kann auf statische Ressourcendateien zugegriffen werden. Es sind noch keine Daten für die /api/json-Schnittstelle vorhanden. Lassen Sie uns als Nächstes dieses Problem lösen.

5 Schnittstellendienste

Bereitstellen eines weiteren Knotencontainers zur Bereitstellung von Schnittstellendiensten

5.1 Express-Service

Verwenden Sie das Node Web Framework express , um einen Dienst zu schreiben und eine Route server.js zu registrieren, die das Datenformat JSON zurückgibt:

„streng verwenden“;

const express = erfordern('express');

konstanter PORT = 8080;
const HOST = "0.0.0.0";

const app = express();
app.get('/', (req, res) => {
 res.send('Hallo Welt\n');
});

app.get('/json', (req, res) => {
 res.json({
  Code: 0,
  Daten: „Dies ist eine Nachricht vom Knotencontainer“
 })
});

app.listen(PORT, HOST);
console.log(`Läuft auf http://${HOST}:${PORT}`);

Zum Ausführen der express Anwendung ist node Umgebung erforderlich. Wir erstellen ein neues Image basierend auf node Image.

5.2 Holen Sie sich node Knotenbild

Docker-Pull-Knoten

5.3 Schreiben Sie eine Docker-Datei, um die express -Anwendung zu docker

FROM-Knoten

ARBEITSVERZEICHNIS /usr/src/app

KOPIEREN Sie Paket*.json ./

Führen Sie npm install aus

KOPIEREN . .

EXPOSE 8080
CMD [ "npm", "start" ]

Beim Erstellen des Images werden die node_modules-Abhängigkeiten direkt über RUN npm install installiert. Erstellen Sie im Projekt eine .dockerignore Datei, um einige Dateien zu ignorieren, die direkt übersprungen werden:

Knotenmodule
npm-debug.log

5.4 NodeWebServer-Image erstellen

Führen Sie den Build-Befehl aus:

 Docker-Build -t NodeWebServer. 

5.5 Starten Sie den Nodeserver-Container

Basierend auf dem soeben erstellten nodewebserver-Image starten Sie einen Container mit dem Namen nodeserver, um den Schnittstellendienst-Port 8080 bereitzustellen und den Port 5000 des Hosts zuzuordnen.

Docker-Ausführung \
-p 5000:8080 \
-d --name Knotenserver \
Knotenwebserver

Den aktuellen Docker-Prozess anzeigen

Docker PS 

Es kann festgestellt werden, dass der Nodeserver-Container auch normal läuft. Besuchen Sie die folgende Adresse: http://localhost:5000/json

Kann auf die zuvor geschriebenen JSON-Daten zugreifen

Bisher wurde auch der Backend-Schnittstellendienst normal gestartet. Der Aufruf der Schnittstelle erfolgt durch eine einfache Weiterleitung der Seitenanforderungsschnittstelle an den Backend-Schnittstellendienst.

6. Domänenübergreifende Weiterleitung

Ich möchte Anfragen im VueApp-Container an den Nodeserver-Container weiterleiten. Zunächst müssen Sie die ip Adresse und den Port des Nodeserver-Containers kennen. Derzeit ist bekannt, dass der interne Dienst des Nodeserver-Containers auf Port 8080 lauscht, daher müssen Sie nur ip kennen.

6.1 Zeigen Sie die IP-Adresse des Nodeserver-Containers an:

Es gibt mehrere Möglichkeiten, die interne ip des Containers anzuzeigen. Hier sind zwei:

Betreten Sie den Container, um ihn anzuzeigen

Docker ausführen -it 02277acc3efc bash

Katze /etc/hosts 

docker inspect [containerId] um Containerinformationen direkt anzuzeigen:

Docker-Inspektion 02277acc3efc

Suchen Sie nach netzwerkbezogenen Konfigurationsinformationen:

Notieren Sie die dem Knotendienstcontainer entsprechende IP-Adresse, die beim Konfigurieren der Nginx-Weiterleitung verwendet wird.

6.2 Nginx-Konfiguration ändern

Nginx konfiguriert den Standort so, dass er auf den Knotendienst default.conf verweist. (Front-End-Benutzer, die mehr über Nginx erfahren möchten, finden Einzelheiten zur Nginx-Konfiguration und zum Standort unter „Nginx-Standortabgleich in einem Artikel verstehen“.)

Fügen Sie eine Umschreibregel hinzu, um /api/{path} zur /{path}-Schnittstelle des Zieldienstes umzuleiten. Fügen Sie der vorherigen Datei nginx/default.conf Folgendes hinzu:

Standort /api/ {
 /api/(.*) /$1 break neu schreiben;
 Proxy-Passwort http://172.17.0.2:8080;
}

Nach der Änderung ist mir ein Problem aufgefallen: Der VueApp-Container wird basierend auf dem Vuenginxcontainer-Image ausgeführt, und als das Image zum ersten Mal erstellt wurde, war die Nginx-Konfiguration default.conf direkt darin integriert. Wenn Sie default.conf ändern müssen, müssen Sie daher ein neues Image neu erstellen und dann einen neuen Container basierend auf dem neuen Image ausführen.

7. Verbesserungen

Ist es möglich, die neue Konfiguration wirksam zu machen, indem der Container bei jeder Änderung der Konfigurationsdatei einfach neu gestartet wird? Die Antwort ist natürlich ja.

Beim Erstellen des Images wird die Nginx-Konfiguration nicht in das Image kopiert, sondern direkt auf dem Host gemountet. Nach jeder Konfigurationsänderung muss der Container einfach neu gestartet werden.

7.1 Ändern des Dockerfiles

Ändern Sie das Dockerfile unter dem Vueclidemo-Projekt

VON nginx
KOPIEREN Sie dist/ /usr/share/nginx/html/
KOPIEREN Sie nginx/default.conf /etc/nginx/conf.d/default.conf

Löschen Sie den Befehl COPY nginx/default.conf /etc/nginx/conf.d/default.conf . Die Nginx-Konfiguration wird über den Mount-Befehl auf dem Hostcomputer gemountet. Schauen wir uns COPY dist/ /usr/share/nginx/html/ an. Wenn sich der Inhalt des erstellten Projekts unter dist/ jedes Mal ändert, müssen Sie ein neues Image erstellen und erneut einen neuen Container starten. Daher kann dieser Befehl auch gelöscht und der Container durch Mounten gestartet werden.

7.2 Führen Sie den Vue-Anwendungscontainer erneut aus

Starten Sie den Container vuenginxnew direkt basierend auf dem Nginx-Image und führen Sie den Befehl aus:

Docker-Ausführung \
-p 3000:80 \
-d --name vuenginxnew \
--mount Typ=Binden,Quelle=$HOME/SelfWork/Docker/vueclidemo/nginx,Ziel=/etc/nginx/conf.d \
--mount Typ=Binden,Quelle=$HOME/SelfWork/Docker/vueclidemo/dist,Ziel=/usr/share/nginx/html \
nginx

• --mount type=bind,source={sourceDir},target={targetDir} mountet das sourceDir des Hosts in das targetDir-Verzeichnis des Containers.
• Der hier ausgeführte Befehl ist lang. Wenn es mühsam ist, ihn jedes Mal erneut einzugeben, können wir den vollständigen Befehl in einer shell Datei vueapp.sh speichern und dann sh vueapp.sh direkt ausführen.

Auf diese Weise müssen Sie jedes Mal, wenn Sie die Nginx-Konfiguration ändern oder die Vue-Anwendung neu erstellen, nur den Container neu starten, damit die Änderungen sofort wirksam werden. Wenn wir zu diesem Zeitpunkt http://localhost:3000/api/json erneut besuchen, können wir sehen, dass die Schnittstelle normal zurückkehren kann, was darauf hinweist, dass die Weiterleitung effektiv ist.

An dieser Stelle wurde auch die Weiterleitung des Schnittstellendienstes angepasst.

7.3 Lastenausgleich konfigurieren

Um die Dienststabilität zu gewährleisten, werden Backend-Dienste im Allgemeinen auf zwei oder mehreren Maschinen ausgeführt. Wir können einen weiteren Back-End-Service-Container starten und die nginx -Konfiguration ändern, um die Ressourcennutzung zu optimieren, den Durchsatz zu maximieren, die Latenz zu reduzieren und eine fehlertolerante Konfiguration sicherzustellen.

Starten Sie einen neuen Container basierend auf den ähnlichen Vorgängen in Abschnitt 4.5 und überprüfen Sie die IP-Adresse des neuen Containers (172.17.0.3) basierend auf den ähnlichen Vorgängen in Abschnitt 5.1.

Ändern Sie nginx/default.conf (fügen Sie Upstream hinzu, ändern Sie Proxy-Pass im Speicherort /api/):

 Upstream-Backend {
  Server 172.17.0.2:8080;
  Server 172.17.0.3:8080;
 }

 …

 Standort /api/ {
  /api/(.*) /$1 break neu schreiben;
  Proxy_Pass-Backend;
 }

8. Schreiben Sie am Ende

Studierende, die mit der Befehlszeile nicht vertraut sind, können Kitematic wählen, um den Status, das Datenverzeichnis und das Netzwerk von docker Containern zu verwalten. Alle Kapazitätsoperationen können visuell durchgeführt werden, daher werde ich sie hier nicht im Detail vorstellen. Interessierte Schüler können es selbst ausprobieren.

9 Fazit

Docker bietet eine äußerst leistungsfähige Methode zur automatisierten Bereitstellung und Flexibilität, entkoppelt mehrere Anwendungen und sorgt für Entwicklungsflexibilität, Steuerbarkeit und Portabilität. Dieser Artikel verwendet das Vue-Projekt als Beispiel, um die vollständigen Schritte zum Bereitstellen eines Front-End- und Back-End-Projekts mit Docker zu implementieren. Ich hoffe, dass er Studenten, die Docker verwenden möchten, eine Hilfe sein kann.

Verweise

Offizielle Docker-Website
Offizielle Nginx-Website
Docker vom Einstieg bis zur Praxis
Kitematic-Benutzerhandbuch
Was das Frontend über Nginx wissen möchte
Nginx-Standortabgleich in einem Artikel verstehen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.