So stellen Sie ein Vue-Projekt mit Docker-Image + nginx bereit

1. Vue-Projekt verpacken

Geben Sie den folgenden Namen in das entwickelte Vue-Projekt ein und packen Sie es, um einen Dist-Ordner zu generieren

Garn-Build / NPM-Run-Build

An diesem Punkt gibt es einen zusätzlichen Ordner im Stammverzeichnis: den Ordner „dist“, der enthält, was wir veröffentlichen möchten.

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

2. Holen Sie sich das Nginx-Image

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

Geben Sie im Terminal ein:

Docker-Pull Nginx

Sie können das Nginx-Image erhalten.

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.

Geben Sie den folgenden Befehl im Terminal ein, um das Nginx-Image anzuzeigen

Docker-Image ls

Das Spiegelungsergebnis ist wie folgt:

3. 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;
    Versuchen Sie, Dateien $uri $uri/ /index.html zu versuchen.
  }

  #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;
  }
}

Hinweis ⚠️: Wenn Vue-Router den Verlaufsmodus verwendet, ist try_files $uri $uri/ /index.html; sehr wichtig! ! !

Da es sich bei unserer Anwendung um eine einseitige Clientanwendung handelt, wird bei einer falschen Hintergrundkonfiguration beim Zugriff des Benutzers auf die Adresse im Browser eine 404-Fehlermeldung zurückgegeben.

Daher müssen Sie serverseitig eine Kandidatenressource hinzufügen, um alle Situationen abzudecken. Wenn die URL keiner statischen Ressource entspricht, sollte dieselbe index.html-Seite zurückgegeben werden. Diese Seite ist die Seite, von der Ihre App abhängt.

Die obige Datei definiert die Homepage als /usr/share/nginx/html/index.html, sodass wir die erstellte Datei index.html und die zugehörigen statischen Ressourcen später in das Verzeichnis /usr/share/nginx/html legen können.

4. Erstellen Sie ein Dockerfile

# Legen Sie das Basis-Image von nginx fest
# Definieren Sie den Autor MAINTAINER lihui <[email protected]>
#Kopieren Sie den Inhalt der Dist-Datei in das Verzeichnis /usr/share/nginx/html/ COPY dist/ /usr/share/nginx/html/
#Ersetzen Sie die Standardkonfiguration im Nginx-Image durch die lokale default.conf-Konfiguration KOPIEREN nginx/default.conf /etc/nginx/conf.d/default.conf

5. Erstellen Sie ein Vue-Anwendungsimage basierend auf der Docker-Datei

Führen Sie den folgenden Befehl aus und achten Sie darauf, das letzte „.“ nicht zu vergessen.

Docker-Build -t-Test.

-t wird zum Benennen des Images verwendet, Test ist der Name des generierten Images und . wird zum Erstellen des Images basierend auf der Docker-Datei im aktuellen Verzeichnis verwendet.

Das Vue-basierte Bild wird generiert!

Oben finden Sie detaillierte Informationen zur Methode zum Bereitstellen eines Vue-Projekts mit Docker-Image + nginx. Weitere Informationen zur Docker-Bereitstellung eines Vue-Projekts finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!